Question

我在画布上制作蠕虫游戏，但我无法通过我的代码绘制出来的线条。我使用少量for循环来检查来自该2D数组的每个变量。这就是我现在所拥有的。 W是代码＆＃34;应该＆＃34;在画布边缘画出框。 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循环中：

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

你说从0开始计数并循环直到i大于20但是情况永远不会是这样，因为你将i（和j）设置为0所以它会立即跳出循环。< / p>

这应该有效：

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

Answer 2

由于Jonas表示你对循环的条件不正确，但你还有其他一些问题。如果陈述不正确，你就是＆＃39; =＆＃39;而不是＆＃39; ==＆＃39;并且你的循环是向后的第一个循环应该是12，第二个循环应该是20.这是它应该看起来的样子：

＆＃13;

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

＆＃13;

Answer 3

循环中存在一些问题。

尝试以下

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

首先，索引是基于0的，所以你需要它们达到13/21来迭代所有元素。

其次，if应该==进行比较，否则只是分配。

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

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

Javascript蠕虫游戏画布问题

3 个答案: