Fiz o Jogo do Cobrinha .... Ainda é Versão 0

Galera,

Tive um trabalho monstruoso para conseguir fazer esse jogo do pacman .... GZUIS

Começando agora, então a gente apanha mesmo. kkk

Mas saiu!!

Para quem quiser jogar:

Para virar a ESQUERDA da bola: botão ESQUERDO

Para virar a DIREITA da bola: Botão DIREITO

Essa é a versão ZERO, pois o jogo ainda não está pronto. Ainda irei corrigir alguns erros como, por exemplo:

1) o bolinha azul que sai da tela e se perde;

2) o sentido do clique as vezes faz voltar. Dependendo da direção da bolinha quando clica para esquerda ou direita ele faz voltar e não virar para a direção escolhida;

3) mudar a posição da bolinha vermelha para iniciar em local diferente a cada atualização.

4) automatizar o reconhecimento do novo ponto da bolinha vermelha para poder identificar que acertou.

5) e outros problemas que eu achar ou que vocês acharem.

Quem tiver ideia e dicas pode mandar. Irei deixar o fórum aberto para ir recebendo essas dicas. Irei postar as versões atualizadas no fórum da aula que eu tiver terminado a versão. Mas tentarei postar aqui o link que remete a essa atualização.

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 limparTela () {

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


    var direcaoBotaoEsquerdo = [1, 2, 3, 4, 5];

    var direcaoBotaoDireta = [6, 7, 8, 9, 10];

    var positionE = 0;

    var positionD = 2;

    var x = 300;

    var y = 200;

    var paraEsquerda = true;
    var paraDireita = false;

    var começar = true;

    function iniciar(){

        setInterval (pacman, 10);
    }

    function botaoEsquerdo() {
            positionE++;
            paraEsquerda = true;
            paraDireita = false;
        }

    function botaoDireito (){
            positionD++;
            paraDireita = true;
            paraEsquerda = false;
            return false;
    }

    function pacman(){

        if (começar) {

                    if (x >= 190 && x <= 210 && y >= 90 && y <= 110){
                            começar = false;
                            pincel.fillStyle = "red";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("Parabéns, você acertou!", 50, 50);
                    } else {

                            if (paraEsquerda) {

                                if (positionE == 5){
                                    positionE = 1;
                                }

                                if (direcaoBotaoEsquerdo[positionE] == 1){
                                    x++;
                                }

                                if (direcaoBotaoEsquerdo[positionE] == 2){
                                    y = y - 1;
                                }

                                if (direcaoBotaoEsquerdo[positionE] == 3){
                                    x = x - 1;
                                }

                                if (direcaoBotaoEsquerdo[positionE] == 4){
                                    y++;
                                }

                                if (direcaoBotaoEsquerdo[positionE] == 5){
                                    x++;
                                }
                                limparTela ();
                                desenharCirculos (x, y, 10, "blue");            
                                desenharCirculos (200, 100, 8, "red");
                            }
                    }

                    if (x >= 190 && x <= 210 && y >= 90 && y <= 110){
                            começar = false;
                            pincel.fillStyle = "red";
                            pincel.font = "30px Georgia"
                            pincel.fillText ("Parabéns, você acertou!", 50, 50);
                    } else {

                            if (paraDireita) {
                                if (positionD == 5){
                                    positionD = 1;
                                }

                                if (direcaoBotaoDireta[positionD] == 6){
                                    x++;
                                }

                                if (direcaoBotaoDireta[positionD] == 7){
                                    y++;
                                }

                                if (direcaoBotaoDireta[positionD] == 8){
                                    x = x - 1;
                                }

                                if (direcaoBotaoDireta[positionD] == 9){
                                    y = y -1;
                                }

                                if (direcaoBotaoDireta[positionD] == 10){
                                    x++;
                                }
                                limparTela ();
                                desenharCirculos (x, y, 10, "blue");
                                desenharCirculos(200, 100, 8, "red");
                            }

                    }

        } else {
            return começar = false;
        }
    }

    iniciar ();

    tela.onclick = botaoEsquerdo;

    tela.oncontextmenu = botaoDireito;


</script>