キャンバス - 遠くからオンラインでポイントを見つける方法

私はこのゲームで、カーソルがある場所に向かって銃を動かすことができました。しかし、私がしなければならないのはこれです：キャンバス - 遠くからオンラインでポイントを見つける方法

<!doctype html> 
<html> 
    <head> 
     <title>Block Shooter</title> 
    </head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <body> 
     <center> 
      <canvas id="canvas" width="1200" height="600" style="border: 1px solid black"></canvas> 
      <script> 
      // Variables 

      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d"); 
      var start = false; 
      var gunWidth = 80; 
      var gunLength = 150; 

      $("#canvas").mousemove((event) => { 
       ctx.clearRect(0, 0, canvas.width, canvas.height) 
       ctx.beginPath(); 
       ctx.lineWidth = gunWidth; 
       ctx.strokeStyle = "black"; 
       //get dimensions of canvas. 
       var dimensions=event.target.getBoundingClientRect(); 
       var middle=dimensions.left+(dimensions.width/2) 
       ctx.moveTo(canvas.width/2, canvas.height); 
       //get mousex relative to canvas 
       var mousex=event.offsetX 
       //get mousey relative to canvas 
       var mousey=event.offsetY 

       var ydistance=mousey; 
       var xdistance=mousex-middle 
       //distance formula 
       var distance=Math.sqrt((xdistance*xdistance)+(ydistance*ydistance)) 

       var gunlength=200; 
       var drawx=(gunlength*(xdistance/distance))+middle 
       var drawy=gunlength*(ydistance/distance) 

       ctx.lineTo(drawx, drawy); 

       ctx.stroke(); 
       ctx.closePath(); 

      }) 

      </script> 
     </center> 
    </body> 

</html>

ここで何とか正しく指していないし、移動を停止します。これには解決策がありますか？例を挙げてください。ありがとう！

出典

2017-01-10 Sushi Is Awesome

それはあなたがしようとしているが何であるかは全く明らかではないとして、あなたはより多くの情報を提供することができますする。 – Blindman67

@ Blindman67更新されました –

あなたはmaths described hereとhereに従うならば、あなたはこのようなコードで終わる：

const x0 = canvas.width * 0.5; 
const y0 = canvas.height; 

const x1 = event.offsetX; 
const y1 = event.offsetY; 

const distance = Math.sqrt(((x1 - x0) * (x1 - x0)) + ((y1 - y0) * (y1 - y0))); 

const t = gunLength/distance; 
const x = ((1 - t) * x0) + (t * x1); 
const y = ((1 - t) * y0) + (t * y1); 

ctx.lineTo(x, y);

Here's the fiddle.

出典

2017-01-11 11:08:21

キャンバス - 遠くからオンラインでポイントを見つける方法

答えて

関連する問題