как создать анимацию на javascript?

14 июня 2021, 14:20

на днях смотрел как создать игру на джаваскрипт так скажем практиковался и тут проблема нужно создать анимацию что бы картинка менялась на другую объясню все точно.Я добавил канвас елемент

var cvs = document.getElementById("canvas");

потом начал создавать и добавлять картинки

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeUp = new Image();
var pipeBottom = new Image();

bg.src = "img/bg.png";
bird.src = "img/bird.png";
fg.src = "img/fg.png";
pipeUp.src = "img/pipeUp.png";
pipeBottom.src = "img/pipeBottom.png";

начал их рисовать

 function draw() {

ctx.drawImage(bg, 0, 0);
     ctx.drawImage(fg, 0, cvs.height - fg.height);
     ctx.drawImage(bird, 10, 100);
    requestAnimationFrame(draw);
    }
    bird.onload = draw;

скажите как сделать так что бы картинка менялась после нажатия на определёную клавишу прошу с объяснением .

Answer 1

Допустим, переключать нужно будет клавишей с кодом 39: (стрелка вправо)

<img id=myimage src="img/bird.png" /> 
<script> 
var images = ["bird", "bg", "fg", "pipeup", "pipeBottom"]; 
var index = 0; 
document.onkeydown = function(e){ 
if(e.keyCode == 39){ 
	index ++; 
	if(index >= images.length) index = 0; 
	document.getElementById("myimage").src = "img/" + images[index] + ".png"; 
} 
} 
</script>

Правда, тоже без canvas.