Javascript平铺地图

Question

我试图为我的游戏制作一张瓷砖地图，所以我不必单独绘制每一块瓷砖（就像我为测试目的所做的那样）。我已经跟踪了几个小时我能找到的每个教程。有人告诉我我的代码有什么问题吗？为了清楚起见，我试图制作something like this.

如果有人可以提供帮助，那就太好了。继承我的代码：

＆＃13;

＆＃13;

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 500,
    height = 500,
    player = {
        x: width / 2,
        y: height /2,
        width: 48,
        height: 64,
        speed: 3,
        velX: 0,
        velY: 0,
        jumping: false,
        grounded: false
    },
    keys = [],
    friction = 0.8,
    gravity = 0.3;
    playerimage = new Image();
    playerimage.src = "http://i.imgur.com/iAsPYrz.png";
    grassimage = new Image();
    grassimage.src = "http://i.imgur.com/2VQp0FO.png";

var grassblocks = [];

// dimensions
grassblocks.push({
    x: 0,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32,
    y: height - 32,
    width: 32,
    height: 32
});

grassblocks.push({
    x:32*2,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*2,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*3,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*4,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*5,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*6,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*7,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*8,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*9,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*10,
    y: height - 32,
    width: 32,
    height: 32
});
grassblocks.push({
    x: 32*11,
    y: height - 32,
    width: 32,
    height: 32
});

canvas.width = width;
canvas.height = height;

function update() {
    // check keys
    if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping && player.grounded) {
            player.jumping = true;
            player.grounded = false;
            player.velY = -player.speed * 2;
        }
    }
    if (keys[39]) {
        // right arrow
        if (player.velX < player.speed) {
            player.velX++;
        }
    }
    if (keys[37]) {
        // left arrow
        if (player.velX > -player.speed) {
            player.velX--;
        }
    }

    player.velX *= friction;
    player.velY += gravity;

    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "black";
    ctx.beginPath();
    
    player.grounded = false;
    for (var i = 0; i < grassblocks.length; i++) {
        ctx.drawImage(grassimage,grassblocks[i].x, grassblocks[i].y, grassblocks[i].width, grassblocks[i].height);
        
        var dir = colCheck(player, grassblocks[i]);

        if (dir === "l" || dir === "r") {
            player.velX = 0;
            player.jumping = false;
        } else if (dir === "b") {
            player.grounded = true;
            player.jumping = false;
        } else if (dir === "t") {
            player.velY *= -1;
        }

    }
    
    if(player.grounded){
         player.velY = 0;
    }
    
    player.x += player.velX;
    player.y += player.velY;

    ctx.fill();
    ctx.fillStyle = "green";
    //ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.drawImage(playerimage,player.x,player.y,player.width,player.height);

    requestAnimationFrame(update);
}

function colCheck(shapeA, shapeB) {
    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
        vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.width / 2) + (shapeB.width / 2),
        hHeights = (shapeA.height / 2) + (shapeB.height / 2),
        colDir = null;

    // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = hWidths - Math.abs(vX),
            oY = hHeights - Math.abs(vY);
        if (oX >= oY) {
            if (vY > 0) {
                colDir = "t";
                shapeA.y += oY;
            } else {
                colDir = "b";
                shapeA.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "l";
                shapeA.x += oX;
            } else {
                colDir = "r";
                shapeA.x -= oX;
            }
        }
    }
    return colDir;
}

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

var posX = 0;
var posY = 0;
   
    for (var i = 0; i < mapArray.length; i++) {
        for (var j = 0; j < mapArray[i].length; j++) {
            if (mapArray[i][j] == 0) {
                ctx.drawImage(grassimage,posX,posY,32,32);
            }
            if (mapArray[i][j] == 1) {
                ctx.drawImage(playerimage,posX,posY,32,32);
            }
            posX+=32;
        }
        posY+=32;
        posX = 0;
    }   




document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});


window.addEventListener("load", function () {
    update();
});

＆＃13;

<head>
    <title>Platformer Game</title>
</head>
<body>
  <h3>Arrow keys to move, and space or up arrow to jump</h3>
    <canvas id="canvas"></canvas>
    <style>
    canvas {
    border:1px solid #d3d3d3;
    background-color: rgb(205,255,255);
    }
    </style>
</body>

＆＃13;

＆＃13;

＆＃13;