Einfache Leinwandanimation: 50x50 Bild bewegt sich über

Question

Ich habe diese Art von Programmierung vor, aber es war eine lange Weile zurück, und trotz des Versuchs für eine Weile jetzt, ich bin nicht in der Lage, dies funktioniert. Ich habe viele andere ähnliche Codes ausprobiert, die ich im Internet gefunden habe, aber sie funktionieren nicht genau so, wie ich es möchte! Ich möchte grundsätzlich ein 155x55 Canvas, mit einem 50x50 Bild, das sich darüber bewegt, einfach! Trotz wie einfach es klingt ... Ich kämpfe ... Ich habe versucht, meinen vorherigen Code anzupassen, aber das war für springende Bälle und es war vor langer Zeit. Ich werde jede Hilfe zu schätzen wissen. Vielen Dank!

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); 

Fiddle-Link: https://jsfiddle.net/th6fcdr1/

Answer 1

Das Problem, das Sie haben, ist, dass Ihre Variable x und y immer 0 zurückgesetzt und 20. Ihre Geschwindigkeit ist 1, also ist Ihre x immer 1.

Da Sie nie die x Position aktualisieren und immer auf 0 zurücksetzen. Was Sie tun könnten, ist die variable Geschwindigkeit um 1 am Ende des Rahmens zu erhöhen.

speed += 1 

Zuerst musst du:

x = 0 + 1 

dann

x = 0 + 2 

... und so weiter.

Dann werden Sie für speed oberhalb 150 zu überprüfen und setzen speed auf 1

dann schlage ich speed durch posX Umbenennung, die genauer ist. Anstelle von setInterval sollten Sie auch requestAnimationFrame() verwenden. Und statt die posX um 1 zu erhöhen, sollten Sie die posX um erhöhen, um eine fließende Bewegung und stabile Geschwindigkeit zu erhalten, die nicht von der Framerate abhängt.

Am Ende würden Sie dieses:

posX += speed * elapsedTime 
var x = posX