JavaScript:冲突检测不起作用_Javascript_Collision Detection

JavaScript:冲突检测不起作用

javascript

JavaScript:冲突检测不起作用,javascript,collision-detection,Javascript,Collision Detection,我正在用JavaScript制作一个游戏，其中有一颗子弹朝你飞来，你需要跳过它这是我的密码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Over The Top Game</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.co

我正在用JavaScript制作一个游戏，其中有一颗子弹朝你飞来，你需要跳过它

这是我的密码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Over The Top Game</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#bullet {
    -webkit-animation-name: move; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: move;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes move {
    from {right: 0px;}
    to {right: 100%;}
}

/* Standard syntax */
@keyframes move {
    from {right: 0px;}
    to {right: 100%;}
}
</style>
</head>
<body style="margin: 0px;">
<img id="bullet" src="bullet.png" style="position:absolute; bottom: 100px; right: 0px;" />
<img id="man" src="stickman.png" style="position:absolute; bottom:50px; left: 100px;" />
<div style="background-color: #654321; width: 100%; height: 50px; position:absolute; bottom:0px;"></div>
<script>
var image = document.getElementById("man");
document.body.onkeydown = function(e){
   if(e.keyCode == 32){
var x = 0;
var interval = setInterval(function() {
x++;
image.style.bottom = 50+(-0.1 * x * (x - 75)) + 'px';
if(x >= 75) clearInterval(interval);
}, 20);
}
}
//not working
function collide () {
var box1 = document.getElementById("man");
var box2 = document.getElementById("bullet");
var rect1 = box1.getBoundingClientRect();
var rect2 = box2.getBoundingClientRect();
if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
   alert("You lose. Click OK to restart");
   location.reload;
}
}
setInterval(collide(), 500);
</script>
</body>
</html>


过火的游戏
#子弹头{
-webkit动画名称：move；/*Chrome、Safari、Opera*/
-webkit动画持续时间：3s；/*Chrome、Safari、Opera*/
动画名称：移动；
动画持续时间：3s；
动画计时功能：线性；
动画迭代次数：无限；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧移动{
从{右：0px；}
到{右：100%；}
}
/*标准语法*/
@关键帧移动{
从{右：0px；}
到{右：100%；}
}
var image=document.getElementById（“man”）；
document.body.onkeydown=函数（e）{
如果（e.keyCode==32）{
var x=0；
var interval=setInterval（函数（）{
x++；
image.style.bottom=50+（-0.1*x*（x-75））+'px'；
如果（x>=75）清除间隔（间隔）；
}, 20);
}
}
//不起作用
函数冲突（）{
var box1=document.getElementById（“man”）；
var box2=document.getElementById（“项目符号”）；
var rect1=box1.getBoundingClientRect（）；
var rect2=box2.getBoundingClientRect（）；
if（rect1.xrect2.x&&
rect1.yrect2.y）{
警报（“您丢失。单击“确定”重新启动”）；
位置。重新加载；
}
}
setInterval（collide（），500）；

除了碰撞检测外，我的一切都正常。如果有人能看到我的错误并加以纠正，那将是一个很大的帮助。

几个问题：

setInterval(collide(), 500);

这将调用

collide

，并尝试使用其返回值作为

setInterval

的参数

您希望这样做：

setInterval(collide, 500);

这实际上告诉setInterval调用

collide

另一个问题是，

getBoundingClientRect

返回的矩形没有

或

属性，而是

top

、

right

、

bottom

和

left

，因此必须使用以下条件：

if (rect1.left < rect2.right &&
   rect1.right > rect2.left &&
   rect1.top < rect2.bottom &&
   rect1.bottom > rect2.top) {

if（rect1.leftrect2.left&&
rect1.toprect2.top）{