Javascript collsion检测

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)

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