我正在开发一个基本的 HTML/Javascript 游戏，其中一个实体(即僵尸)试图捕获另一个实体(即大脑)。僵尸通过键盘操作，大脑在 DOM 中渲染。
我的目标是当僵尸 div 接触到大脑 div 时，分数增加 +1。
注意 注释掉的函数“collision($zombie, $brain)”是我尝试过的另一种方法，但它不起作用。另请注意，运行代码片段时，dom 是空白的，因为我无法包含图像文件夹。 Images used
function docReady(){
window.addEventListener('keydown', moveZombie);
window.addEventListener('keydown', collision);
/*eventListner can tell a key is pressed, and then call the function moveZombie*/
}
function moveZombie(evt) { /* create a function call it moveZombie*/
switch (evt.keyCode) { /*keyCode is used to identify which key is pressed*/
case 37:leftArrowPressed();
break; /* call the function leftArrowPressed()*/
case 39: rightArrowPressed();
break;
case 38: upArrowPressed();
break;
case 40: downArrowPressed();
break;
}
}
function leftArrowPressed(){ /*define a function and call it leftArrowPressed()*/
var leftZombie = document.getElementById('zombie');
leftZombie.style.left = parseInt(leftZombie.style.left) - 15 + 'px';
/*when left Arrow Pressed move the zombie 10 px to the left*/
}
function rightArrowPressed(){
var rightZombie = document.getElementById('zombie');
rightZombie.style.left= parseInt(rightZombie.style.left) + 15 + 'px';
}
function upArrowPressed(){
var upZombie = document.getElementById('zombie');
upZombie.style.top= parseInt(upZombie.style.top) - 20 +'px';
}
function downArrowPressed() {
var downZombie = document.getElementById('zombie');
downZombie.style.top = parseInt(downZombie.style.top) + 15 + 'px';
}
function collision(){
var zombie = document.getElementById('zombie');
var brain = document.getElementById('brain');
var zomLeft = zombie.x;
var zomRight = zombie.x + (zombie.width);
var zomTop = zombie.y;
var zomBottom = zombie.y + (zombie.height);
var brainLeft = brain.x;
var brainRight = brain.x + (brain.width);
var brainTop = brain.y;
var brainBottom = brain.y + (brain.height);
var crash = false;
if ((zomBottom > brainTop) || (zomTop < brainBottom) || (zomRight > brainLeft) || (zomLeft < brainRight)) {
crash = true;
}
return crash;
}
/*function collision($zombie, $brain) {
var x1 = $zombie.offset().left;
var y1 = $zombie.offset().top;
var h1 = $zombie.outerHeight(true);
var w1 = $zombie.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $brain.offset().left;
var y2 = $brain.offset().top;
var h2 = $brain.outerHeight(true);
var w2 = $brain.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
var crash = false;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) crash = true;
return crash;
} */
function scoreBoard(){
var score =0;
var scoreBoard = "Score: " + score;
if(collison==true){
score= score+1;
}
else
return scoreBoard;
}h1{
color:red;
font-style: italic;
}
/*Our png picture is 2000px * 312px, then each frame is 200px * 312px*/
#zombie {
/*Our png picture is 2000px * 312px, then each frame is 200px * 312px*/
width: 200px;
height: 312px;
background-image: url("../img/walkingdead.png");
animation: plays 1.8s steps(10) infinite;
position: relative;
margin:auto;
top:50%;
}
#brain{
width: 130px;
height: 130px;
background-image: url("../img/brain.png");
position: fixed;
margin: auto;
top: 50%;
}
#wrapper{
width: 600px;
height: 200px;
position: relative;
animation: move 4s infinite ;
}
#score{
color:red;
font-style: italic;
}
@keyframes plays {
from { background-position: 0px; }
to { background-position: -2000px; }
}<!DOCTYPE�html>
<head>
<title>Zombie</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<script src="game.js"></script>
<body onload="docReady()" background ="./img/graveyard.png">
<h1>Zombie Game</h1>
<div id="wrapper">
<div id ="zombie" style="position:absolute; left:800px; top:200px"></div>
</div>
<div id = "brain"> </div>
<div id="score" style= "position:fixed; left 1000px; top:100px" >
</div>
</body>
</html>最佳答案
试试这个。
var score = 0;
function checkCollision(elm1, elm2) {
var elm1Rect = elm1.getBoundingClientRect();
var elm2Rect = elm2.getBoundingClientRect();
return (elm1Rect.right >= elm2Rect.left &&
elm1Rect.left <= elm2Rect.right) &&
(elm1Rect.bottom >= elm2Rect.top &&
elm1Rect.top <= elm2Rect.bottom);
}
function moveZombie(evt) {
var key;
var zombie = document.getElementById('zombie');
var brain = document.getElementById('brain');
var scoreDiv = document.getElementById('score');
var x = parseInt(zombie.style.left);
var y = parseInt(zombie.style.top);
switch (evt.keyCode) {
case 37:
zombie.style.left = `${x+-15}px`;
break;
case 39:
zombie.style.left = `${x+15}px`;
break;
case 38:
zombie.style.top = `${y+-15}px`;
break;
case 40:
zombie.style.top = `${y+15}px`;
break;
}
setTimeout(function() {
if (checkCollision(brain, zombie)) {
scoreDiv.innerHTML = ++score;
}
}, 150);
}
window.addEventListener('keydown', moveZombie);#score {
position: fixed;
top: 0;
right: 0;
width: 80px;
height: 40px;
border-radius: 5px;
box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);
text-align: center;
color: green;
font-size: 1.3em;
line-height: 1.8;
}
#zombie {
position: absolute;
width: 100px;
height: 100px;
background: #fa0000;
color: white;
text-align: center;
font-size: 1.5em;
transition: all 0.1s ease-in-out;
}
#brain {
width: 100px;
height: 100px;
position: fixed;
left: 400px;
top: 100px;
background: #e5ac5e;
text-align: center;
font-size: 1.5em;
}
#buttons {
position: fixed;
bottom: 0;
}
#buttons>button {
width: 80px;
height: 30px;
}<div id="score"></div>
<div id="zombie" style="left:0; top:0">Zombie</div>
<div id="brain">brain</div>关于javascript - 如何检测一个 <div> 是否接触到另一个 <div>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46822870/