ループが一番下に来たらループを一時停止する方法は？ Window.requestanimationframe - Javascript/html5 canvas

Question

実行したい場合はここに私の完全なコードがあります。

window.onload = function(){ 
    var canvas = document.getElementById('mycanvas'); 
    var ctx = canvas.getContext('2d'); 
    var warrior = document.getElementById('warrior'); 
    var enemyxpos = 100; 
    var enemyypos = 75; 
    canvas.width = window.screen.width; 
    canvas.height = window.screen.height; 
    var image = new Image(); 
    image.src = "sprite_guy_warrior-1.png"; 

    window.requestAnimationFrame(function loop(){ 
      enemyypos +=1; 
      ctx.clearRect(enemyxpos,enemyypos,90,90); 
      ctx.drawImage(image,enemyxpos,enemyypos,90,90); 
     window.requestAnimationFrame(loop); 
     }); 
}; 

私はそれがキャンバスの下になったときに「イメージ」を停止したい： https://repl.it/FEl8/0 はここだけではJavaScriptです。誰も私にそれをする方法を教えてもらえますか？

Answer 1

height of the canvasを取得し、yの値を確認してください。

window.onload = function(){ 
    var canvas = document.getElementById('mycanvas'); 
    var cheight=canvas.height; 
    var ctx = canvas.getContext('2d'); 
    var warrior = document.getElementById('warrior'); 
    var enemyxpos = 100; 
    var enemyypos = 75; 
    var flag=90;//height of the image 
    canvas.width = window.screen.width; 
    canvas.height = window.screen.height; 
    var image = new Image(); 
    image.src = "http://cliparts.co/cliparts/nrc/L6p/nrcL6pi84.png"; 
    window.requestAnimationFrame(function loop(){ 
      enemyypos +=1; 
      ctx.clearRect(enemyxpos,enemyypos,90,90); 
      ctx.drawImage(image,enemyxpos,enemyypos,90,90); 
      if(cheight+flag >= enemyypos){ //here........... 
      window.requestAnimationFrame(loop); 
      }else{ 
       ctx.clearRect(0, 0, canvas.width, canvas.height);//clear the canvas ans start again. 
      enemyypos = 75; 
      window.requestAnimationFrame(loop); } 
     }); 

}; 

DEOM HERE

Answer 2

単にあなたのループの中で、この条件を使用します。ここでは

if (enemyypos <= canvas.height - 90){ 
    window.requestAnimationFrame(loop); 
} 

はrepl