dans ce jeu que je crée, je veux faire en sorte que lorsque l'écureuil marche sur la nourriture, la nourriture disparaît et attribue 10 points. Que dois-je faire pour que cela fonctionne? Merci pour toute aide.javascript jeu simple, faire disparaître les objets et attribuer des points lors de l'impact avec un autre objet
<!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;
}
alors quelle est la question? à quel problème faites-vous face? – JohnnyAW