オブジェクトを座標に移動するJavaScriptゲーム

Question

JavaScriptでスネークを5秒以内に食べていないと、リンゴは新たに生成された座標に返されます。私の質問は、リンゴをアニメーション化して新しい座標に視覚的に移動する方法です。アップルはキャンバス上を新しい場所に移動する必要があります。moveToなどを試しましたが、解決策を見つけることができません。 。前もって感謝します。

は、ここに私のコードです：

window.onload = function() { 
canv = document.getElementById("gc"); 
ctx = canv.getContext("2d"); 
document.addEventListener("keydown", keyPush); 
setInterval(game, 1000/15); 
} 
px = py = 10; 
gs = tc = 20; 
ax = ay = 15; 
xv = yv = 0; 
trail = []; 
tail = 5; 

var fps = 15; 
var maxAppleAgeSeconds = 5; 
var appleAge = 0; 
var maxAppleAgeFrames = fps * maxAppleAgeSeconds; 


function game() { 
px += xv; 
py += yv; 
if (px < 0) { 
px = tc - 1; 
} 
if (px > tc - 1) { 
px = 0; 
} 
if (py < 0) { 
py = tc - 1; 
} 
if (py > tc - 1) { 
py = 0; 
} 
ctx.fillStyle = "black"; 
ctx.fillRect(0, 0, canv.width, canv.height); 

ctx.fillStyle = "lime"; 
for (var i = 0; i < trail.length; i++) { 
ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2); 
if (trail[i].x == px && trail[i].y == py) { 
    tail = 5; 
} 
} 
trail.push({ 
x: px, 
y: py 
}); 
while (trail.length > tail) { 
trail.shift(); 
} 

appleAge++; 

if (ax == px && ay == py) { 
tail++; 
ax = Math.floor(Math.random() * tc); 
ay = Math.floor(Math.random() * tc); 
appleAge = 0; 
} else if (appleAge > maxAppleAgeFrames) { 
ax = Math.floor(Math.random() * tc); 
ay = Math.floor(Math.random() * tc); 
appleAge = 0; 
} 


ctx.fillStyle = "red"; 
ctx.fillRect(ax * gs, ay * gs, gs - 2, gs - 2); 
} 

function keyPush(evt) { 
switch (evt.keyCode) { 
case 37: 
    xv = -1; 
    yv = 0; 
    break; 
case 38: 
    xv = 0; 
    yv = -1; 
    break; 
case 39: 
    xv = 1; 
    yv = 0; 
    break; 
case 40: 
    xv = 0; 
    yv = 1; 
    break; 
    } 
} 

Answer 1

使用requestAnimationFrameの（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）とリンゴは（AX0、AY0）及び（AX1、AY1）の間でなければなりませんすべての位置を計算します。ステップサイズで周りを回って、フレームごとに各方向にどれだけ遠くに移動させたいかを把握することができます。

} else if (appleAge > maxAppleAgeFrames) { 
ax1 = Math.floor(Math.random() * tc); 
ay1 = Math.floor(Math.random() * tc); 
appleAge = 0; 
animate(); 
} 

function animate(){ 
if(ax !== ax1 || ay !== ay1){ 
    ax += 1 // actually calculate this value, not necessarily 1 
    ay += 1 // this too 
    window.requestAnimationFrame(animate) 
} 
}