Сравнение x/y двух позиций на холсте

Question

im Использование холста для визуализации маленькой моей игры. В основном у меня есть два объекта, представляющих космические корабли, каждый из которых имеет массив «Местоположение», в котором хранятся текущие корабли x/y. В соответствии с этими массивами я рисую изображение на холсте (totalw/h 300/300 fyi).

Теперь, для трудной части. Я хочу нарисовать анимацию (стрельбу) на этом холсте. в основном от ship1 x/y до ship2 x/y.

Для самой анимационной функции im, передающей объект эффектов, который содержит 3 массива, shooter.location [x, y], target.location [x, y] и третий массив, который содержит место, где EFFECT в настоящее время находится в [ x, y].

this.animateEffects = function(effects){ 

    var shooter = effects.shooter; 
    var target = effects.target; 
    var current = effects.current; 

    var canvas = document.getElementById("effects"); 
    var context = canvas.getContext("2d"); 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.fillStyle = "red"; 
     context.arc(current[0], current[1], 5, 0, 2*Math.PI); 
     effects.current[0]++ 
     effects.current[1]++ 
     context.fill(); 

     if (current == target){ 
      console.log("ding"); 
      this.end() 
     } 
} 

Моей «проблема» в том, что им, если вообще возможно, ищет умный способ определения (для каждого кадра), если эффекты [х, у] должны идти ++ или - или сочетание два, в зависимости от того, где расположены «движущиеся» корабли (в то время начались съемки).

Любые советы или подсказки.

Answer 1

Вы можете стрелять из пулемета из стрелка в цель с использованием линейной интерполяции.

1. Вычислить разницу в оригинальной Х & Y позиций стрелок и цели.

   // save the starting position of the bullet (== shooter's original position) 
   // (these original X & Y are needed in the linear interpolation formula) 
   bulletOriginalX=shooter.x; 
   bulletOriginalY=shooter.y; 
   
   // calc the delta-X & delta-Y of the shooter & target positions 
   // (these deltas are needed in the linear interpolation formula) 
   dx=target.x-shooter.x; 
   dy=target.y-shooter.y; 
   

2. Перемещение пули в сторону мишени, используя формулу интерполяции

   // where percent == the percent you want the bullet to be between 
   // it's starting & ending positions 
   // (between starting shooter & starting target positions) 
   currentBulletX=bulletOriginalX+dx*percent; 
   currentBulletY=bulletOriginalY+dy*percent; 
   

Вот пример:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
shooter={x:50,y:50}; 
 
target={x:100,y:100}; 
 
effect={x:50,y:50,dx:0,dy:0,pct:0,speedPct:0.25}; 
 

 
draw(); 
 
fire(); 
 

 
$('#test').click(function(){ 
 
    moveEffect(); 
 
    draw(); 
 
}); 
 

 
function fire(){ 
 
    effect.x=shooter.x; 
 
    effect.y=shooter.y; 
 
    effect.dx=target.x-shooter.x; 
 
    effect.dy=target.y-shooter.y; 
 
    effect.pct=0; 
 
} 
 

 
function moveEffect(){ 
 
    effect.pct+=effect.speedPct; 
 
} 
 

 
function draw(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(shooter.x,shooter.y,15,0,Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle='green'; 
 
    ctx.stroke(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(target.x,target.y,15,0,Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle='red'; 
 
    ctx.stroke(); 
 

 
    if(effect.pct>1){return;} 
 

 
    var x=effect.x+effect.dx*effect.pct; 
 
    var y=effect.y+effect.dy*effect.pct; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(x,y,3,0,Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fillStyle='black'; 
 
    ctx.fill(); 
 

 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id=test>Animate 1 frame</button> 
 
<br><canvas id="canvas" width=300 height=300></canvas>