キャンバスを使って指差し可能な一人称シューティングガンを作成する

私は、カーソルがどこにあるかを指すことができるキャンバスから銃を作り出す方法の結果をレンダリングする方法を見つけようとしています。キャンバスを使って指差し可能な一人称シューティングガンを作成する

<!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> 
      <div id="introContainer"><h1 id="intro">Welcome to Block Shooter</h1></div> 
      <button id="skip" style="position: absolute; bottom: 50px; left:610px">Skip Intro</button> 
      <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 gunWidth = 80; 
      var gunLength = 150; 

      $("#canvas").mousemove(function (event) { 
       ctx.clearRect(0, 0, canvas.width, canvas.height) 
       ctx.beginPath(); 
       ctx.lineWidth = gunWidth; 
       ctx.strokeStyle = "black"; 
       ctx.moveTo(canvas.width/2 - gunWidth/2, canvas.height + 100); 
       ctx.lineTo(event.offsetX, event.offsetY); 
       ctx.stroke(); 
       ctx.closePath(); 

       ctx.beginPath(); 
       ctx.lineWidth = gunWidth; 
       ctx.strokeStyle = "white"; 
       ctx.moveTo(event.offsetX, event.offsetY); 
       ctx.lineTo(canvas.width/2 - gunWidth/2, canvas.height - gunLength); 
       ctx.stroke(); 
       ctx.closePath(); 

      }) 

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

</html>

私は次に何をすべきか分かりません。これを行うより良い方法はありますか？もしそうなら、例を挙げてください。ありがとう！プログラミングはすぐに数学に入っ

出典

2017-01-10 Sushi Is Awesome

残念ながら、インタラクティブグラフィックス.... があなたの$に銃は同じままになります（＃キャンバス）.mousemove以下

  ctx.clearRect(0, 0, canvas.width, canvas.height) 
      ctx.beginPath(); 
      ctx.lineWidth = gunWidth; 
      ctx.strokeStyle = "black"; 
      //get dimensions of canvas 
      //for performance this should be moved out of the 
      //mousemove and up to where your other global variables canvas and ctx are. 
      var dimensions=event.target.getBoundingClientRect(); 
      var middle=dimensions.left+(dimensions.width/2) 
      ctx.moveTo(middle,0); 
      //get mousex relative to canvas 
      var mousex=event.clientX-dimensions.left; 
      //get mousey relative to canvas 
      var mousey=event.clientY-dimensions.top; 
      var ydistance=mousey; 
      var xdistance=mousex-middle 
      //distance formula 
      var distance=Math.sqrt((xdistance*xdistance)+(ydistance*ydistance)) 
      //http://math.stackexchange.com/questions/175896/finding-a-point-along-a-line-a-certain-distance-away-from-another-point 
      var gunlength=200; 
      var drawx=(gunlength*(xdistance/distance))+middle 
      var drawy=gunlength*(ydistance/distance) 

      ctx.lineTo(drawx, drawy); 


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

と（機能を持っているものを交換してくださいサイズ.... キャンバスの底にガンを戻すためにいくつかの変更があります（HTMLキャンバスにはy軸の逆があり、デモではそのことを考慮していません）

出典

2017-01-10 04:59:50 user2782001

私は銃を戻しますか？私はmoveToを底に移動しようとしましたが、それでは何ですか？ –

キャンバスを使って指差し可能な一人称シューティングガンを作成する

答えて

関連する問題