JAVASCRIPT 2D Platformer对象不会出现在屏幕上

Question

我用javascript编写了大约3个月的编码，我决定开始为我的Advanced Higher项目开发2D平台游戏。我在网上找到了一个非常有用的教程，它显示了创建过程的每一步，甚至还提供了源代码。问题是每当我运行源代码时，游戏都无法正常加载。在这个阶段，我面临一个完全空白的画面，但是一个大小的画布。我解构了教程并一步一步地遵循它但仍然没有。有人有想法吗？

我道歉，如果不是很多，但我知道问题很可能在于更新功能

我使用Sublime Text 2 For Mac

对此进行了编码

function update()   {
  // controls
    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 < boxes.length; i++) {
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);

    var dir = colCheck(player, boxes[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 *= 0;
    }

}

 if(player.grounded) {
    player.velY = 0;


player.x += player.velX;
player.y += player.VelY;

ctx.fill();
ctx.fillStyle = "red";
ctx.fillRect(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;

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