Question

我制作的游戏涉及用箭头键移动玩家。玩家将与游戏中的其他对象发生碰撞。我已经完成了玩家对物体左碰撞的权利，并且玩家离开了对象的右碰撞，但我无法弄清楚玩家是如何做到这一点的。对象顶部碰撞的底部。我不知道为什么我的底部到顶部碰撞的代码不起作用，我多次搜索互联网无济于事。非常感谢您的帮助。

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

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

＆＃13;

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";
}
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

在左右碰撞中，您使用player.Height计算新位置。但是，在顶部碰撞中，您使用的是不存在的player.offsetHeight ，而不是使用player.style.left = object[i].offsetLeft - player.offsetWidth + "px";

比较

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

带

isFormValid = () => {
  const {fname, lname, email, password, confirmPassword} = this.state

  return fname && lname && email && password && confirmPassword
}

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

1 个答案: