我正在制作太空入侵者克隆并且我差不多完成了,但是我的太空入侵者正在移动中遇到问题。我已经尝试使用+ =移动太空入侵者,但这仍然无法正常工作。这是我到目前为止的敌人代码:
//pushes enemy values into the array
for (var i = 0; i < cols; i++) {
enemies[i] = [];
for (var j = 0; j < rows; j++) {
enemies[i][j] = {
x: 0,
y: 0,
alive: true,
};
}
}
for (var i = cols - 1; i >= 0; i--) {
for (var j = rows - 1; j >= 0; j--) {
var b = enemies[i][j];
if (b.alive === true) {
var enemyX = (j * 40) + enemyPadding / 2;
var enemyY = (i * 40) + enemyPadding / 1.5;
b.x = enemyX;
b.y = enemyY;
ctx.beginPath();
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.rect(enemyX += 1, enemyY, enemyWidth, enemyHeight);
ctx.stroke();
ctx.fill();
ctx.closePath();
if (b.y + enemyHeight >= canvas.height) {
b.x = (j * 40) + enemyPadding / 2;
b.y = (i * 40) + enemyPadding / 1.5;
lives--;
}
for (var a = 0; a < bullets.length; a++) {
var w = bullets[a];
if (w.x + w.w >= b.x && w.x <= b.x + enemyWidth && w.y + w.h > b.y && w.y < b.y + enemyHeight) {
bullets.splice(a, 1);
b.alive = false;
score += 20;
}
}
}
}
}
这是一个片段:
//defines variables for drawing
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
//bullet variables
var bullets = [];
var bulletWidth = 7;
var bulletHeight = 15;
var bulletSpeed = 5;
var cols = 5;
var rows = 12;
//enemy variables
var enemies = [];
var enemyWidth = 20;
var enemyHeight = 20;
var enemySpeed = 3;
var enemyPadding = 40;
//other important variables
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var wait = 0;
var score = 0;
var lives = 3;
var time = 0;
//movement
document.addEventListener("keydown", d);
document.addEventListener("keyup", u);
function d(e) {
if (e.keyCode === 37) {
leftPressed = true;
} else if (e.keyCode === 39) {
rightPressed = true;
}
if (e.keyCode === 38) {
upPressed = true;
}
}
function u(e) {
if (e.keyCode === 37) {
leftPressed = false;
} else if (e.keyCode === 39) {
rightPressed = false;
}
if (e.keyCode === 38) {
upPressed = false;
}
}
//pushes enemy values into the array
for (var i = 0; i < cols; i++) {
enemies[i] = [];
for (var j = 0; j < rows; j++) {
enemies[i][j] = {
x: 0,
y: 0,
alive: true,
};
}
}
function drawText() {
ctx.font = "20px Arial";
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillText("Score: " + score, 10, 20);
ctx.fillText("Lives: " + lives, width - 75, 20);
}
function drawEnemy() {
for (var i = cols - 1; i >= 0; i--) {
for (var j = rows - 1; j >= 0; j--) {
var b = enemies[i][j];
if (b.alive === true) {
var enemyX = (j * 40) + enemyPadding / 2;
var enemyY = (i * 40) + enemyPadding / 1.5;
b.x = enemyX;
b.y = enemyY;
ctx.beginPath();
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.rect(enemyX += 1, enemyY, enemyWidth, enemyHeight);
ctx.stroke();
ctx.fill();
ctx.closePath();
if (b.y + enemyHeight >= canvas.height) {
b.x = (j * 40) + enemyPadding / 2;
b.y = (i * 40) + enemyPadding / 1.5;
lives--;
}
for (var a = 0; a < bullets.length; a++) {
var w = bullets[a];
if (w.x + w.w >= b.x && w.x <= b.x + enemyWidth && w.y + w.h > b.y && w.y < b.y + enemyHeight) {
bullets.splice(a, 1);
b.alive = false;
score += 20;
}
}
}
}
}
}
function drawBullet() {
for (var i = 0; i < bullets.length; i++) {
var b = bullets[i];
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(b.x, b.y -= b.s, b.w, b.h);
if (b.y < -b.h) {
bullets.splice(i, 1);
}
}
}
function Player() {
this.x = width / 2;
this.h = 20;
this.y = height - this.h;
this.w = 15;
this.fill = "rgb(255, 255, 255)";
this.speed = 4;
this.render = function(ctx, rx, ry, rw, rh, col, rspeed) {
ctx.fillStyle = col;
ctx.fillRect(rx, ry, rw, rh);
}
}
var player = new Player();
function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);
drawText();
drawEnemy();
drawBullet();
player.render(ctx, player.x, player.y, player.w, player.h, player.fill, player.speed);
if (leftPressed && player.x >= 0) {
player.x -= player.speed;
} else if (rightPressed && player.x < width - player.w) {
player.x += player.speed;
}
if (upPressed && wait <= 0) {
bullets.push({
"x": player.x + player.w / 4,
"y": player.y,
"w": bulletWidth,
"h": bulletHeight,
"s": bulletSpeed
});
//wait = 25;
}
}
function update() {
if (wait > 0) {
wait--;
}
time++;
draw();
requestAnimationFrame(update);
}
update();
&#13;
<!DOCTYPE html>
<html>
<head>
<title> Space Invaders </title>
<style>
body {
margin: 10px 0px 0px 10px;
font-family: Helvetica;
}
</style>
</head>
<body>
<canvas width="500" height="500" id="canvas"></canvas> <br> <br>
<script src="space_invaders.js"></script>
</body>
</html>
&#13;
答案 0 :(得分:5)
每次获得入侵者的初始位置。你不能把它保存在阵列中。查看解决方案jsfiddle
var enemyX = b.x || (j*40)+enemyPadding/2;
var enemyY = b.y || (i*40)+enemyPadding/1.5;
b.x = enemyX;
b.y = enemyY+1;
ctx.beginPath();
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.rect(b.x, b.y, enemyWidth, enemyHeight);
ctx.stroke();
ctx.fill();
ctx.closePath();