Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Jogo criado através do curso


<meta charset="utf-8" />

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

<script>

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

    var cores = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'silver', 'pink'];
    var corAtual = 0;
    var tamanho = 10;

    var tempo = 2500;
    var acertos = 0;

    function CriarTela()
    {
        pincel.beginPath();
        pincel.fillStyle = 'black';
        pincel.fillRect(0, 0, 1000, 600);
        pincel.fillStyle = 'white';
        pincel.fillRect(10, 10, 980, 580);
    }

    function Limpartela()
    {
        pincel.clearRect(0, 0, 1000, 600);
        CriarTela();
    }

    //function desenharCirculo(evento) 
    //{
    //    var x = evento.pageX - tela.offsetLeft;
    //    var y = evento.pageY - tela.offsetLeft;
    //    var shift = evento.shiftKey;
    //    var alt = evento.altKey;

    //    if (shift) { tamanho = tamanho + 10; }
    //    if (alt) {
    //        tamanho = tamanho - 10;
    //        if (tamanho < 10) { tamanho = 10;}
    //    }

    //    var ctrl = true; //evento.ctrlKey;

    //    if (ctrl)
    //    {
    //        pincel.beginPath();
    //        pincel.fillStyle = cores[corAtual];
    //        pincel.arc(x, y, tamanho, 0, 2 * Math.PI);
    //        pincel.fill();
    //    }

    //    corAtual++;
    //    if (corAtual == cores.length) { corAtual = 0; }
    //}

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

    function posicaoAleatoria(tamanho)
    {
        return Math.floor(Math.random() * tamanho);
    }

    function validaLimites(valor, tamanho)
    {
        var retorno = valor;

        if (valor < 40) { retorno = 40; }
        if (valor > (tamanho - 40)) { retorno = tamanho - 40; }

        return retorno;
    }

    var xAleatorio = 0;
    var yAleatorio = 0;

    function CriarAlvo()
    {
        Limpartela();

        xAleatorio = validaLimites(posicaoAleatoria(1000), 1000);
        yAleatorio = validaLimites(posicaoAleatoria(600), 600);

        //console.log(xAleatorio + ', ' + yAleatorio);

        desenharCirculo(xAleatorio, yAleatorio, 30, cores[corAtual]);
        desenharCirculo(xAleatorio, yAleatorio, 20, 'white');
        desenharCirculo(xAleatorio, yAleatorio, 10, cores[corAtual]);

        corAtual++;
        if (corAtual == cores.length) { corAtual = 0; }
    }

    function validaAcerto(evento)
    {
        var x = event.pageX - tela.offsetLeft;
        var y = event.pageY - tela.offsetTop;

        console.log(xAleatorio + ', ' + yAleatorio);
        console.log(x + ', ' + y);

        if ((x > xAleatorio - 30) && (x < xAleatorio + 30) && (y > yAleatorio - 30) && (y < yAleatorio + 30)) {
            acertos++;
            alert('Parabéns... ' + acertos + ' acerto(s)');
            tempo = tempo - 10;
            setInterval(CriarAlvo, tempo);
        }
    }

    CriarTela();
    setInterval(CriarAlvo, tempo);

    tela.onclick = validaAcerto;

</script>
2 respostas
solução!

Oi Avelar!

Bom dia. Fique atento para a convenção de nomes de função e variáveis começarem com letra minúscula. Blz?

Flavio, boa noite!! Ok, ficarei atento com as convenções.