HTML5帆布游戏将鼠标点击到鼠标点。

Question

现在。我准备从我角色的方向射击子弹。但我希望能够将子弹射向鼠标点，让玩家更容易。

现在它是

if(gun_1[i].direction == 2){ gun_1[i].x -= gun_1[i].speed * modifier}; 
if(gun_1[i].direction == 3){ gun_1[i].x += gun_1[i].speed * modifier}; 
if(gun_1[i].direction == 1){ gun_1[i].y -= gun_1[i].speed * modifier}; 
if(gun_1[i].direction == 4){ gun_1[i].y += gun_1[i].speed * modifier }; 
if(gun_1[i].direction == 5){ gun_1[i].y -= gun_1[i].speed * modifier; gun_1[i].x -= gun_1[i].speed * modifier }; 
if(gun_1[i].direction == 7){ gun_1[i].y += gun_1[i].speed * modifier; gun_1[i].x -= gun_1[i].speed * modifier }; 
if(gun_1[i].direction == 6){ gun_1[i].y -= gun_1[i].speed * modifier; gun_1[i].x += gun_1[i].speed * modifier }; 
if(gun_1[i].direction == 8){ gun_1[i].y += gun_1[i].speed * modifier; gun_1[i].x += gun_1[i].speed * modifier }; 

我希望能够拍摄到鼠标点击的地方的位置。如果可能。

Answer 1

当然，这并不难。但是你也可以做很多事情来改善你现在的设计。首先，加velocityX和velocityY领域，使每一步，你只需要更新子弹的位置：

gun_1[i].x += gun_1[i].velocityX 
gun_1[i].y += gun_1[i].velocityY 

然后，当按下鼠标，设置子弹的速度：

canvas.onmousedown = function(e) { 
    var dx = (e.x - character.x); 
    var dy = (e.y - character.y); 
    var mag = Math.sqrt(dx * dx + dy * dy); 

    // whatever you need to do to get gun_1[i] 

    gun_1[i].velocityX = (dx/mag) * speed; 
    gun_1[i].velocityY = (dy/mag) * speed; 
} 

如果你知道一些关于矢量的东西，我们只是将方向矢量标准化并乘以标量的初始速度。

Answer 2

另一个答案：

gun_1[i].x += gun_1[i].velocityX; 
gun_1[i].y += gun_1[i].velocityY; 


var dx = (e.x - character.x); 
var dy = (e.y - character.y); 
var angle = Math.atan2(dy, dx); 

gun_1[i].velocityX = Math.cos(angle) * speed; 
gun_1[i].velocityY = Math.sin(angle) * speed; 

Answer 3

var i=0; 
     var maxBullets=10; 
     var allBullets=[];//a array for objects 

     function bullet(){ 
      this.vx=0; 
      this.vy=0; 
      this.inix=0; 
      this.iniy=0; 
      this.angleGrads=0; 
      this.angleRads=1.0; 
      this.active=false; 
     } 
     bullet.prototype.exist=function(){ 
     //this.inix+=mathsin.bla,bla.bla.bla bla 
     if(this.x > wordWidth){ 
      //kill this bullet 
      this.active=false; 
      } 
     } 
     bullet.prototype.draw=function(){ 
      //ctx.draw bla, bla, bla 
     } 
     function newBullets(){ 
      for(i=1;i<=maxBullets;i++){ 
      allBullets[i]=new bullet(); 
      } 
     } 
    function launchBullets(){ 
     for(i=1;i<=maxBullets;i++){ 
      if(!allBullets[i].active){ 
       //detemine angle with a point an the mouse point 
       // math atan2() ;) 
       //asing values to this bullet 
      allBullets[i].angleGrads=angleMouse; 
      allBullets[i].inix=mousex; 
      allBullets[i].iniy=mousey; 
      allBullets[i].angleRads=(allBullets[i].angleGrads*PI)/180; 
      //and end 
      allBullets[i].active=true; 
      //get out 
      break; 
      } 
      } 
    }//end of launchBullets 

    function operations(){ 
     for(i=1;i<=maxBullets;i++){ 
      if(allBullets[i].active){ 
       allBullets[i].exist(); 
     } 
     } 
    } 
    function paint(){ 
    for(i=1;i<=maxBullets;i++){ 
      if(allBullets[i].active){ 
       allBullets[i].draw(); 
     } 
     } 
    }//end of draw scene