Javascript蠕虫游戏画布问题

Question

我在画布上制作蠕虫游戏，但我不能让我的代码绘制出线条。我使用几个for循环来检查每个变量的2D数组。这是我现在所拥有的。 W是代码“应该”画在围绕画布边缘的框中的墙。 A是空气或空白，它不应该做任何事情。我认为ctx.fillRect是它没有做任何事情，所以我想知道如何解决它。

var W = 9001; 
    A = 9000; 

var level = [ 
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W], //21*13 Grid 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W] // Comments for easy counting 
] 

function drawLevel(){ 

    var canvas = document.createElement('canvas'); 
     canvas.id = "WormGame"; 
     canvas.width = 420; 
     canvas.height =260; 
     canvas.style.border = "1px solid"; 

    var ctx = canvas.getContext('2d'); 

    var body = document.getElementsByTagName("body")[0]; 
     body.appendChild(canvas); 

    ctx.fillRect(0,0,20,20); 

    for(i=0;i>20;i++){ 
     for(j=0;j>12;j++){ 
      if(level[i][j] = 9001){ 
      var x = 20*i; 
       y = 20*j; 
      ctx.fillRect(x,y,20,20); 
      } 
     } 
    } 

} 

Answer 1

你有一对夫妇与循环的问题。

请尝试以下

for(i=0;i<21;i++){ 
    for(j=0;j<13;j++){ 
     if(level[j][i] == 9001){ 
     var x = 20*i; 
     var y = 20*j; 
     ctx.fillRect(x,y,20,20); 
     } 
    } 
} 

首先，指数是基于所以你需要他们去高达13/21超过遍历所有的元素0。

其次，否则应该有==比较，这只是分配。

最后，在给定数组初始化的情况下，第一个索引是宽度，所以检查需要写入level[j][i]或重新声明的数组。

小提琴 - http://jsfiddle.net/Lpa92b10/

Answer 2

的问题是在你的for循环：

for(i=0;i>20;i++){ 
    for(j=0;j>12;j++){ 
    } 
} 

你是说从0开始，并遍历计数，直到我是大于20，但这绝不会是这样，因为你设置我（和j）为0，所以它立即跳出循环。

这应该工作：

for(i=0;i<20;i++){ 
    for(j=0;j<12;j++){ 
    } 
} 

Answer 3

约拿表明你的循环条件是不正确，但你也有一些其他的问题。你如果语句不正确“=”而不是“==”和你的循环是向下第一个循环应该是12和第二应该是20.这是它应该如何看：

var W = 9001; 
 
var A = 9000; 
 
var SIZE = 20; 
 

 
var level = [ 
 
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W], //21*13 Grid 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], // 
 
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], 
 
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W] // Comments for easy counting 
 
]; 
 

 
function drawLevel(){ 
 

 
    var canvas = document.createElement('canvas'); 
 
     canvas.id = "WormGame"; 
 
     canvas.width = SIZE * level[0].length; 
 
     canvas.height =SIZE * level.length; 
 
     canvas.style.border = "1px solid"; 
 

 
    var ctx = canvas.getContext('2d'); 
 

 
    document.body.appendChild(canvas); 
 

 
    ctx.fillRect(0,0,SIZE,SIZE); 
 

 
    for(var i = 0; i < level.length; i++){ 
 
     for(var j = 0; j < level[i].length; j++){ 
 
      if(level[i][j] == W){ 
 
       var x = SIZE*i; 
 
       var y = SIZE*j; 
 
       ctx.fillRect(y,x,SIZE, SIZE); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
drawLevel();