HTML5 lienzo / jQuery mouseemove + evento Mouseclick

Question

Estoy tratando de obtener un cañón interactivo simple que se mueve en un arco de 180 grados que sigue el mouse.Y luego, quiero que dispare las bolas de cañón cada vez que haces clic en cualquier lugar en la pantalla.

Estoy usando lienzo HTML5 y / o jQuery para hacer el trabajo, hasta ahora creo que debería usar un evento de mousemove, pero estoy seguro de que si eso es lo más sencillo.Pero, por otro lado, podría obtener mi cañón girando constantemente y configurar una función que apuntará al cañón en un conjunto de puntos, luego llame a esa función cada vez que mueva el mouse.Es una idea de escape, pero me estoy perplejo de lo contrario.

Hasta ahora dibujé mi cañón en lienzo como se muestra aquí: http://jsfiddle.net/an3d8/1/

<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 1;
  var radius = 50;
  var startAngle = 1 * Math.PI;
  var endAngle = 2 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 15;

  // line color
  context.strokeStyle = 'black';
  context.stroke();
 </script>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(390, 400, 20, 70);
  context.fillStyle = 'grey';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
</script>

¿Cuál sería la forma más sencilla de tener que hacer que el cañón siga mi mouse y luego disparar a los cañones?

Answer 1

Aquí está el enlace de Cryptoburner aplicado a su escenario de Canon:

http://jsfiddle.net/m1erickson/be7f2/

PUNTO SU CANÓN ES LUSIZANDO PARA LOS EVENTOS DE MOUSEMOVE:

• Calcule la posición del mouse
• Calcule el ángulo del mouse versus su canon
• dibuja el canon para enfrentar la posición del mouse

Ejemplo de código de mousemove:

function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  var dx=mouseX-cx;
  var dy=mouseY-cy;
  var rAngle=Math.atan2(dy,dx);
  draw(rAngle-PI/2);
}

Disparar una bola de canon en la posición del mouse escuchando para los eventos de Mousedown:

• Calcule la posición del mouse
• dibuja tu bola canónica como un arco cerrado

Ejemplo de código Mousedown:

function handleMouseDown(e){
  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  ctx.beginPath();
  ctx.arc(mouseX,mouseY,12,0,PI*2);
  ctx.closePath();
  ctx.fillStyle="black";
  ctx.fill();
  ctx.font="14px verdana";
  ctx.fillText("Bang!",mouseX-15,mouseY-20);
}