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)

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