Javascript snake game bugs

Question

There are two issues, I can't control the snake, and now it just resets constantly without giving the snake a chance to move. I figured that if i kept coding the problem would go away but sadly its not a perfect world.

I tried different key codes for controlling the snake but it didn't work.

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

There were several issues with your code:

You needed a draw function that could be called in an interval. In this draw function you could draw the individual parts of the snake.

You were unable to control the snake correctly as you had a typo in the down part of the callback function.

You have to either introduce x / y variables for the head of the snake or use the first element of the array to retrieve it.

Unshifting the new position using snek.unshift will cause the snake to grow indefinitely. Removing array elements using

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

solves this problem.

If you only draw new elements to the screen the old parts you drew will still exist in new frames. A good idea would be to clear the canvas using

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 with fixed code: https://codepen.io/lukasmoeller/pen/PvVzqq?editors=1111 (boundaries are not checked - the snake will leave the canvas)

Explanation of setInterval(fn, interval)

setInterval calls the function specified using fn every interval ms until it is cleared. The interval can be cleared by using clearInterval , passing it the return value of setInterval . If you want to delay function execution at the beginning you could add setTimeout , add a callback that sets the interval:

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

This would only start drawing the game every 50 ms after 1000ms have passed.