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

Sobre aprimorar o jogo...

Quero colocar modos no jogo(Fácil, intermediário e difício) com botões, porém não estou conseguindo acessar os botões...

<canvas width="1200" height="600"></canvas>
<p><b>Modo de jogo: </b><button>Fácil</button><button>Intermediário</button><button>Difícil</button></p>
<script>
    var botao=document.querySelector("button");
    var tela = document.querySelector("canvas")
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 1200, 600);

    var raio = 10;
    var xAleatorio;
    var yAleatorio;

    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, 1200, 600)
    }

    function desenhaAlvo(x, y) {
        desenhaCirculo(x, y, raio + 20, "red");
        desenhaCirculo(x, y, raio + 10, "white");
        desenhaCirculo(x, y, raio, "red");
    }

    function sorteiaPosicao(maximo) {
        return Math.floor(Math.random() * maximo);
    }

    function atualizaTela() {
        limpaTela();
        xAleatorio = sorteiaPosicao(600);
        yAleatorio = sorteiaPosicao(400);
        desenhaAlvo(xAleatorio, yAleatorio);
    }
    if(botao.value("Fácil")){
    setInterval(atualizaTela, 2000);
    }
    else if(botao.value("Intermediário")){
        setInterval(atualizaTela, 1000);
    }
    else if(botao.value("Difícil")) {
        setInterval(atualizaTela, 500);
    }
    function dispara(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if ((x > xAleatorio - raio) && (x < xAleatorio + raio) && (y > yAleatorio - raio) && (y < yAleatorio + raio)) {
            alert("Parabéns, você acertou!")
        }
        else if ((x > xAleatorio - (raio + 20)) && (x < xAleatorio + (raio + 20)) && (y > yAleatorio - (raio + 20)) && (y < yAleatorio + (raio + 20))) {
            alert("Foi por pouco!")
        }
        else {
            alert("Errou!")
        }
    }
    tela.onclick = dispara
</script>
1 resposta
solução!

Opa Guilherme, tudo bem com você ?

Peço desculpas pelo retorno tardio!

Em resposta ao seu tópico primeiramente eu gostaria de elogiar o seu código, pois ele está muito bem construído, contudo como você deseja fazer a criação de níveis de dificuldade isso envolve algumas coisas que provavelmente você ainda não viu.

Mas para lhe ajudar eu vou mostrar uma forma bem simples de adicionar essa função de níveis de dificuldade usando o código que você disponibilizou em seu post.


Primeiramente em seu código você deve adicionar o parâmetro onclick dentro da tag button lá no começo, no “mundo HTML” e deve dar nomes legíveis e diferentes para cada botão, isso pode ser feito dessa forma:

<p><b>Modo de jogo: </b><button onclick="botaoFacil()">Fácil</button><button onclick="botaoMedio()">Intermediário</button><button onclick="botaoDificil()">Difícil</button></p>

OBS: Gostaria de ressaltar que quando você estiver trabalhando com texto junto de outro objeto especial, como por exemplo imagens, botões, caixas de input para texto ou números, ou coisas desse tipo é aconselhável colocar todos eles dentro de um tag div ou dentro de uma section pois essas tag´s indicam separação de conteúdo, e caso seu “mundo HTML” cresça, você vai precisar se localizar bem nele, e essas duas tag´s ajudam muito com isso! Com essa tag ele ficaria mais ou menos assim:

<div>
    <p><b>Modo de jogo: </b></p>
    <button onclick="botaoFacil()">Fácil</button><button onclick="botaoMedio()">Intermediário</button><button onclick="botaoDificil()">Difícil</button>
</div>

Continuando a resolução, após você adicionar o parâmetro onclick dentro das tag´s button agora você vai precisar transformar os if´s, else if´s que estão lá no final do código em funções, para tal você pode fazer algo nesse sentido:

//Essa parte você pode usar como base para a construção do outro:
 /* if(botao.value("Fácil")){
    setInterval(atualizaTela, 2000);
    }
    else if(botao.value("Intermediário")){
        setInterval(atualizaTela, 1000);
    }
    else if(botao.value("Difícil")) {
        setInterval(atualizaTela, 500);
    } */

    //Esse é um exemplo de como pode ser feito:
    function botaoFacil() {
        setInterval(atualizaTela, 2000);
    }

    function botaoMedio() {
        setInterval(atualizaTela, 1000);
    }

    function botaoDificil() {
        setInterval(atualizaTela, 500);
    }

Você pode usar os if´s e os else if´s que você já tinha construído antes para transformar nas function´s. Você pode adaptar a parte fora dos colchetes e manter o conteúdo de dentro dos colchetes e economizar tempo e caracteres.

Após isso você pode remover uma parte que não será mais precisa nesse método que é essa linha aqui:

var botao = document.querySelector("button");

Pois ela não irá ser de grande ajuda no momento. Você pode comentar ela também se preferir, caso deseje continuar trabalhando nesse projeto e queira implementar algo que pode fazer o uso dela.


Com isso você terá completado a adição de níveis de dificuldade, então você somente precisa usar os botões para disparar o jogo e iniciar o jogo e caso queira trocar a dificuldade é só recarregar a página!

Deixo também a documentação do parâmetro onclick que foi usado nessa resolução disponível para que dê um olhada:

Em geral era isso, espero ter ajudado um pouco, caso tenha mais alguma dúvida recorra ao fórum!

Um abraço e bons estudos.

Caso este post tenha lhe ajudado, por favor marcar como solução! ✓.