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 필드를 추가

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

: 속도 '위치에 마우스를 누를 때 다음

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

을, 총알 설정'을

벡터에 대해 하나 또는 두 가지를 알고있는 경우 방향 벡터를 표준화하고 스칼라 초기 속도를 곱합니다.

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