HTML5 Canvas-Javascript-如何计算任意坐标之间的直线路径

Question

I recognize various forms of this question have been asked and generally answered in this forum. However I find I am still at a loss as to how to make this work.

The scenario:

• I have an HTML5 Canvas where the 0,0 coordinate is top left.
• I have an object (player) that can move around the canvas with using wasd.
• I want to be able to have the player shoot(cast, throw, whatever) something from their current x,y coordinate in the direction of where the mouse is clicked.
• I want to animate an object(bullet, fireball, whatever) in a straight line between the origin (player location when mouse clicked) and destination (xy where mouse is clicked)

I can get all the origin and destination coords and I try to put them into a vector function to determine what the next x,y coordinate is to animate the projectile at but am failing at understanding how to do this.

One important note (possibly important): I do not want to use other libraries or jquery I just want to write it in javascript.

I am basically working from the Lost Decades simple HTML5 game example and trying to extend it

I create a projectile object like so:

spl = {
  ox: 0,
  oy: 0,
  dx: 0,
  dy: 0,
  speed: 256,
  vector: {
    len: 0
  }
};

on a mouseclick event listener I do this:

addEventListener("mousedown", function(e){
  spl.ox = mvo.x;
  spl.oy = mvo.y;
  spl.dx = e.x;
  spl.dy = e.y;
  spl.vector = doVector(spl.ox, spl.oy, spl.dx, spl.dy);

}, false);

Where spl.ox, oy is the position of the player at the click event spl.dx, dy is the vector of the mouse click

my doVector function is me just trying to work out my linear algebra math like this (it doesn't seem to work out logically to me):

 function doVector(ox, oy, dx, dy){

    var diffX = (dx - ox);
    var diffY = (dy - oy);

    var length = Math.round(Math.sqrt(diffX*diffX+diffY*diffY));
    var normX = Math.round(dx/length);
    var normY = Math.round(dy/length);
    var normProof = (normX*normX+normY*normY);
    var dotProd = (ox*dx)+(oy*dy);
      return{
          len: length,
          dist: dist,
          normX: normX,
          normY: normY,
          normProof: normProof,
          dotProd: dotProd
      }
    }

My update function (which I presume is where I should put my incrementing vector for the spl object) just handles the player movement with wasd at the moment:

//update objects --/////////////dddw
var update = function(modifier){

  if(87 in keysDown){ //up
    mvo.y -= Math.round(mvo.speed * modifier);
  }

 if(83 in keysDown){ //down
    mvo.y += Math.round(mvo.speed * modifier);
  }

 if(65 in keysDown){ //left
    mvo.x -= Math.round(mvo.speed * modifier);
  }

 if(68 in keysDown){ //right
    mvo.x += Math.round(mvo.speed * modifier);
  }


}// END update objects --/////////////

my render function is bloated as I am trying to figure out the math for the vector/velocity thing:

// render everything
var render = function (){

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.textAlign = "left";
    ctx.textBaseline = "top";


    ctx.font = "10px verdana";
    ctx.fillStyle = "#000088";
    ctx.fillText("MVO", mvo.x, mvo.y);
    ctx.fillText(mvo.x + ", " + mvo.y, mvo.x-9, mvo.y+11);

    ctx.fillStyle = "#008800";
    ctx.fillText("OXY", spl.ox, spl.oy);
    ctx.fillText(spl.ox + "," + spl.oy, spl.ox-9, spl.oy+11);

    ctx.fillStyle = "#880000";
    ctx.fillText("DXY", spl.dx-18, spl.dy-18);
    ctx.fillText(spl.dx + "," + spl.dy, spl.dx-29, spl.dy-7);


    ctx.font = "12px verdana";
    ctx.fillStyle = "#bbbbbb";
    ctx.fillText("mvo x,y: " + mvo.x + ", " + mvo.y, 32, 32);
    ctx.fillText("thing: ", 32, 44);
    ctx.fillText("thing: ", 32, 56);
    ctx.fillText("thing: ", 32, 68);
    ctx.fillText("thing:" , 32, 80);


    ctx.fillText("spl origin: " + spl.ox + "," + spl.oy, 525, 32);
    ctx.fillText("spl destination: " + spl.dx + "," + spl.dy, 525, 44);
    ctx.fillText("vector length: " + spl.vector.len, 525, 56);
    ctx.fillText("spl normalized: " + spl.vector.normX + "," + spl.vector.normY, 525, 68);
    ctx.fillText("spl norm proof: " + spl.vector.normProof, 525, 80);
    ctx.fillText("spl norm dotProd: " + spl.vector.dotProd, 525, 92);
}

and finally my main loop looks like so

// Main loop
var main = function(){
   var now = Date.now();
   var delta = now - then;

   update(delta/1000);
   render();

   then = now;

   requestAnimationFrame(main);
};

Now, first, if you have read and followed all this, thank you very much for your brain cycles.

Secondly, all I want to do is determine how to recalculate the vector for an object moving between two coordinates and update the x,y position to draw at accordingly.

I may be entirely stupid becuase I read this great thing on linear algebra for games but seem unable to make it work. Any help would be really greatly appreciated.

Answer 1

Don't round your direction vector or your bullet direction will be off and it will miss its target.
And as enhzflep said use diffX and diffY insted of dx and dy for normalization or it will be completely wrong.

var length = Math.sqrt(diffX*diffX+diffY*diffY);
var normX = diffX/length;
var normY = diffY/length;

To actually move the bullet, you must update its position in your update function. You need to update bullets position by adding its direction multiplied with speed and time delta ( modifier ).

spl.ox += spl.vector.normX * spl.speed * modifier;
spl.oy += spl.vector.normY * spl.speed * modifier;

You can then draw it in your render function

ctx.beginPath();
ctx.arc(spl.ox, spl.oy, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.fillText(spl.ox.toFixed(2) + "," + spl.oy.toFixed(2), spl.ox-40, spl.oy+6);

JSFiddle