JavaScript中的奇数数组行为

Question

我正在尝试使用JavaScript在画布上绘制盒子。 我的代码可以用，但是我在数组上遇到了麻烦。 假设我有一个称为map的多维数组，它的声明如下：

var map = [ [0,1,1], [0,0,1], [0,1,1], ];

其中1是一个框， 0是空白，但是当我运行代码时，输​​出如下所示：

0,0,0 1,0,1 1,1,1

有什么办法可以解决这个问题，以便输出匹配map ？ 我的代码如下所示：

var canvas = null;
var ctx = null;
var x,y,count,inc,ax,ay;


var map = [
    [0,0,0],
    [1,0,1],
    [1,1,1],
];

window.onload = function () {
    canvas = document.getElementById("gameArea");
    ctx = canvas.getContext("2d");
    y=0;
    x=0;
    ax=0;
    ay=0;
    count=0;
    inc=0;

    for(;count<3;count++){
        if(count>0){
            inc = inc + 40;
            console.log("inc:"+inc);
            console.log();
        }

        ay=count;
        console.log("ay:"+ay);
        console.log();

        y = y + inc;
        console.log("y:"+y);
        console.log();

        for(;ax<3;x=x+40,ax++){
            if(map[ax][ay]==1){
                console.log(ax+","+ay)
                console.log(map[ax][ay]);
                console.log();
                ctx.strokeRect(x,y,40,40);
                console.log("block:"+x+","+y);
            }
        }
        console.log();
        x=0;
        y=0;
        ax=0;
    }
};

HTML如下：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Single Stage</title>
        <script src="js/game.js" type="text/javascript">
        </script>

        <style type="text/css">
        #gameArea{
            display:block; 
            margin:0 auto; 
            background-color:#FFFFFF;
            border: 1px solid black;
        }
        </style>
    </head>

    <body>
        <canvas id="gameArea"  width='800' height='480'></canvas>
    </body>
</html>

Answer 1

您刚刚混合了行和列

尝试将map[ax][ay]==1切换为map[ay][ax]==1