4
respostas

Implemente seu primeiro jogo com bônus e tempo - solução

Boa tarde pessoal, estou enviando minha solução do joguinho acrescentei um bônus(número de tentativas) e número de tempo, espero possam curtir.

<h1>Disparando contra o alvo</h1>
<h2 class="textoIntento">Bônus: <span>5 </span></h2>
<h2 class="time">Tempo: <span>60 </span></h2>
<canvas width="600" height="400"></canvas>

<script>

    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');
    let textoIntento = document.querySelector('.textoIntento span');
    let seg = document.querySelector('.time span')

    let raio = 10;
    let xA, yA;
    let segNum = 60;
    let INTERVALO;

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);


    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 desenhaAlvo(x, y) {
        desenhaCirculo(x, y, raio + 20, 'red');
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, 'red');
    }

    function atualizaTela() {
        limpaTela();
        xA1 = Math.round(Math.random() * 540 + 30);
        yA1 = Math.round(Math.random() * 340 + 30);

        desenhaAlvo(xA1, yA1);
    }


    function segundos() {
        segNum--;
        seg.innerHTML = `${segNum}`;
        if (segNum === -1) {
            alert('Tempo acabou!!');
            clearInterval(INTERVALO);
            segNum = 60;
            seg.innerHTML = `${segNum}`;
            iniciar();
        }
    }

    function iniciar() {
        clearInterval(INTERVALO);
        INTERVALO = setInterval(segundos, 1000);
    }
    iniciar();

    setInterval(atualizaTela, 1000);

    let cont = 1;
    let bonus = 5;
    function dispara(e) {
        let xM = e.pageX - tela.offsetLeft;
        let yM = e.pageY - tela.offsetTop;

        if (xM <= xA1 + raio && xM >= xA1 - raio) {
            if (yM <= yA1 + raio && yM >= yA1 - raio) {
                alert(`PARABÉNS!!! Você acertou!!! com ${cont} tentativa(s).`);
                cont = 1;
                bonus = 5;
                clearInterval(INTERVALO);
                segNum = 60;
                seg.innerHTML = `${segNum}`;
                iniciar();
            }
        } else {
            cont++;
            bonus--;
        }

        textoIntento.innerHTML = `${bonus}`;

        if (bonus === -1) {
            alert('Você perdeu!!!!!!!!!!!!!! ficou sem bônus.');
            cont = 1;
            textoIntento.innerHTML = `5`;
            bonus = 5;
            clearInterval(INTERVALO);
            segNum = 60;
            seg.innerHTML = `${segNum}`;
            iniciar();
        }

    }

    tela.addEventListener('click', dispara);

</script>
4 respostas

Ficou muito bom, parabens.

Obrigado Claudney!

José, primeiramente meus parabéns! Ficou tão bom que copiei aqui e comecei a trabalhar no seu código.

Fiz umas modificações e deixei assim:

<h1>Disparando contra o alvo</h1>
<h2 class="textoIntento">Tentativas: <span>5 </span></h2>
<h2 class="time">Tempo: <span>10 </span></h2>
<canvas width="600" height="400" style="border:1px solid #000000;"></canvas>

<script>

    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');
    let textoIntento = document.querySelector('.textoIntento span');
    let seg = document.querySelector('.time span')

    let raio = 10;
    let segNum = 10;
    let tentativas = 5;
    let cont = 1;
    let INTERVALO;

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function reseta() {
        //clearInterval(INTERVALO);
        segNum = 10;
        tentativas = 5;
        textoIntento.innerHTML = `${tentativas}`;
        seg.innerHTML = `${segNum}`;
        iniciar();
    }

    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 desenhaAlvo(x, y) {

        desenhaCirculo(x, y, raio + 20, 'red');
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, 'red');
    }

    function atualizaTela() {

        limpaTela();
        xA1 = Math.round(Math.random() * 540 + 30);
        yA1 = Math.round(Math.random() * 340 + 30);
        desenhaAlvo(xA1, yA1);
    }

    function segundos() {

        segNum--;
        seg.innerHTML = `${segNum}`;
        if (segNum == -1) {
            alert('Tempo acabou!!');
            reseta();
        }
    }

    function iniciar() {

        clearInterval(INTERVALO);
        INTERVALO = setInterval(segundos, 1000);
    }

    function dispara(e) {

        let xM = e.pageX - tela.offsetLeft;
        let yM = e.pageY - tela.offsetTop;

        if (xM <= xA1 + raio && xM >= xA1 - raio) {
            if (yM <= yA1 + raio && yM >= yA1 - raio) {
                alert(`PARABÉNS!!! Você acertou!!! com ${cont} tentativa(s).`);
                cont = 1;
                reseta();
            }
        } else {
            cont++;
            tentativas--;
        }

        textoIntento.innerHTML = `${tentativas}`;

        if (tentativas == 0) {
            alert('Você perdeu!! ficou sem tentativas.');
            cont = 1;
            reseta();
        }

    }

  iniciar();
    atualizaTela();
    setInterval(atualizaTela, 1000);

    tela.addEventListener('click', dispara);

</script>

Espero que goste, um abraço!

Opa! Valeu Samir ficou ótimo!!