我正在尝试一场蛇游戏，虽然形状似乎没有移动。我不知道它为什么这样做，这不是一个印刷错误。要查看我的问题，请参阅↓。
下面的代码段我也添加了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>
答案 0 :(得分：0)
这是我对它的看法。我在代码中添加了注释，我修改了一些内容以解决错误。
window.onload = function main() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
function snakePiece() {
this.color = "#9999ff";
this.dimension = 25;
this.x = 100;
this.y = 100;
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;
// You don't need all the commented lines in this function.
// The for loop is already taking care of your snake cells.
// Moreover snake[i + 1] is undefined if your snake is length 1 (hence a JS error).
//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); <- this is wrong -> verify with : console.log(keyPress);
switch (event.keyCode) { // switch on event.keyCode instead
case 40: //DOWN
snake[0].vy = -1; // -1 instead of 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; // 1 instead of -1
snake[0].vx = 0;
break;
case 37: //LEFT
snake[0].vx = -1;
snake[0].vy = 0;
break;
}
// add preventDefault(); to disable window scrolling
event.preventDefault();
}
}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>