我正在尝试使用一个简单的交互式大炮,它以180度弧度移动,跟随鼠标移动。然后,每当你点击屏幕上的任何地方,我希望它能够射击炮弹。
我正在使用HTML5 canvas和/或jquery来完成这项工作,到目前为止我认为我应该使用mousemove事件,但我确定这是否是最简单的方法。但是,另一方面,我可以让我的大炮不断旋转并设置一个功能,将大炮指向一组点,然后每次移动鼠标时调用该功能。这是一个斗志旺盛的想法,但我只是难过了。
到目前为止,我在画布上绘制了我的大炮,如下所示: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>
最简单的方法是让大炮跟随我的鼠标然后射出炮弹?
答案 0 :(得分:0)
这是Cryptoburner的链接应用于你的佳能场景:
http://jsfiddle.net/m1erickson/BE7F2/
通过收听mousemove事件指出你的经典:
示例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);
}
通过侦听mousedown事件在鼠标位置拍摄一个佳能球:
示例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);
}