Javascript-画布拍摄定位
我想在我正在制作的游戏中拍摄一个宇宙飞船，但我似乎无法使拍摄的位置正确加载。 我有一个名为shots[]的数组，当玩家按住鼠标按钮时，我希望每隔N个滴答声将Shot（）对象推入其中。 基本上我希望Shot（）的x属性等于ship.x属性，y=ship.y。 然后我希望它有一个Shot.dx属性，该属性会发生变化，具体取决于光标是在画布的中间上方，还是在下面（+3/-3），还是在中心的左侧或右侧（dy=+3/-3）Javascript-画布拍摄定位,javascript,canvas,Javascript,Canvas,我想在我正在制作的游戏中拍摄一个宇宙飞船，但我似乎无法使拍摄的位置正确加载。 我有一个名为shots[]的数组，当玩家按住鼠标按钮时，我希望每隔N个滴答声将Shot（）对象推入其中。 基本上我希望Shot（）的x属性等于ship.x属性，y=ship.y。 然后我希望它有一个Shot.dx属性，该属性会发生变化，具体取决于光标是在画布的中间上方，还是在下面（+3/-3），还是在中心的左侧或右侧（dy=+3/-3） 这是一个JSFIDLE，但我不知道它是如何工作的，所以我无法用它来绘制画布，对不起
这是一个JSFIDLE，但我不知道它是如何工作的，所以我无法用它来绘制画布，对不起：这里是一个关于如何射击的概要：
- 创建阵列以容纳快照对象
- 鼠标向下移动：设置
标志（开始点火）started - 鼠标按下：将任何新射击的射击位置设置为当前鼠标位置
- 鼠标移动时：将任何新快照的触发位置重置为当前鼠标位置
- 鼠标悬停时：清除
标志（停止发射）start
- 如果鼠标仍处于按下状态，则在当前射击位置添加射击
- 按其dx、dy移动所有快照
- 如果快照已移出画布，则从快照[]数组中删除所有快照
- 清除屏幕并在新位置绘制快照
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// canvas related vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var bb=canvas.getBoundingClientRect();
var offsetX=bb.left;
var offsetY=bb.top;
ctx.fillStyle="blue";
// vars related to firing position and Shot(s)
var shotColor=ctx.fillStyle;
var started,mouseX,mouseY,dx,dy;
// Shots fired
var shots = [] //Bullet array
//Object, which should be the position of the bullet.
function Shot(x,y,dx,dy) {
this.x=x;
this.y=y;
this.dx=dx;
this.dy=dy;
}
Shot.prototype.display=function(){
// make fillstyle blue if it's not already blue
if(!ctx.fillStyle==shotColor){ctx.fillStyle=shotColor;}
// draw the shot on the canvas
ctx.fillRect(this.x,this.y,5,5);
}
// listen for mouse events
canvas.onmousedown=function(e){ started=true; setFirePosition(e); }
canvas.onmouseup=function(e){ started=false; }
canvas.onmousemove=function(e){
if(started){setFirePosition(e);}
}
// start the animation loop
requestAnimationFrame(animate);
// set the firing position of the next shot
function setFirePosition(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
dx=(mouseX>=canvas.width/2)?-3:3;
dy=(mouseY>=canvas.height/2)?-3:3;
}
// animation loop
// add shots if the mouse is down
// move shots until they move off-canvas
function animate(){
// request another frame
requestAnimationFrame(animate);
// if the mouse is down, add a shot
if(started){
shots.push(new Shot(mouseX,mouseY,dx,dy));
}
// if no work to do, return
if(shots.length==0){return;}
// new array of active shots
// "active" == shot has not moved off-canvas
var a=[];
// clear the canvas for this frame
ctx.clearRect(0,0,cw,ch);
for(var i=0;i<shots.length;i++){
// get a shot to process
var shot=shots[i];
// move this shot
shot.x+=shot.dx;
shot.y+=shot.dy;
// if the shot hasn't moved offscreen
// add the shot to "a" (the replacement shots array);
// draw this shot
if(shot.x>=0 && shot.x<=cw && shot.y>0 && shot.y<=ch){
a.push(shot);
shot.display();
}
}
// if shots went off-canvas, remove them from shots[]
if(a.length<shots.length){
shots.length=0;
Array.prototype.push.apply(shots,a);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Mousedown to fire shots</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var bb=canvas.getBoundingClientRect（）；
var offsetX=bb.left；
var offsetY=bb.top；
ctx.fillStyle=“蓝色”；
//与射击位置和射击相关的VAR
var shotColor=ctx.fillStyle；
变量开始，mouseX，mouseY，dx，dy；
//开枪
var shots=[]//项目符号数组
//对象，它应该是项目符号的位置。
功能快照（x、y、dx、dy）{
这个.x=x；
这个。y=y；
这个.dx=dx；
这个.dy=dy；
}
Shot.prototype.display=function（）{
//如果fillstyle不是蓝色的，则将其设置为蓝色
如果（！ctx.fillStyle==shotColor）{ctx.fillStyle=shotColor；}
//在画布上绘制快照
ctx.fillRect（this.x，this.y，5,5）；
}
//侦听鼠标事件
canvas.onmousedown=function（e）{start=true；setFirePosition（e）；}
canvas.onmouseup=function（e）{start=false；}
canvas.onmousemove=函数（e）{
如果（启动）{setFirePosition（e）；}
}
//启动动画循环
请求动画帧（动画）；
//设置下一次射击的射击位置
函数设置火力位置（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
dx=（鼠标>=画布宽度/2）？-3:3；
dy=（鼠标>=画布高度/2）？-3:3；
}
//动画循环
//如果鼠标按下，则添加快照
//移动快照，直到它们离开画布
函数animate（）{
//请求另一帧
请求动画帧（动画）；
//如果鼠标已按下，请添加快照
如果（启动）{
推（新镜头（mouseX、mouseY、dx、dy））；
}
//如果没有工作要做，请返回
如果（shots.length==0）{return；}
//新的活动快照阵列
//“活动”==快照未移出画布
var a=[]；
//清除此框架的画布
ctx.clearRect（0,0，cw，ch）；
对于（var i=0；它的银行帮助很大；）
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// canvas related vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var bb=canvas.getBoundingClientRect();
var offsetX=bb.left;
var offsetY=bb.top;
ctx.fillStyle="blue";
// vars related to firing position and Shot(s)
var shotColor=ctx.fillStyle;
var started,mouseX,mouseY,dx,dy;
// Shots fired
var shots = [] //Bullet array
//Object, which should be the position of the bullet.
function Shot(x,y,dx,dy) {
this.x=x;
this.y=y;
this.dx=dx;
this.dy=dy;
}
Shot.prototype.display=function(){
// make fillstyle blue if it's not already blue
if(!ctx.fillStyle==shotColor){ctx.fillStyle=shotColor;}
// draw the shot on the canvas
ctx.fillRect(this.x,this.y,5,5);
}
// listen for mouse events
canvas.onmousedown=function(e){ started=true; setFirePosition(e); }
canvas.onmouseup=function(e){ started=false; }
canvas.onmousemove=function(e){
if(started){setFirePosition(e);}
}
// start the animation loop
requestAnimationFrame(animate);
// set the firing position of the next shot
function setFirePosition(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
dx=(mouseX>=canvas.width/2)?-3:3;
dy=(mouseY>=canvas.height/2)?-3:3;
}
// animation loop
// add shots if the mouse is down
// move shots until they move off-canvas
function animate(){
// request another frame
requestAnimationFrame(animate);
// if the mouse is down, add a shot
if(started){
shots.push(new Shot(mouseX,mouseY,dx,dy));
}
// if no work to do, return
if(shots.length==0){return;}
// new array of active shots
// "active" == shot has not moved off-canvas
var a=[];
// clear the canvas for this frame
ctx.clearRect(0,0,cw,ch);
for(var i=0;i<shots.length;i++){
// get a shot to process
var shot=shots[i];
// move this shot
shot.x+=shot.dx;
shot.y+=shot.dy;
// if the shot hasn't moved offscreen
// add the shot to "a" (the replacement shots array);
// draw this shot
if(shot.x>=0 && shot.x<=cw && shot.y>0 && shot.y<=ch){
a.push(shot);
shot.display();
}
}
// if shots went off-canvas, remove them from shots[]
if(a.length<shots.length){
shots.length=0;
Array.prototype.push.apply(shots,a);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Mousedown to fire shots</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>