比较画布上两个位置的 x/y

Question

im using a canvas to visualize a small game of mine. Basicly i have two objects that represent space ships, each of them has a "Location" array which holds the ships current x/y. According to these arrays, i drawImage on the canvas (totalw/h is 300/300 fyi).

Now, for the difficult part. i want to draw animations (gunfire) on that canvas. basicly from ship1 x/y to ship2 x/y.

For the animation function itself, im passing an effects object that holds 3 Arrays, shooter.location[x, y], target.location[x, y] and a third array that holds where the EFFECT is currently at [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()
        }
}

My "problem" is that im, if possible at all, looking for a smart way to determine (for each frame) if effects[x, y] should go ++ or -- or a combination of the two, depending on where the "moving" ships are located at (at the time, the shooting started).

Any advise or hints are appreciated.

Answer 1

You can fire a bullet from shooter to target using linear interpolation.

1. Calculate the difference in the original X & Y positions of the shooter and target.

    // 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. Move the bullet towards the target using the interpolation formula

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

Here's an example:

 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>