Javascript蛇游戏错误
Javascript蛇游戏错误
提问于 2019-06-03 06:12:45
有两个问题，我不能控制蛇，现在它只是不断地重置，而不给蛇一个移动的机会。我想，如果我继续编码，这个问题就会消失，但遗憾的是，这并不是一个完美的世界。
我尝试了不同的按键代码来控制蛇，但它不起作用。
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}
回答 1
Stack Overflow用户
发布于 2019-06-03 06:29:58
你的代码有几个问题：
您需要一个可以在某个时间间隔内调用的绘制函数。在这个绘图函数中，你可以画出蛇的各个部分。
你无法正确地控制蛇，因为你在回调函数的下半部分有一个打字错误。
您必须为蛇头引入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
}具有固定代码的CodePen：https://codepen.io/lukasmoeller/pen/PvVzqq?editors=1111 (不检查边界-蛇将离开画布)
setInterval(fn, interval)的解释
setInterval每隔interval ms调用一次使用fn指定的函数，直到它被清除。可以通过使用clearInterval并向其传递setInterval的返回值来清除该间隔。如果你想在开始时延迟函数的执行，你可以添加setTimeout，添加一个设置间隔的回调：
setTimeout(function(){
setInterval(draw, 50);
}, 1000)这只会在1000毫秒后每隔50毫秒开始绘制一次游戏。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56419311
复制相关文章
相似问题