0
我正在嘗試一場蛇的遊戲,雖然形狀似乎不動。我不知道它爲什麼這樣做,這不是一個印刷錯誤。爲了看到我的問題,請參閱下面的代碼片段。形狀不移動
我已經添加了CSS和HTML文件,所以你知道我做對了。我的做法是獲得蛇的方向(由變量'vx'和'vy'表示),然後使用該方向來計算'snakePiece()'對象的未來位置在'蛇'的陣列中。
window.onload = function main() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
function snakePiece() {
this.color = "#9999ff";
this.dimension = 25;
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
}
var snake = new Array(new snakePiece());
function setPosition() {
for (i = 0; i < snake.length; i++) {
switch (snake[i].vx) {
case 1:
snake[i].x += snake[i].dimension;
snake[i + 1].x = snake[i].x - snake[i].dimension;
snake[i + 1].vx = 1;
break;
case -1:
snake[i].x -= snake[i].dimension;
snake[i + 1].x = snake[i].x + snake[i].dimension;
snake[i + 1].vx = -1;
break;
}
switch (snake[i].vy) {
case 1:
snake[i].y -= snake[i].dimension;
snake[i + 1].y = snake[i].y + snake[i].dimension;
snake[i + 1].vy = 1;
break;
case -1:
snake[i].y += snake[i].dimension;
snake[i + 1].y = snake[i].y - snake[i].dimension;
snake[i + 1].vy = -1;
break;
}
}
}
setInterval(function draw() {
setPosition();
ctx.clearRect(0, 0, c.width, c.height);
for (j = 0; j < snake.length; j++) {
ctx.fillStyle = snake[j].color;
ctx.fillRect(snake[j].x, snake[j].y, snake[j].dimension, snake[j].dimension);
}
}, 500);
document.onkeydown = function(event) {
var keyPress = String.fromCharCode(event.keyCode);
switch (keyPress) {
case 40: //DOWN
snake[0].vy = 1;
snake[0].vx = 0;
break;
case 39: //RIGHT
snake[0].vx = 1;
snake[0].vy = 0;
break;
case 38: //UP
snake[0].vy = -1;
snake[0].vx = 0;
break;
case 37: //LEFT
snake[0].vx = -1;
snake[0].vy = 0;
break;
}
}
}
body {
padding: 15px;
}
#canvas {
border: 3px solid black;
background-color: #FFB6C1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Snake</title>
<script src="snake-java.js" type="text/javascript" rel="javascript"></script>
<link href="snake-css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<canvas height="900" width="900" id="canvas"></canvas>
</body>
</html>
你自己解決你的問題? – PinkTurtle