JSのx、y座標に四角形を移動する方法

Question

「私の弾丸をx、y座標に移動する方法」を探していますが、ヘルプや有用なトピックは見つかりませんでした。

まあ、私のコードがある：もちろん

GoToMouse() 
{ 
    this.goX = mouse.x; 
    this.goY = mouse.y; 

    this.dx = this.goX; 
    this.dy = this.goY; 


} 

UpdatePosition() 
{ 
    this.x += this.dx/1000; 
    this.y += this.dy/1000; 
} 

、すべての60msのは、私はRECTを描きます！

0, から開始するときにコードが動作しますが、箇条書きが例10から10で始まるとき、それはより少なく、始点が大きくなると弾丸の足跡が小さくなります。

ありがとうございます！ :)

Answer 1

ここにはanimation tutorialがあります。例では、画面全体で図面（例：箇条書き）をアニメートする方法を見ることができます。

利用ベクトルはへ[startxと、startYと] [ENDX、ENDY]

// dx is the total distance to move in the X direction 
var dx = endX - startX; 

// dy is the total distance to move in the Y direction 
var dy = endY - startY; 

// use a pct (percentage) to travel the total distances 
// start at 0% which == the starting point 
// end at 100% which == then ending point 
var pct=0; 

// use dx & dy to calculate where the current [x,y] is at a given pct 
var x = startX + dx * pct/100; 
var y = startY + dx * pct/100; 

サンプルコードとあなたを得るために、デモが開始からの増分[X、Y]を計算する：

// canvas vars 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
// animating vars 
 
var pct=101; 
 
var startX,startY,endX,endY,dx,dy; 
 

 
// canvas styles 
 
ctx.strokeStyle='skyblue'; 
 
ctx.fillStyle='blue'; 
 

 
// start animation loop running 
 
requestAnimationFrame(animate); 
 

 
// listen for mouse events 
 
window.onmousedown=(function(e){handleMouseDown(e);}); 
 
window.onmouseup=(function(e){handleMouseUp(e);}); 
 

 
// constantly running loop 
 
// will animate bullet 
 
function animate(time){ 
 
    // return if there's no bullet to animate 
 
    if(++pct>100){requestAnimationFrame(animate);return;} 
 
    // update 
 
    x=startX+dx*pct/100; 
 
    y=startY+dy*pct/100; 
 
    // draw 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(startX,startY); 
 
    ctx.lineTo(endX,endY); 
 
    ctx.stroke(); 
 
    ctx.beginPath(); 
 
    ctx.arc(x,y,5,0,Math.PI*2); 
 
    ctx.fill() 
 
    // request another animation loop 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // save ending position 
 
    startX=parseInt(e.clientX-offsetX); 
 
    startY=parseInt(e.clientY-offsetY); 
 
    // set flag 
 
    pct=101; 
 
} 
 

 
function handleMouseUp(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // save ending position and vector 
 
    endX=parseInt(e.clientX-offsetX); 
 
    endY=parseInt(e.clientY-offsetY); 
 
    dx=endX-startX; 
 
    dy=endY-startY; 
 
    // set pct=0 to start animating 
 
    pct=0; 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<h4>Drag the mouse<br>Mousedown sets starting position,<br>Mouseup sets ending position and animates.</h4> 
 
<canvas id="canvas" width=512 height=512></canvas>