JavaScript: обнаружение столкновений не работает

Я делаю игру с JavaScript, где есть пуля, идущая к вам, и вам нужно перепрыгнуть через нее.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>

У меня все работает, кроме обнаружения столкновений. Если кто-нибудь может увидеть, где я ошибаюсь и исправляю это, это будет большой помощью.

источник

2015-12-29 FinW

Несколько вопросов:

setInterval(collide(), 500);

Это вызывает collide, и пытается использовать возвращаемое значение в качестве аргумента setInterval.

Вы хотите вместо этого:

setInterval(collide, 500);

Это фактически говорит setInterval для вызова collide.

Другой вопрос, что прямоугольник, возвращаемый getBoundingClientRect не x или y свойств, но top, right, bottomleft и, таким образом Вы должны будете использовать это условие:

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

источник

2015-12-29 13:12:48 jcaron

JavaScript: обнаружение столкновений не работает

ответ

Смежные вопросы