Javascript HTML5画布游戏将子弹射向鼠标点。

现在。我把它设置成从我角色的方向射击子弹。但我希望能够将子弹射向鼠标点，让玩家更容易上手

现在是

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

---

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

当然，这并不难。但是你也可以做很多事情来改进你目前的设计。首先，添加

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

如果你知道向量的一两件事，我们只是规范化方向向量，然后乘以标量初始速度

另一个答案：

var i=0；
var=10；
var allBullets=[]//对象数组
函数bullet（）{
这个。vx=0；
这个.vy=0；
这个。inix=0；
这个.ini=0；
这个。angleGrads=0；
这个。angleRads=1.0；
这个.active=false；
}
bullet.prototype.exist=函数（）{
//this.inix+=mathsin.bla，bla.bla.bla
if（this.x>wordWidth）{
//杀了这颗子弹
这个.active=false；
}
}
bullet.prototype.draw=function（）{
//ctx.画布拉，布拉，布拉
}
函数newBullets（）{
对于（i=1；IsSuggestion…
开关
；抱歉，我仍在尝试在我的代码中实现这一点。我会尽快让您知道它是否有效，谢谢。谢谢宗庆后。这正是我所需要的。角度可能很有用，但trig函数往往很慢，并且是获得单位向量的一种迂回方式。不过，+1。
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;

   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