シンプルなキャンバスのアニメーション：50x50の画像が移動する

Question

私はこの種のプログラミングを前にやったことがありますが、それは長い間しばらくしていましたが、しばらくは試してみましたが、私はこれを得ることができません。私はインターネット上で見つけた他の同様のコードを試してみましたが、私が望むように正確に動作しません！私は基本的に155x55のキャンバスを望んでおり、50x50のイメージがそれを横切ってシンプルに動きます。どのようにシンプルに聞こえても...私は苦労しています...私は以前のコードを適応しようとしましたが、それはボールをバウンスするためのものでした、そして、それはずっと前です。助けていただければ幸いです。ありがとう！

var myCanvas = document.getElementById("myCanvas"); 
var ctx = myCanvas.getContext("2d"); 

var speed = 1; 

a = new Image(); 
a.src = "http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif"; 

function frameRate(fps) { 
timer = window.setInterval(updateCanvas, 1000/fps); 
} 


function updateCanvas() { 
ctx.fillRect(0,0, myCanvas.width, myCanvas.height); 
draw(); 
} 

function draw() { 
/* Add code here to randomly add or subtract small values 
* from x and y, and then draw a circle centered on (x,y). 
*/ 

var x = 0 + speed; 
var y = 20; 

if (x > 150) { 
x == 1; 
} 

ctx.beginPath(); 
ctx.drawImage(a,x,y,100,100); 
} 

/* Begin animation */ 
frameRate(25); 

フィドルリンク： https://jsfiddle.net/th6fcdr1/

Answer 1

あなたが持っている問題は、あなたの変数xとyは常に0と20にリセットされていることです。あなたの速度は1なので、xは常に1です。

xの位置は決して更新されず、常に0にリセットされます。あなたができることはフレームの終わりに可変速度を1だけ増やすことです。まず

speed += 1 

は、あなたが持っているでしょう：

その後、

x = 0 + 2 

x = 0 + 1 

...というように。

次に、あなたは私がより正確であるposXでspeedの名前を変更することをお勧めspeedその後

1に150以上であることspeedをチェックしてリセットする必要があります。また、setIntervalの代わりにrequestAnimationFrame()を使用する必要があります。 posXを1だけインクリメントする代わりに、posXをspeed * elapsedTimeでインクリメントして、フレームレートに依存しない滑らかな動きと安定した速度の移動を実現する必要があります。

最後に

が、あなたはこれを持っていると思います：

posX += speed * elapsedTime 
var x = posX