我正在尝试制作一个可以在网站上玩的非常简单的街机游戏。在游戏中,你扮演一个红色的立方体,试图抓住一个蓝色的立方体。我的问题是碰撞检测。它有时会起作用,但我能得到的最高分是 20,然后碰撞检测就停止了。它通常停在屏幕的左侧,这令人困惑。
我对 Javascript 还很陌生,所以如果你帮忙,它会很有帮助。
这是网站的链接:here
player = document.getElementById("player");
block = document.getElementById("block");
var score = 0;
var highscore = localStorage.getItem("highscore/catch", 0);
document.addEventListener("mousemove", function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
player.style.left = (mousePosition.x + offset[0]) + "px";
player.style.top = (mousePosition.y + offset[1]) + "px";
is_colliding();
}
}, true);
function moveBlock(){
block.style.position = 'absolute';
block.style.top = Math.floor(Math.random() * 90 + 5) + '%';
block.style.left = Math.floor(Math.random() * 90 + 5) + '%';
}
var is_colliding = function() {
var d1_height = player.offsetHeight;
var d1_width = player.offsetWidth;
var d1_distance_from_top = player.offsetTop + d1_height;
var d1_distance_from_left = player.offsetLeft + d1_width;
var d2_height = block.offsetHeight;
var d2_width = block.offsetWidth;
var d2_distance_from_top = block.offsetTop + d2_height;
var d2_distance_from_left = block.offsetLeft + d2_width;
var not_colliding =
d1_distance_from_top < block.offsetTop ||
player.offsetTop > d2_distance_from_top ||
d1_distance_from_left < block.offsetTop ||
player.offsetLeft > d2_distance_from_left
if (!not_colliding) {
console.log("collide");
moveBlock();
highScore();
score++;
}
return !not_colliding;
};
function highScore () {
if (highscore != null) {
if (score > highscore) {
localStorage.setItem("highscore/catch", score);
}
} else {
localStorage.setItem("highscore/catch", score);
}
}
CSS:
#block {
width: 50px;
height: 50px;
position: absolute;
left: 800px;
background: blue;
color: blue;
display: none;
}
#player {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
background: red;
color: blue;
}