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();