让画布图像在循环中向上移动

问：

我正在制作一个图像匹配游戏，目前我的屏幕上有一个固定图像（需要匹配的图像）和一个褪色的图像（需要向上移动以匹配设置图像的图像）。现在，我被困在实际需要向上移动的图像以匹配设置的图像上。（基本上想想 Dance Dance Revolution）。一旦淡入淡出和向上移动的图像到达顶部的设置图像，我希望能够按箭头键以便能够将移动图像与设置图像匹配。

“到目前为止，我有一个画布和一个超时附加到画布上，以调整运动图像褪色的速度。

到目前为止的代码示例：

索引.html

<div>
  <img src="images/birdShadow.png" alt="shadow bird">
</div>

#canvas
<canvas id="bird" width="100" height="100"></canvas>
<script>
  var canvas = document.getElementById('birds');
  var context = canvas.getContext('2d');
  var x = 50;
  var y = 30;
  var width = 100;
  var height = 100;
  var newBirds = new Image();

  //bird
  newBirds.onload = function(){
     context.drawImage(newBirds, x, y, width, height);
     context.clearBird(0, 0, canvas.width);
  };
  newBirds.src = 'images/yellowBird.png';
</script>

birdFlys.js

function loadHTML(){
   fetch('index.html')
}

function changeBirds(){
   var canvas = document.getElementById("birds");
   canvas.src = birds[x];
   x++;
   if(x>=birds.length){
       x=0;
   }
   fadeCanvas(canvas, 100, true);
     setTimeout("changeBirds()", 3000);
}

function fadeCanvas(i, e, fade) {
    if(fade === true ) {
        e--;
    } else {
        e++;
    }
    if(e > 0 && e <100) {
        i.style.opacity = e / 100;
        setTimeout(function() { fadeCanvas(i, e, fade); }, 10);
    }
}

//the rate at which the birds fade 
var birds = [], x = 0;
setTimeout("changeBirds()", 3000);
`

`