如何使用 Javascript 保持块的独立性？
我正在学习 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,
萧十郎浏览 103回答 1
1回答
-
开满天机
问题在于您的蛇中的移动功能。您正在用只有 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>
随时随地看视频慕课网APP
相关分类
JavaScript