Fiz o Jogo do Cobrinha .... Versão III

Essa está mais interessante.

Novidades:

• O jogo interage com o usuário para saber qual a velocidade que ele quer.
• Tem barreiras que tornam o jogo mais difícil.

Melhorias para próximas versões:

• fazer versões do jogo em fácil, intermediário e difícil.

Espero ter ajudado. Sucesso na sua jornada!!

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");


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

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

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

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

    function desenharBorda() {

        pincel.fillStyle = "black";
        pincel.fillRect (0, 0, 600, 10); // topo
        pincel.fillRect (0, 0, 10, 400); // esquerda
        pincel.fillRect (0, 390, 600, 10); //fundo
        pincel.fillRect (590, 0, 10, 400); // direita

    }

    function blocosNivelHard(){
        pincel.fillStyle = "black";
        pincel.fillRect (100, 100, 130, 10); // 1 esq
        pincel.fillRect (150, 200, 40, 110); // 2 esq
        pincel.fillRect (400, 120, 120, 20); // 1 dir
        pincel.fillRect (430, 220, 30, 100); // 2 dir

    }

    function limparTela () {

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

    var xa = Math.round(Math.random()*600);
        while (xa >= 0 && xa <= 20 || xa >= 580 && xa <= 600 || xa >= 85 && xa <= 245 || xa >= 135 && xa <= 205 || xa >= 385 && xa <= 535 || xa >= 415 && xa <= 475){
            xa = Math.round(Math.random()*600);
        }

    var ya = Math.round(Math.random()*400);
        while (ya >= 0 && ya <= 20 || ya >= 380 && ya <= 400 || ya >= 85 && ya <= 125|| ya >= 185 && ya <= 325 || ya >= 105 && ya <= 155 || ya >= 205 && ya <= 335){
            ya = Math.round(Math.random()*400);
        }

    var velocidade = prompt("Digite a velocidade entre 1 (mais rápido) e 10 (mais devagar).");
        while (velocidade == 0 || velocidade >10){
            velocidade = prompt("Digite a velocidade entre 1 e 10");
        }

    //var xa = 475;

    //var ya = 205; 



    var x = 300;

    var y = 200;

    var começar = true;

    function cobrinha(){

        if (começar) {                    
                    if (x == 19 || x == 581 || y == 19 || y == 381){
                            começar = false;
                            pincel.fillStyle = "red"
                            pincel.fillRect (10, 10, 580, 380);
                            pincel.fillStyle = "white";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("# Ops, Você Perdeu! #", 150, 200);

                    }

                    else if (x >= 91 && x <= 239 && y >= 91 && y <= 119){ // pincel.fillRect (100, 100, 130, 10); // 1 esq
                            começar = false;
                            pincel.fillStyle = "red"
                            pincel.fillRect (10, 10, 580, 380);
                            pincel.fillStyle = "white";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("# Ops, Você Perdeu! #", 150, 200);
                    }

                    else if (x >= 141 && x <= 199 && y >= 191 && y <= 319){ // pincel.fillRect (150, 200, 40, 110); // 2 esq
                            começar = false;
                            pincel.fillStyle = "red"
                            pincel.fillRect (10, 10, 580, 380);
                            pincel.fillStyle = "white";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("# Ops, Você Perdeu! #", 150, 200);
                    }

                    else if (x >= 391 && x <= 529 && y >= 111 && y <= 149){ //  pincel.fillRect (400, 120, 120, 20); // 1 dir
                            começar = false;
                            pincel.fillStyle = "red"
                            pincel.fillRect (10, 10, 580, 380);
                            pincel.fillStyle = "white";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("# Ops, Você Perdeu! #", 150, 200);
                    }

                    else if (x >= 421 && x <= 469 && y >= 211 && y <= 329){ //  pincel.fillRect (430, 220, 30, 100); // 2 dir
                            começar = false;
                            pincel.fillStyle = "red"
                            pincel.fillRect (10, 10, 580, 380);
                            pincel.fillStyle = "white";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("# Ops, Você Perdeu! #", 150, 200);
                    }


                    else if (x >= xa - 10 && x <= xa + 10 && y >= ya - 10 && y <= ya + 10){
                            começar = false;
                            pincel.fillStyle = "green"
                            pincel.fillRect (10, 10, 580, 380);
                            pincel.fillStyle = "white";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("Parabéns, você acertou!!!", 130, 200);
                    }
        else {

            limparTela ();
            desenharCirculos (x, y, 10, "blue");
            desenharAlvo(xa, ya, 8, "red");
            desenharBorda();
            blocosNivelHard();

                if (tecla == 37){ //esquerda
                    x = x - 1;
                }
                if (tecla == 38){ //cima
                    y = y - 1;
                    x
                }
                if (tecla == 39){ //direta
                    x = x + 1;
                    y
                }
                if (tecla == 40){ //baixo
                    y = y + 1;
                    x
                }
        }
    }                
}

    setInterval (cobrinha, velocidade);
    //setInterval (cobrinha, 3);

    var tecla = 0;
    function leDoTeclado(evento) {    
        tecla = evento.keyCode;        
    }    
    document.onkeydown = leDoTeclado;
</script>