JavaScript 碰撞检测

Question

您好，我是这个论坛的新手，也是 JavaScript 编程的新手，我想知道为什么我的碰撞检测不起作用。我不想使用任何像 JQuery 这样的库，我只是希望它能够与纯 JavaScript 一起使用。感谢您的帮助，这是代码

var can = document.getElementById("mainCanvas");
var ctx = can.getContext("2d");
var player1 = {x:"20", y:"20", w:"20", h:"20"};
var enemy1 = {x:"50", y:"50", w:"20", h:"20"};
ctx.fillRect(player1.x,player1.y,player1.w,player1.h);
ctx.fillRect(enemy1.x,enemy1.y,enemy1.w,enemy1.h);
//right arrow moves block right
window.addEventListener("keydown",function(e){
if(e.keyCode==39){
     ctx.clearRect(player1.x,player1.y,player1.w,player1.h);
     player1.x++;
     ctx.fillRect(player1.x,player1.y,player1.w,player1.h);
}});
//left arrow moves block left
window.addEventListener("keydown",function(e){
if(e.keyCode==37){
     ctx.clearRect(player1.x,player1.y,player1.w,player1.h);
     player1.x--;
     ctx.fillRect(player1.x,player1.y,player1.w,player1.h);
}});
//up arrow makes block up
window.addEventListener("keydown",function(e){
if(e.keyCode==38){
     ctx.clearRect(player1.x,player1.y,player1.w,player1.h);
     player1.y--;
     ctx.fillRect(player1.x,player1.y,player1.w,player1.h);
}});
//down arrow makes block go down
window.addEventListener("keydown",function(e){
if(e.keyCode==40){
     ctx.clearRect(player1.x,player1.y,player1.w,player1.h);
     player1.y++;
     ctx.fillRect(player1.x,player1.y,player1.w,player1.h);
}});

if(player1.x == enemy1.x && player1.y == enemy1.y){
alert("touch");
}

Answer 1

我同意 Micah 的观点，你可能应该使用现有的物理引擎。

但是，您的碰撞检测代码不起作用的原因是它没有考虑敌人和玩家的宽度和高度。目前，只有当玩家和敌人完全重叠时才会触发(例如，双方左上角的像素接触)。

你需要什么而不是if (player1.x == enemy1.x && player1.y == enemy1.y)类似于: if (player1.x + player1.w > enemy1.x && player1.x < enemy1.x + enemy1.w && player1.y + player1.h > enemy1.y && player1.y < enemy1.y + enemy1.h)

它检查玩家和敌人是否在任何一侧重叠。