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

-1

在这个游戏中，即时消息创建我想让它使得当松鼠踩在食物上，食物消失并奖励10分。为了实现这个目标，我需要做些什么？谢谢你的帮助。javascript简单的游戏，使物体消失，并在与另一个物体碰撞时奖励得分

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

来源

2016-12-29 Northwood

所以有什么问题吗？你面对什么问题？ – JohnnyAW

注：这是伪代码，只给你一个想法，怎么办it.You不得不修正错误，并执行功能...

你需要遍历所有对象（松鼠+食物1，松鼠+食物2 ...）：

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

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

来源

2016-12-29 16:51:19

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

回答

相关问题