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