画布碰撞检测

Question

正如你所看到的，我在中间部分做过一些碰撞...... 这不是控制台日志！HIT！所以它不起作用。我希望那些盒子与玩家发生冲突。我已经阅读过帮助，到处尝试过他们的代码并没有成功。如果你可以解决它，并可能用你的名字/昵称评论你做的部分;由于此代码适用于我的开源游戏。每个人都可以编辑它和东西。游戏目前有一个跳跃和飞行的盒子。而且，如果你能做到这一点，那么当你在场时，玩家可以留下并站在盒子上：D ..为你做的

if(whateverthenameofyourcollisiondertectionthenis){
 player.jumping = false,
 player.VelY = 0
}

或类似的东西我认为...... 我几天前开始使用javascript，所以我不太了解它......

所以我的代码是这样的：

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 1600,
    height = 900,
    player = {
      x : width/2,
      y : height - 5,
      width : 5,
      height : 5,
      speed: 5,
      velX: 0,
      velY: 0,
      jumping: false,
      nofly: true,
      colission: false,
      left: false,
      right: false,

    },
    keys = [],
    friction = 0.8,
    gravity = 0.2;

    var boxes = []
 // dimensions
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});
boxes.push({
    x: Math.floor((Math.random() * 1400) + 1),
    y: Math.floor((Math.random() * 895) + 1),
    width: 200,
    height: 5,
});


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

function update(){
  // check keys
    if (keys[38] || keys[32] || keys[87]) {
        // up arrow or space or W
      if(!player.jumping){
      console.log("jump")
       player.jumping = true;
       player.velY = -player.speed*3;
       document.getElementById('Jump').play();
      }
    }
    if (keys[39] || keys[68]) {
        // right arrow or D
        if(!player.right){ player.left = false
        if (player.velX < player.speed) {                         
           player.velX++;
        console.log("Right")           
       }
       }
    }     
    if (keys[37] || keys[65]) {         
        // left arrow   
          if(!player.left){ player.right = false
          if (player.velX > -player.speed) {
           player.velX--;
           console.log("Left")
       }
       }
   }
    if (keys[40] || keys[83]) {
        // down arrow or S
        if(player.jumping){
           player.velY++;
           player.valX;
           console.log("Down!")
       }
   }
   if (keys[13]) {
        // Enter
        player.jumping = true
        if(player.nofly){
        console.log("Flap!")
        player.velY = -player.speed*1;
        document.getElementById('Flap').play();
        player.nofly = false;
        setTimeout(function(){player.nofly = true;},600);}
     }
    player.velX *= friction;

    player.velY += gravity;

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

    if (player.x >= width-player.width) {
    player.right = true
    console.log("Wall!")
        player.x = width-player.width;
    } else if (player.x <= 0) {         
        player.x = 0;
        console.log("Wall!")    
            player.left = true
    }    

    if(player.y >= height-player.height){
        player.y = height - player.height;
        player.jumping = false;
        console.log("Ground!")
    }

  ctx.clearRect(0,0,width,height);
  ctx.fillStyle = "white";
ctx.beginPath();

for (var i = 0; i < boxes.length; i++) {
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
}

ctx.fill();
  ctx.fillStyle = "GreenYellow";
  ctx.fillRect(player.x, player.y, player.width, player.height);

    //if(player.x = boxes[i].x - boxes[i].width &&
     //  player.y = boxes[i].y - boxes[i].height){player.velY = 0}

     if (boxes.push.x < player.x + player.width &&
        boxes.push.x + boxes.push.width > player.x &&
        boxes.push.y < player.y + player.height &&
        boxes.push.y + boxes.push.height > player.y)
            { player.colission = true; console.log("!HIT!")}

    else    { player.colission = false }

    if  (player.colission)  { player.velY = 0, console.log("Ohnoes we must stop")}


  requestAnimationFrame(update);
}


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();
});
function click(x,y){
    if(keys[38]){
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x,y);
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        x, y, player.x, player.y, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}
}