Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] [Concluído] - Inserindo Modo de Dificuldade (Jogo do Alvo)

Caso alguém queria deixar o joguinho interessante e inserir um modo de dificuldade abaixo está o código completo, qualquer dúvida é só me perguntar estou lá no discord como Sullivan#2036 :D

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

<select id="escolher">
    <option value="">--Selecione a Dificuldade--</option>
    <option value="facil">Fácil</option>
    <option value="medio">Médio</option>
    <option value="dificil">Difícil</option>
    <option value="god">GodClick</option>
</select>

<button id="selecionar">Selecionar</button>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var xRandomAlvo, yRandomAlvo; //posições aleatorias
    var raio = 10;

    var dificuldade = [1500, 1000, 800, 500]; //nivel de repetição do setInterval
    var facil, medio, dificil, god; //utilizadas para cancelar o setInterval

    //lista de escolha
    var select = document.getElementById('escolher');
    var button = document.getElementById('selecionar');

    //Configs da tela de pintura
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStroke = 'black';
    pincel.strokeRect(0, 0, 600, 400);

    //gerar o circulo
    const desenhaCirculo = (x, y, raio, cor) => {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }
    //gerar posições aleatoriamente
    const sorteiaPosicao = maximo => {
        return Math.floor(Math.random() * maximo);
    }

    //utilizar circulo aleatoriamente
    const alvo = (x, y) => {
        desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, 'red'); // menor circulo
    }

    //limpar o alvo sempre que for atualizado, senão ficará vários alvos sobrescritos
    const limpaTela = () => {
        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStroke = 'black';
        pincel.strokeRect(0, 0, 600, 400);
    }

    //utilizar a função alvo para atualizar sozinha automaticamente
    const atualizaAlvo = () => {
        limpaTela();
        xRandomAlvo = sorteiaPosicao(600);
        yRandomAlvo = sorteiaPosicao(400);
        alvo(xRandomAlvo, yRandomAlvo);        
    }

    //resetar o setinterval, para evitar sobrescrita do alvo
    const resetaDificuldade = (dif1, dif2, dif3) => {
        clearInterval(dif1);
        clearInterval(dif2);
        clearInterval(dif3);
    }

    //evento para atribuir a dificuldade ao clicar no botão de selecionar
    button.addEventListener('click', (evento) => {
        switch (select.value) {
            case 'facil':
                resetaDificuldade(medio, dificil, god);
                facil = setInterval(atualizaAlvo, dificuldade[0]);
                break;
            case 'medio':
                resetaDificuldade(facil, dificil, god);
                medio = setInterval(atualizaAlvo, dificuldade[1]);
                break;
            case 'dificil':
                resetaDificuldade(facil, medio, god);
                dificil = setInterval(atualizaAlvo, dificuldade[2]);
                break;
            case 'god':
                resetaDificuldade(facil, medio, dificil);
                god = setInterval(atualizaAlvo, dificuldade[3]);
                break;
            default:
                break;
        }
    });

    //clique do mouse no alvo
    tela.onclick = (evento) => {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if (x > xRandomAlvo - raio && x < xRandomAlvo + raio &&
            y > yRandomAlvo - raio && y < yRandomAlvo + raio) {
            alert(`Acertou!`);
       }
    }
</script>
1 resposta
solução!

Opa Erivaldo, tudo ok por aí?

Gostaria de agradecer a paciência em obter um retorno aqui no fórum!

Sobre o seu projeto e a implementação dos níveis de dificuldade eu gostaria de dizer somente uma coisa:

MEUS MAIS SINCEROS PARABÉNS!

Eu estou maravilhado, confesso que fiquei um bom tempo tentando acertar o alvo no módulo “GodClick” que você implementou, e mesmo assim não consegui acertar……….

Enfim, mas eu realmente gostaria de lhe parabenizar, seu código está muito bom, ao ler ele eu consegui perceber o esforço e a dedicação suas nele, sinceramente é um jogo maravilhoso de jogar, muito cativante ele.

O código está organizado, bem indentado, bem estruturado, e tudo mais!

Parabéns novamente!

Continue com essa dedicação pois assim você vai conseguir ir muito mais longe, e fazer muito mais coisas incríveis como essa!

Um enorme abraço e bons estudos!