Método um pouco diferente. ( já com alvo se movendo) | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

5
respostas

por Isaque Moutta de Matos

| 87.4k xp | 8 posts

Olá dei uma checada no fórum para olhar os códigos dos nossos amigos mas dos que olhei, não achei um com a solução igual o meu, não sei se poderia dar algum problema, mas funcionou.

<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);

    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);
    }


    var x = 20;
function atualizaTela() {

    limpaTela();
    desenhaCirculo(x, 30, 30, "red");
    desenhaCirculo(x, 30, 20, "white");
    desenhaCirculo(x, 30, 10, "red");
    x++;
    if ( x >= 600) {
        x = 0;
    }
}

setInterval(atualizaTela,1);

</script>

Caso alguém ache algum possível erro para essa solução ficarei grato em saber :)

5 respostas

por Priscila Franco

| 130.4k xp | 25 posts

19/04/2022

Oi, tudo bem? não tem problema nenhum pelo que eu vi aqui. Cheguei a executar o seu código e ele funciona perfeitamente. Só tem duas diferenças: A primeira é que você tem três círculos se movendo simultaneamente (não que esteja errado); A segunda é que quando o x >= 600 eles voltam pra posição inicial ao invés de inverter o sentido, que é o que o professor tinha pedido.

Mas na primeira vez eu também tinha feito assim, sem interver o sentido hahaha

por Magno

| 97.4k xp | 11 posts

ESPECIALISTA ADMINISTRATIVO

22/04/2022

Fala meu chapa! Aproveitando sua ideia, implementei a função disparo para que o sistema reconheça quando acertarmos o alvo. Ficou assim:

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

<script>
    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');
    // pincel.fillStyle = 'lightgray';
    // pincel.fillRect(0, 0, 600, 400);
    let raio = 10;
    let x = 20;
    let y = 30;
    let cor = 'blue'
    let sentidoDireita = true;
    let tempoIntervalo = 5;

    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 atualizaTela() {
        limpaTela();

        desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, cor); // menor circulo

        if (x == 600 - (raio + 20)) {
            sentidoDireita = false;
            // cor = 'red'
        }
        else if (x == 0 + (raio + 20)) {
            sentidoDireita = true;
            // cor = 'blue'
        }
        if (sentidoDireita) {
            x++;
        }
        else {
            x--;
        }
    }

    var meuInterval = setInterval(atualizaTela, tempoIntervalo)

    function dispara(evento) {

        var xDisparo = evento.pageX - tela.offsetLeft;
        var yDisparo = evento.pageY - tela.offsetTop;

        if ((xDisparo >= (x - raio) && xDisparo <= (x + raio)) && (yDisparo >= (y - raio) && yDisparo <= (y + raio))) {
            alert("Acertou mizeravi!")
            clearInterval(meuInterval);
        }

    }

    tela.onclick = dispara;

</script>

por Isaque Moutta de Matos

| 87.4k xp | 8 posts

22/04/2022

Testei o código aqui Magno ficou show de bola mano parabéns :D

por Talilo Tarlison Passos De Araujo

| 247.1k xp | 91 posts

02/05/2022

Muito legal em ! Parabéns.

por Daniel Rodrigues Lopes

| 195k xp | 11 posts

Assistente de T.I.

06/05/2022

E fiz mais algumas mudanças, baseado nas ideias de vocês:

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <canvas width="600" height="400"></canvas>
</html>

<script type="text/javascript">
    var myCanvas = document.querySelector('canvas');
    var brush = myCanvas.getContext('2d');
    var screenWidth = myCanvas.width;
    var screenHeight = myCanvas.height;
    var hits = 0;
    var misses = 0;
    const bullseye = {
        radius: 0.000030 * (screenWidth * screenHeight),
        color: ['red', 'white'],
        X: screenWidth / 2,
        Y: screenHeight / 2,
        speedX: 0.4,
        speedY: 0.2
    };

    myCanvas.onclick = hitDetect;
    setInterval(updateScreen, 3);

    function drawCircle (X, Y, radius, color) {
        brush.beginPath();
        brush.fillStyle = color;
        brush.arc(X, Y, radius, 0, 2 * Math.PI);
        brush.fill();
    }

    function clearScreen () {
        brush.clearRect(0, 0, screenWidth, screenHeight);
        brush.fillStyle = 'black';
        brush.fillRect(0, 0, screenWidth, screenHeight);
        brush.fillStyle = 'white';
        brush.fillRect(2, 40, screenWidth - 4, screenHeight - 42);
    }

    function updateScreen () {
        clearScreen();
        showScore();
        bullseyeMovement();
        drawCircle(bullseye.X, bullseye.Y, bullseye.radius * 3, bullseye.color[0]);
        drawCircle(bullseye.X, bullseye.Y, bullseye.radius * 2, bullseye.color[1]);
        drawCircle(bullseye.X, bullseye.Y, bullseye.radius, bullseye.color[0]);
    }

    function bullseyeMovement () {
        if (bullseye.X - bullseye.radius * 3 >= 0 &&
            bullseye.X + bullseye.radius * 3 <= screenWidth) {
            bullseye.X += bullseye.speedX;
        }
        else {
            bullseye.speedX = -1 * bullseye.speedX;
            bullseye.X += bullseye.speedX;
        }
        if (bullseye.Y - bullseye.radius * 3 > 40 &&
            bullseye.Y + bullseye.radius * 3 < screenHeight) {
            bullseye.Y += bullseye.speedY;
        }
        else {
            bullseye.speedY = -1 * bullseye.speedY;
            bullseye.Y += bullseye.speedY;
        }
    }

    function hitDetect (element) {
        var X = element.pageX - myCanvas.offsetLeft;
        var Y = element.pageY - myCanvas.offsetTop;
        if (X <= bullseye.X + bullseye.radius && X >= bullseye.X - bullseye.radius &&
            Y <= bullseye.Y + bullseye.radius && Y >= bullseye.Y - bullseye.radius) {
            hits++;
            if (bullseye.speedX > 0) {
                bullseye.speedX += 0.1;
            } else { bullseye.speedX += -0.1}
        } else { misses++; }
    }

    function showScore () {
        brush.fillStyle = 'white';
        brush.font = '30px monospace, Arial';
        brush.fillText('Acertos: ' + hits, 70, 27);
        brush.fillStyle = 'white';
        brush.font = '30px monospace, Arial';
        brush.fillText('Erros: ' + misses, screenWidth - 220, 27);
    }
</script>