Javascript蛇游戏错误

Question

有两个问题，我无法控制蛇，现在它只是不断重置，不给蛇移动的机会。我想如果我继续编码，问题就会消失，但遗憾的是它不是一个完美的世界。

我尝试了不同的键代码来控制蛇，但它不起作用。

window.onload = function() {
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var cvsW = cvs.width;
var cvsH = cvs.height;
var snekW = 10;
var snekH = 10;
//score
var score = 0;
//default direction
var direction = "right";
//read users directions
document.addEventListener("keydown",getDirection);
//To my knowledge this function should control the snake with the 
keyboard
function getDirection(e)
{   
if(e.keyCode == 37 && direction != "right"){
direction = "left";
}else if(e.keyCode == 38 && direction != "down"){
direction = "up";
}else if(e.keyCode == 39 && direction != "left"){
direction = "right";   
}else if(e.keycode == 40 && direction != "up"){
direction = "down";   
}
}
function drawSnek(x,y)
{
ctx.fillStyle = "Lime";
ctx.fillRect(x*snekW,y*snekH,snekW,snekH);
ctx.fillStyle = "#000";
ctx.strokeRect(x*snekW,y*snekH,snekW,snekH);    
}
var len = 4; //default length of the snake
var snek = []; //the snake is an array
for(var i = len-1; i>=0; i--)
{
snek.push({x:i,y:0});    
}

//exceptions for direction of snake
if(direction == "left") snekx--;
else if( direction == "up") sneky--;
else if( direction == "right") snekx++;
else if( direction == "down") sneky++; 

//Functions for creating snake food have been removed.
var newHead = { x: snekx, y: sneky};
snek.unshift(newHead);
drawScore(score);
}
setInterval(draw, 10); //I do not fully understand this function

}

Answer 1

您的代码存在几个问题：

您需要一个可以在间隔内调用的绘制函数。在此绘制函数中，您可以绘制蛇的各个部分。

您无法正确控制蛇，因为回调函数的向下部分有拼写错误。

您必须为蛇头引入 x/y 变量，或者使用数组的第一个元素来检索它。

使用snek.unshift取消移动新位置将导致蛇无限生长。使用 删除数组元素

snek.splice(len,snek.length - len);

解决了这个问题。

如果您只在屏幕上绘制新元素，则您绘制的旧部分仍将存在于新帧中。一个好主意是使用

ctx.clearRect(0, 0, cvsW, cvsH);

window.onload = function () {
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var cvsW = cvs.width;
var cvsH = cvs.height;
var snekW = 10;
var snekH = 10;
//score
var score = 0;
//default direction
var direction = "right";
//read users directions
document.addEventListener("keydown", getDirection);
//To my knowledge this function should control the snake with the keyboard
function getDirection(e) {
if (e.keyCode == 37 && direction != "right") {
direction = "left";
} else if (e.keyCode == 38 && direction != "down") {
direction = "up";
} else if (e.keyCode == 39 && direction != "left") {
direction = "right";
} else if (e.keyCode == 40 && direction != "up") {
direction = "down";
}
}
function drawSnek(x, y) {
ctx.fillStyle = "Lime";
ctx.fillRect(x * snekW, y * snekH, snekW, snekH);
ctx.fillStyle = "#000";
ctx.strokeRect(x * snekW, y * snekH, snekW, snekH);
}
let snekx = 0;
let sneky = 0;
var len = 4; //default length of the snake
var snek = []; //the snake is an array
for (var i = len - 1; i >= 0; i--) {
snek.push({ x: i, y: 0 });
}
function draw() {
ctx.clearRect(0, 0, cvsW, cvsH);
//exceptions for direction of snake
if (direction == "left") snekx--;
else if (direction == "up") sneky--;
else if (direction == "right") snekx++;
else if (direction == "down") sneky++;

//Functions for creating snake food have been removed.
var newHead = { x: snekx, y: sneky };
snek.unshift(newHead);
for(let i = 0; i < snek.length; i++) {
drawSnek(snek[i].x, snek[i].y)
}
snek.splice(len,snek.length - len);
//drawScore(score);
}
setInterval(draw, 50); //I do not fully understand this function
}

带有固定代码的代码笔： https://codepen.io/lukasmoeller/pen/PvVzqq?editors=1111 (不检查边界 - 蛇将离开画布)

setInterval(fn, interval)解释

setInterval 每interval毫秒调用一次使用 fn 指定的函数，直到它被清除。可以使用clearInterval清除间隔，为其传递返回值setInterval。如果要在开始时延迟函数执行，可以添加setTimeout，添加设置间隔的回调：

setTimeout(function(){
setInterval(draw, 50);
}, 1000)

这只会在 1000 毫秒后每 50 毫秒开始绘制游戏。