javascript 简单的游戏，使物体消失并在与另一个物体碰撞时奖励分数

Question

在我创建的这个游戏中，我想做的是当松鼠踩到食物时，食物消失并奖励 10 分。我需要做什么才能使其正常工作？感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<title>Squirrel Game</title> 
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<script> function myFunction() {
alert("GAME OVER");
}
</script>

</head>

<body>
<div class="container"> </div>
<div class="bild"></div>
<img src="http://www.clipartlord.com/wp-  
content/uploads/2014/10/squirrel4.png" id="squirrel">

<div class="food food1"></div>
 <div class="food food2"></div>
 <div class="food food3"></div>
 <div class="food food4"></div>
 <div class="food food5"></div>
 <div class="food food6"></div>
 <div class="food food7"></div>
 <div class="food food8"></div>
 <div class="food food9"></div>
 <div class="food food10"></div>
 <div class="food food11"></div>
 <div class="food food12"></div>
 <div class="food food13"></div>
 <div class="food food14"></div>
 <div class="food food15"></div>
 <div class="food food16"></div>
 <div class="food food17"></div>
 <div class="food food18"></div>
 <div class="food food19"></div>
 <div class="food food20"></div>
 <div class="food food21"></div>
 <div class="food food22"></div>
 <div class="food food23"></div>
 <div class="food food24"></div>
 <div class="food food25"></div>
 <div class="food food26"></div>
 <div class="food food27"></div>
 <div class="food food28"></div> 
 <div class="food food29"></div>
 <div class="food food30"></div>
 <div class="food food31"></div>
 <div class="food food32"></div>
 <div class="food food33"></div>
 <div class="food food34"></div>
 <div class="food food35"></div>

<button id="timer" onclick="myVar = setTimeout(myFunction, 30000)"> Start         
game</button>

 </body>   
 </html>

game.js

  $(document).ready(function(){
  console.log('jQuery works');

 var squirrel = {};

 squirrel.x = 670;
 squirrel.y = -390;

 $(document).on('keydown', handletyping);

 function handletyping(event) {
   switch(event.which) {
       case 39:
           $('#squirrel').css({
              'left':  (squirrel.x += 10) + 'px'
           });
           break;

       case 40:
           $('#squirrel').css({
             'top': (squirrel.y += 10) + 'px'
            });
           break;

           case 37:
           $('#squirrel').css({
             'left': (squirrel.x -= 10) + 'px'
            });
           break;

               case 38:
           $('#squirrel').css({
             'top': (squirrel.y -= 10) + 'px'
            });
           break;

  }
 }
})

style.css

.bild{
background-color: green;
border: 2px solid black;
height: 400px;
width: 600px;
margin: 0 auto; 
border-radius: 50px;
overflow: hidden;
}
#squirrel{
width:35px;
height: 30px;
position: relative;
left: 670px;
top: -390px;

}
.food{
background-color: saddlebrown;
border-width: 3px;
border-color: black;
width: 10px; height: 10px;
position: absolute;
left: 670px;
top: 35px;
}
.food1 {
margin-left: 100px;
}
.food2 {
margin-left: 165px;
}
.food3 {
margin-left: 225px;
}
.food4 {
margin-left: 285px;
}
.food5 {
margin-left: 345px;
}
.food6 {
margin-left: 405px;
}
.food7 {
margin-left: 465px;

}
.food8 {
margin-left: 100px;
top: 100px;
}
.food9 {
margin-left: 165px;
top: 100px;
}
.food10 {
margin-left: 225px;
top: 100px;
}
.food11 {
margin-left: 285px;
top: 100px;
}
.food12 {
margin-left: 345px;
top: 100px;
}
.food13 {
margin-left: 405px;
top: 100px;
}
.food14 {
margin-left: 465px;
top: 100px;

}.food15 {
margin-left: 100px;
top: 175px;
}
.food16 {
margin-left: 165px;
top: 175px;
}
.food17 {
margin-left: 225px;
top: 175px;
}

.food18 {
margin-left: 285px;
top: 175px;
}

.food19 {
margin-left: 345px;
top: 175px;
}

.food20 {
margin-left: 405px;
top: 175px;
}

.food21 {
margin-left: 465px;
top: 175px;
}
.food22 {
margin-left: 100px;
top: 250px;
}
.food23 {
margin-left: 165px;
top: 250px;
}
.food24 {
margin-left: 225px;
top: 250px;
}
.food25 {
margin-left: 285px;
top: 250px;
}
.food26 {
margin-left: 345px;
top: 250px;
}
.food27 {
margin-left: 405px;
top: 250px;
}
.food28 {
margin-left: 465px;
top: 250px;

}.food29 {
margin-left: 100px;
top: 325px;
}
.food30 {
margin-left: 165px;
 top: 325px;
}
.food31 {
margin-left: 225px;
 top: 325px;
}
.food32 {
margin-left: 285px;
 top: 325px;
}
.food33 {
margin-left: 345px;
 top: 325px;
}
.food34 {
margin-left: 405px;
 top: 325px;
}
.food35 {
margin-left: 465px;
  top: 325px;
}
#timer{
position: absolute;
left: 500px;
top: 200px;
}

Answer 1

注意：这是伪代码，只是为了让您了解如何做it.You必须修复错误并实现功能...

您需要遍历所有对象对（squirrel + food1、squirrel + food2 ...）：

var foods=document.getElementsByClassName("food");
var squirrel=document.getElementById("squirrel");
for(var index=0;index<foods.length;index++){
    var food=foods[index];
    if(squirrel.x>=food.x && squirrel.x-squirrel.width<=food.x+food.width){
       //same for y-axis, x doesnt exist, calculate it on your own
     if(samefory){
        removefood();counter+=10;
     }
   }

你需要检查松鼠每次移动...

javascript 简单的游戏，使物体消失并在与另一个物体碰撞时奖励分数

javascript simple game, making objects dissappear and award score upon impact with another object

javascript

collision