我正在学习 JavaScript，但在某些方面仍在苦苦挣扎。我正在尝试使这段代码中的块具有自己的颜色，因此稍后我可以弄清楚如何将图片添加到每个块，但它不起作用，因为仅在 3 个循环之后颜色消失并且它们变成全黑。对于如何制作每个块并保持其颜色的任何帮助，我将非常感激。请看下面的代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slot Machine</title></head><body> <canvas id="canvas" width="1000" height="2000"></canvas> <script> var game = { tickNumber: 0, timer: null, board: [ "####################", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "# #", "####################" ], tick: function() { game.tickNumber++; snake.move(); graphics.drawGame(); game.timer = window.setTimeout("game.tick()", 500); } }; var snake = { parts: [{ x: 2, y: 2, color: "green" }, { x: 2, y: 6, color: "red" }, { x: 2, y: 10, color: "blue" }, { x: 2, Y: 14,
1 回答
开满天机
TA贡献1786条经验 获得超13个赞
问题在于您的蛇中的移动功能。您正在用只有 x 和 y 且没有颜色属性的新位置替换部件对象。
理想情况下，要移动蛇，您应该只移动头部，然后更新身体的其余部分以向上移动一个部分。我已经更新了你的移动功能，你可以在其中看到这个算法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slot Machine</title>
</head>
<body>
<canvas id="canvas" width="1000" height="2000"></canvas>
<script>
var game = {
tickNumber: 0,
timer: null,
board: [
"####################",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"# #",
"####################"
],
tick: function() {
game.tickNumber++;
snake.move();
graphics.drawGame();
game.timer = window.setTimeout("game.tick()", 500);
}
};
var snake = {
parts: [{
x: 2,
y: 2,
color: "green"
},
{
x: 2,
y: 6,
color: "red"
},
{
x: 2,
y: 10,
color: "blue"
},
{
x: 2,
Y: 14,
color: "yellow"
},
{
x: 2,
Y: 16,
color: "grey"
}
],
facing: "S",
nextLocation: function() {
var snakeHead = snake.parts[0];
var targetX = snakeHead.x;
var targetY = snakeHead.y;
targetY = snake.facing == "S" ? targetY + 4 : targetY;
if (targetY >= 24) {
targetY = 2;
}
return {
x: targetX,
y: targetY
};
},
move: function() {
var location = snake.nextLocation();
var prevX = snake.parts[0].x;
var prevY = snake.parts[0].y;
snake.parts[0].x = location.x;
snake.parts[0].y = location.y;
for(var i = 1; i < snake.parts.length; i++) {
var currentX = snake.parts[i].x;
var currentY = snake.parts[i].y;
snake.parts[i].x = prevX;
snake.parts[i].y = prevY;
prevX = currentX;
prevY = currentY;
}
}
};
var graphics = {
canvas: document.getElementById("canvas"),
squareSize: 20,
squarePic: 60,
drawBoard: function(ctx) {
var currentYoffset = 0;
game.board.forEach(function checkLine(line) {
line = line.split('');
var currentXoffset = 0;
line.forEach(function checkCharacter(character) {
if (character == '#') {
ctx.fillStyle = "blue";
ctx.fillRect(currentXoffset, currentYoffset, graphics.squareSize, graphics.squareSize);
}
currentXoffset += graphics.squareSize;
});
currentYoffset += graphics.squareSize;
});
},
drawSnake: function(ctx) {
snake.parts.forEach(function drawPart(part) {
var partXlocation = part.x * graphics.squareSize;
var partYlocation = part.y * graphics.squareSize;
var coloracao = part.color;
ctx.fillStyle = coloracao;
ctx.fillRect(partXlocation, partYlocation, graphics.squarePic, graphics.squarePic);
});
},
drawGame: function() {
var ctx = graphics.canvas.getContext("2d");
ctx.clearRect(0, 0, graphics.canvas.width, graphics.canvas.height);
graphics.drawBoard(ctx);
graphics.drawSnake(ctx);
}
};
graphics.drawGame();
var gameControl = {
startGame: function() {
game.tick();
}
};
gameControl.startGame();
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消