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
}

固定代碼的CodePen： https ：//codepen.io/lukasmoeller/pen/PvVzqq？editors = 1111（邊界未選中-蛇會離開畫布）

setInterval(fn, interval)

setInterval interval ms interval使用fn調用一次指定的函數，直到將其清除為止。 可以使用clearInterval清除間隔，並向其傳遞setInterval的返回值。 如果要在開始時延遲函數執行，可以添加setTimeout ，添加一個設置時間間隔的回調：

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

經過1000毫秒后，每隔50毫秒才開始繪制游戲。