我正在开发一个非常基本的基于 JS 画布的游戏,它介于导弹防御和太空入侵者之间,需要一些帮助。
我在屏幕底部有一个小炮塔,可以从枪管发射圆圈,但由于某种原因,最近发射的圆圈似乎有第二个圆圈落后于它。然而,当另一枪射击时,滞后的圆圈从原来的后面消失,然后出现在新枪的后面。另外,我有一个从屏幕上下来的正方形,它代表了一个行为古怪的外星入侵者。外星人向下飞行 250 像素,然后开始沿方形路径移动,直到被摧毁。看起来代表外星人的正方形在沿着正方形路径的边缘移动时会改变大小,这显然不应该发生。
除了这两个问题,我很想听听您对代码的任何建议。我以前从未使用过 JavaScript,并且通常不会编写太多代码,因此感谢您提供任何帮助/指导。
这是一个工作演示:http: //jsbin.com/ehezuj/1/edit
这是我的代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Space Game Demo</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="800" height="600">
Your browser does not support HTML5.
</canvas>
</div>
<script type="text/javascript">
//Start of script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 400;
var y = 0;
var direction = 0;
var mouseDown = false;
var gloop;
var shots = new Array;
var aliens = new Array;
aliens.push(new basicAlien());
var playerTurret = new (function() { //turret object
var that = this;
that.draw = function() {
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.rect(380, 540, 40, 60); //draw base
ctx.fill();
ctx.beginPath();
ctx.arc(400, 540, 20, Math.PI, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.lineWidth="10";
ctx.moveTo(400, 540);
var tempX, tempY, temp;
temp = getTrajectory(x, y);
tempX = 35 * temp[0]; tempY = 35 * temp[1];
ctx.lineTo(tempX + 400, 540 - tempY);
ctx.stroke();
}
});
function basicAlien() {
var that = this;
that.step = 0; that.bottom = false;
that.vel = 2;
that.pos = [(Math.random() * 740) + 30, -10];
that.move = function() {
if (that.pos[1] >= 250) {that.bottom = true;}
if (!that.bottom) {
that.pos[1] += that.vel;
}
else {
if (that.step < 20) {
that.pos[0] += that.vel;
}
else if (that.step < 40) {
that.pos[1] -= that.vel;
}
else if (that.step < 60) {
that.pos[0] -= that.vel;
}
else {
that.pos[1] += that.vel;
}
that.step = (that.step+1)%80;
}
}
that.draw = function() {
ctx.fillStyle = "white";
ctx.rect(that.pos[0] - 10, that.pos[1] - 5, 20, 10);
ctx.fill();
}
};
function shotObject(shotX, shotY) {
var that = this;
that.traj = getTrajectory(shotX, shotY);
that.vel = 10;
that.pos = [400, 540];
that.draw = function() {
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(that.pos[0], that.pos[1], 5, 0, 2 * Math.PI);
ctx.fill();
}
that.move = function() {
that.pos[0] += that.vel * that.traj[0];
that.pos[1] -= that.vel * that.traj[1];
if (that.pos[0] < -10 || that.pos[0] > 810 || that.pos[1] < -10 || that.pos[1] > 610) {
shots.splice(shots.indexOf(that), 1);
}
}
};
function getTrajectory(coordx, coordy) {
var tempX, tempY, neg = false;
if (coordx == 400) {
if (coordy <= 540) {
direction = degToRad(90);
}
else {
direction = degToRad(270);
}
}
else {
direction = Math.atan((540 - coordy)/(coordx - 400));
if (coordx < 400) {
neg = true;
}
}
tempX = Math.cos(direction);
tempY = Math.sin(direction);
if (neg) {
tempX = -tempX;
tempY = -tempY;
neg = false;
}
return [tempX, tempY];
};
function degToRad(angle) {
return angle * (Math.PI/180);
}; //end degToRad()
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
};
function process() {
for (var i = 0; i < shots.length; i++) {
shots[i].move();
};
for (var i = 0; i < aliens.length; i++) {
aliens[i].move();
};
};
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
playerTurret.draw();
for (var i = 0; i < shots.length; i++) {
shots[i].draw();
};
for (var i = 0; i < aliens.length; i++) {
aliens[i].draw();
};
}; //end draw()
function loop() {
process();
draw();
gloop = setTimeout(loop, 25);
}; //end loop()
canvas.addEventListener('mousemove', function(e) {
var mousePos = getMousePos(canvas, e);
x = mousePos.x;
y = mousePos.y;
}, false);
canvas.addEventListener('mousedown', function(e) {
var mousePos = getMousePos(canvas, e);
var shotX = mousePos.x;
var shotY = mousePos.y;
shots.push(new shotObject(shotX, shotY));
mouseDown = true;
}, false);
canvas.addEventListener('mouseup', function(e) {
mouseDown = false;
});
loop();
</script>
</section>
</body>
</html>