Javascript

Question

我正在制作一款涉及使用箭头键移动玩家的游戏。玩家将与游戏中的其他物体发生碰撞。我已经完成了玩家右侧与物体左侧的碰撞以及玩家左侧与物体右侧的碰撞，但我无法弄清楚如何进行玩家底部与物体顶部的碰撞。我不知道为什么我的从下到上碰撞的代码不起作用，我在互联网上搜索了很多次都无济于事。非常感谢您的帮助。

这是我的所有代码，所以没有混淆：

编辑： 我的代码现已全部修复。它包括所有方面的碰撞。

var player = document.getElementById("player");
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
var player = document.getElementById("player");
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * 250/* window.innerHeight */) + 15 + "px";
object[i].style.left = Math.floor(Math.random() * 250/* window.innerWidth */) + 15 + "px";
}
setInterval(collisionDetection,1);
function collisionDetection() {
for (i = 0; i < object.length; i++) { 
// Player Right to Object Left
if (player.offsetLeft + player.offsetWidth <= object[i].offsetLeft + 1 &&
    player.offsetLeft + player.offsetWidth >= object[i].offsetLeft &&
    player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
    player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft - player.offsetWidth + "px";   
}
// Player Left to Object Right
if (player.offsetLeft >= object[i].offsetLeft + object[i].offsetWidth - 1 &&
    player.offsetLeft <= object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
    player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft + object[i].offsetWidth + "px";   
}
// Player Bottom to Object Top
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
    player.offsetTop + player.offsetHeight >= object[i].offsetTop &&
    player.offsetTop + player.offsetHeight <= object[i].offsetTop + 1) {
player.style.top = object[i].offsetTop - player.offsetHeight + "px";   
}
// Player Top to Object Bottom
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
    player.offsetTop <= object[i].offsetTop + object[i].offsetHeight &&
    player.offsetTop >= object[i].offsetTop + object[i].offsetHeight - 1) {
player.style.top = object[i].offsetTop + object[i].offsetHeight + "px";   
}
}
}
function move(event) {
var key = event.keyCode;
if (key == 40) {
player.style.top = player.offsetTop + 1 + "px";
}
if (key == 39) {
player.style.left = player.offsetLeft + 1 + "px";
}
if (key == 38) {
player.style.top = player.offsetTop - 1 + "px";
}
if (key == 37) {
player.style.left = player.offsetLeft - 1 + "px";
}
}

html, body {
height: 100%;
width: 100%;
margin: 0;
}
#player {
background: #000;
position: fixed;
height: 10px;
width: 10px;
left: 0px;
top: 0px;
}
#powerup {
background: blue;
position: fixed;
height: 10px;
width: 10px;
}

<body onkeydown="move(event)">
  <div id="player"></div>
  <div class="object" id="powerup"></div>
  <div class="object" id="powerup"></div>
</body>

Answer 1

在左右碰撞中，您使用 player.offsetWidth 计算新位置。但是，在顶部碰撞中，您使用的是 player.Height 不存在 ，而不是使用 player.offsetHeight

比较

player.style.left = object[i].offsetLeft - player.offsetWidth + "px";

和

player.style.top = object[i].offsetTop - player.Height + "px";

Javascript - 游戏侧面碰撞（从下到上）

Javascript - Game Side Collision (Bottom to Top)

html

css

collision-detection

game-physics