javascript简单的游戏,使物体消失,并在与另一个物体碰撞时奖励得分
问题描述:
在这个游戏中,即时消息创建我想让它使得当松鼠踩在食物上,食物消失并奖励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;
}
答
注:这是伪代码,只给你一个想法,怎么办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;
}
}
您需要检查每次松鼠移动...
所以有什么问题吗?你面对什么问题? – JohnnyAW