Bonjour, je suis en classe de terminale spécialité ISN et comme projet de bac j'ai choisi de faire un jeu. Ayant d'abord essayé Unity et ayant trouvé ça vraiment compliqué je me suis redirigé vers le HTML5 + Javascript
Je viens tout juste de m'y mettre et je butte déjà, j'essaye d'animer une image et ça ne veut pas marcher. J'y arrive avec un simple carré (et donc une image non importé).
Voici mon code :
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 800px;
height: 800px;
position: relative;
background: yellow;
}
#myAnimation {
background-image: url(http://www.flashflashrevolution.com/vbz/customavatars/avatar1172534_1.gif);
width: 190px;
height: 190px;
padding: 0;
}
</style>
<body>
<p>
<button onclick="myMove()">C'est parti !</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 700) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
}
}
}
</script>
</body>
</html>
Merci d'avance
Je viens tout juste de m'y mettre et je butte déjà, j'essaye d'animer une image et ça ne veut pas marcher. J'y arrive avec un simple carré (et donc une image non importé).
Voici mon code :
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 800px;
height: 800px;
position: relative;
background: yellow;
}
#myAnimation {
background-image: url(http://www.flashflashrevolution.com/vbz/customavatars/avatar1172534_1.gif);
width: 190px;
height: 190px;
padding: 0;
}
</style>
<body>
<p>
<button onclick="myMove()">C'est parti !</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 700) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
}
}
}
</script>
</body>
</html>
Merci d'avance