Question

我正在开发一个基本的HTML / Javascript游戏，其中一个实体（即僵尸）试图捕获另一个实体（即大脑）。僵尸通过使用键盘进行操作，大脑在DOM中呈现。

我的目标是当僵尸div触及大脑div时，分数增加+1。

注意注释掉的功能＆＃34;碰撞（$ zombie，$ brain）＆＃34;是我试过的替代方法，但没有用。另请注意，运行代码段时，dom为空，因为我无法包含图像文件夹。 Images used

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

如果只需检查矩形区域交叉，getBoundingClientRect DOM方法就可以了：

Dim strBody As String = "'Andy,'" & " + CHAR(13)+CHAR(10) + "

对于更精细的命中测试不规则形状，您需要更专业的逻辑。

Answer 2

试试这个。

#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>

out_list4 = list()

如何检测一个<div>是否触及另一个<div>？

2 个答案: