script.js

let canvas = document.getElementById("snake"); //estou ligando com o id do canvas no html
let context = canvas.getContext("2d");
let box = 32; 
let direction = "right";
let snake = [];
snake[0] = {x:8*box, y:8*box} //esse array de snake vazio acima vai receber esse x e y na posição zero do array
let food = {
    x: Math.floor(Math.random()*15+1)*box,
    y: Math.floor(Math.random()*15+1)*box
}

function criarBG(){
    context.fillStyle = "lightblue";
    context.fillRect(0, 0, 16*box, 16*box);
}

function criarCobrinha(){
    for(i=0; i<snake.length; i++){ 
        context.fillStyle = "green";
        context.fillRect(snake[i].x, snake[i].y, box, box);
    }
}

function drawFood(){
    context.fillStyle = "red";
    context.fillRect(food.x, food.y, box, box);
}

document.addEventListener('keydown', update);

function update(event){
    if(event.keyCode==37 && direction != "right") direction = "left";
    if(event.keyCode==38 && direction != "down") direction = "up";
    if(event.keyCode==39 && direction != "left") direction = "right";
    if(event.keyCode==40 && direction != "up") direction = "down";
}

function iniciarJogo(){
    if (snake[0].x >15*box && direction == "right") snake[0].x = 0;
    if (snake[0].x < 0 && direction == "left") snake[0].x = 16*box;
    if (snake[0].y >15*box && direction == "down") snake[0].y = 0;
    if (snake[0].y < 0 && direction == "up") snake[0].y = 16*box;

    for(i=1; i<snake.length; i++){
        if(snake[0].x==snake[i].x && snake[0].y==snake[i].y){
            clearInterval(jogo);
            alert('você perdeu, meu caro amigo! :( Não fique triste, recarregue a página e tente novamente');
        }
    }

    criarBG();
    criarCobrinha();
    drawFood();

    let snakeX = snake[0].x;
    let snakeY = snake[0].y;

    if (direction=="right") snakeX = snakeX + box;
    if (direction=="left") snakeX-=box;
    if (direction=="up") snakeY = snakeY - box;
    if (direction=="down") snakeY+=box;

    if(snakeX != food.x || snakeY !=food.y){
        snake.pop();
    }else{  food.x = Math.floor(Math.random()*15+1)*box,
            food.y = Math.floor(Math.random()*15+1)*box
    }

    

    let cabeça = {
        x: snakeX,
        y: snakeY
    }

    snake.unshift(cabeça);
}
let jogo = setInterval(iniciarJogo, 100)