Snake Game - demo

<canvas width="600" height="400"></canvas>
<h3 id="pontos" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Pontos: 0</h3>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightblue';
    pincel.fillRect(0, 0, 600, 400);
    pincel.font = '30pt Consolas';
    pincel.fillStyle = 'black';
    pincel.fillText("Snake Game", 185,150);
    pincel.font = '9pt Consolas';
    pincel.fillStyle = 'black';
    pincel.fillText("made by: zanniboni", 475,390);

    var cores = ['blue','red','green','yellow','black'];
    var cor_atual = 0;
    function mudaCorTexto(){
        if(cor_atual == cores.length){
            cor_atual = 0;
        } else {
            pincel.fillStyle = cores[cor_atual];
            pincel.font = '15pt Consolas';
            pincel.fillText("Aperte enter para começar", 160, 200);
        }
        cor_atual++;
    }

    setInterval(mudaCorTexto,200);

    var x = 20;
    var y = 20;
    var raio = 10;

    // códigos do teclado

    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;
    var enter = 13;
    
    // regras para jogo
    var apertou_direita = true;
    var apertou_esquerda = false;
    var apertou_baixo = false;
    var apertou_cima = false;
    var comecou_jogo = false;
    var xComida;
    var yComida;
    var criarComida = false;
    var pontos = 0;
    var perdeu = false;
    var tamanho_cobra = 0;


    // taxa de incremento
    var taxa = 3;

    function desenhaCirculo(x, y, raio,cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function atualizaTela(x,y) {

        limpaTela();
        desenhaCirculo(x, y, raio,'blue'); 
        pincel.fillStyle = 'black';
        pincel.strokeRect(0,0,600,400);

    }

    function geraCordenadas(maximo){
        return Math.floor(Math.random() * maximo);
    }

    function corAleatoria(){
        if(cor_atual == cores.length){
            return cor_atual = 0;
        } else {
            return cor_atual++;
        }
    }

    function criaComidas(){

        if(criarComida == false){
            var cor = corAleatoria();
            xComida = geraCordenadas(590);
            yComida = geraCordenadas(390);
            desenhaCirculo(xComida,yComida,raio,cores[cor]);
            criarComida = true;
        } else {
            cor = corAleatoria();
            desenhaCirculo(xComida,yComida,raio,cores[cor]);
        }
    }

    function comeuComida(){

        if((x < xComida + raio)
            && (x > xComida - raio)
            && (y < yComida + raio)
            &&(y > yComida - raio)) 
        {

            pontos++;
            document.getElementById("pontos").innerHTML = "Pontos: " + pontos;
            criarComida = false;

        }

    }

    function logicadecolisao(){
        if(x >= 600){
            perdeu = true;

        } else if(x <= 0){
            perdeu = true;

        } else if(y >= 400){
            perdeu = true;

        } else if(y <= 0){
            perdeu = true; 

        }
    }
    function etapasdojogo(){
        logicadecolisao();
        atualizaTela(x,y);
        comeuComida();
        criaComidas();
    }

    function comecaJogo(){
        if(comecou_jogo){
            if(perdeu){
                pontos = 0;
                document.getElementById("pontos").innerHTML = "Pontos: " + pontos;
                comecou_jogo = false;

            }
            if(apertou_direita){
                etapasdojogo();
                
                x = x + taxa;
            } else if(apertou_esquerda){
                etapasdojogo();
                
                x = x - taxa;
            } else if(apertou_cima){
                etapasdojogo();
                
                y = y - taxa;
            } else if(apertou_baixo){
                etapasdojogo();

                y = y + taxa;
            }
        }
    }

    setInterval(comecaJogo, 20);

    function resetaTeclado(){
        apertou_baixo = false;
        apertou_cima = false;
        apertou_esquerda = false;
        apertou_direita = false;

    }

    function leDoTeclado(evento) {
        resetaTeclado();
        
        if(enter == evento.keyCode) {
            comecou_jogo = true;
            apertou_direita = true;
            perdeu = false;
            criarComida = false;
            criaComidas();
            x = 20;
            y = 20;
        }
        if(esquerda == evento.keyCode){
            apertou_esquerda = true;

        } else if(direita == evento.keyCode){
            apertou_direita = true;

        } else if(baixo == evento.keyCode){
            apertou_baixo = true;

        } else if(cima == evento.keyCode){
            apertou_cima = true;

        }
    }


    
    document.onkeydown = leDoTeclado;

</script>