Jogo de campo minado

Olá pessoal.

Quero compartilhar um jogo que desenvolvi. O código do jogo utiliza conceitos de programação abordados no curso Lógica de Programação I e Logica de Programação II, este até o final do bloco 4, cursos aqui da Alura.

O jogo inicia-se da seguinte forma:

1 - No centro do canvas há um círculo na cor preta e este pode ser movimentado com o uso das setas do teclado;

2 - Em cada canto do canvas há um circulo colorido.

Objetivo do jogo:

1 - Levar o circulo preto que está no centro e sobrepô-lo a um dos círculos laterais, quando isso acontecer o círculo preto passa a ter a cor do círculo sobreposto.

Dificuldade do jogo:

1 - Os espaços em branco do canvas estão minados. Quando o circulo preto passar por uma mina ele ficará vermelho, ele ficara vermelho até que seja sobreposto a um círculo colorido.

Comentei o código.

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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    // variáveis do circulo de movimento
    var x = 300;
    var y = 200;
    var cor = "black";

    // armazena posições das bombas
    var bombasX = [];
    var bombasY = [];

    // gera as posições das bombas
    function geraBombasEixoX() {

        while (bombasX.length < 20) {

            var bomba = Math.round(Math.random() * 1000);

            if (bombasX.length == 0) {
                if (bomba > 30 && bomba < 570) {
                    bombasX.push(bomba);
                }
            }

            console.log(bombasX);

            var atribui = true;
            for (var i = 0; i < bombasX.length; i++) {

                if (bomba == bombasX[i]) {
                    atribui = false;
                }

            }

            if (bomba > 30 && bomba < 570 && atribui) {
                    bombasX.push(bomba);
            }
        }
    }

    // gera as posições das bombas
    function geraBombasEixoY() {

        while (bombasY.length < 20) {

            var bomba = Math.round(Math.random() * 1000);

            if (bombasY.length == 0) {
                if (bomba > 30 && bomba < 370) {
                    bombasY.push(bomba);
                }
            }

            console.log(bombasY);

            var atribui = true;
            for (var i = 0; i < bombasY.length; i++) {

                if (bomba == bombasY[i]) {
                    atribui = false;
                }

            }

            if (bomba > 30 && bomba < 370 && atribui) {
                bombasY.push(bomba);
            }
        }
    }

    // gera as bombas
    geraBombasEixoX();
    geraBombasEixoY();

    // coloca bombas no canvas
    function colocaBombas() {

        for (var i = 0; i < bombasX.length; i++) {

            pincel.fillStyle = "white";
            pincel.beginPath();
            pincel.arc(bombasX[i], bombasY[i], 10, 0, 2 * Math.PI);
            pincel.fill();
        }

    }

    // códigos do teclado
    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

    // taxa de incremento
    var taxa = 10;

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

    // cores das fase
    var topoEsquerdo = "yellow";
    var topoDireito = "green";
    var baixoEsquerdo = "blue";
    var baixoDireito = "orange";

    function desenhaTinteiro(x, y, raio, corTinteiro) {

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

    function limpaTela() {

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

    function atualizaTela() {

        limpaTela();


        colocaBombas();

        // desenha circulo no cento
        desenhaCirculo(x, y, 10, cor);

        // desenha circulo nas laterais
        desenhaTinteiro(20, 20, 10, topoEsquerdo);
        desenhaTinteiro(20, 380, 10, topoDireito);
        desenhaTinteiro(580, 20, 10, baixoEsquerdo);
        desenhaTinteiro(580, 380, 10, baixoDireito);

        // pinta o circulo
        if (x == 20 && y == 20) {
            cor = topoEsquerdo;
        } else if (x == 20 && y == 380) {
            cor = topoDireito;
        } else if (x == 580 && y == 20) {
            cor = baixoEsquerdo;
        } else if (x == 580 && y == 380) {
            cor = baixoDireito;
        }

        for (var i = 0; i < bombasX.length; i++) {
            if (x >= bombasX[i] - 20 && x <= bombasX[i] + 20) {
                if (y >= bombasY[i] - 20 && y <= bombasY[i] + 20) {
                    cor = "red";
                }
            }
        }
    }

    function leDoTeclado(evento) {

        if (evento.keyCode == 37) {
            if (x > 10) {
                x -= taxa;
            }
        } else if (evento.keyCode == 38) {
            if (y > 10) {
                y -= taxa;
            }
        } else if (evento.keyCode == 39) {
            if (x < 590) {
                x += taxa;
            }
        } else if (evento.keyCode == 40) {
            if (y < 390) {
                y += taxa;
            }
        }

        console.log(evento);
    }

    document.onkeydown = leDoTeclado;

    setInterval(atualizaTela, 20);



</script>