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

Jogo aperfeiçoado (placar, dificuldade e tela com resultado final)!

Boa tarde gente! :) Terminei o curso hoje mais cedo, mas acabei ficando um tempo a mais para aperfeiçoar esse jogo! O jogo, então, possui um placar e aumento do nível de dificuldade, além disso, possui também uma tela, no final, dizendo se o usuário ganhou ou não o jogo, vou deixar meu código aqui caso alguém se interesse em ver :):

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Tiro ao Alvo</title>
</head>
<body>
    </h3>
    <canvas id="screen" width="600" height="400"></canvas><br>
    <script>
        var screen = document.querySelector("#screen");
        var brush = screen.getContext("2d");

        var radius = 10;

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

        function drawDart(x, y) {
            drawCircle(x, y, radius + 20, "red");
            drawCircle(x, y, radius + 10, "white");
            drawCircle(x, y, radius, "red");
        }

        function dartPosition(max) {
                return Math.floor(Math.random() * max);
        }

        function clearPage() {
            brush.fillRect(0, 0, 600, 400);
        }

        var dificulty = 1000;
        function gameOn() {
            clearInterval(gameOn);
            dificulty += 200;
            var gameOn = setInterval(reloadPage, dificulty);
            dificulty += 1700;
        }

        var xPosition;
        var yPosition;

        function reloadPage() {
            if (level >= 0 && level < 10) {
                clearPage();
                brush.fillStyle = "lightgray";
                brush.fillRect(0, 0, 600, 400);
                brush.fillStyle = "black";
                brush.fillRect(500, 0, 110, 80);
                addText("SCORE", 520, 25);
                score();
                xPosition = dartPosition(600 - (100 + (radius + 20)));
                yPosition = dartPosition(400 - (radius + 20));
                if (xPosition < radius + 20) {
                    xPosition = radius + 20;
                } else if (yPosition < radius + 20){
                    yPosition = radius + 20;
                }
                drawDart(xPosition, yPosition);
            } else if (level >= 10) {
                endGame();
            }
        }

        var points = 0;
        var level = 0;

        function startGame(event) {
            if (level >= 0 && level < 10) {
                gameOn();
                var x = event.pageX - screen.offsetLeft;
                var y = event.pageY - screen.offsetTop;
                if ((x > xPosition - radius) && (x < xPosition + radius) && (y < yPosition + radius) &&(y > yPosition - radius)) {
                    level++;
                    alert("Great shot! Now you're on level " + level);
                    points++;
                } else {
                    points--;
                }
            } else if (level >= 10){
                endGame();
            }
        }

        function addText (text, x, y) {
            brush.font = "19px Georgia";
            brush.fillStyle = "gold";
            brush.fillText(text, x, y);
        }

        function score() {
            brush.font ="45px Georgia"
            brush.fillStyle = "gold";
            brush.fillText(points, 538, 60);
        }

        function endGame() {
            clearPage();
            brush.fillStyle = "black";
            brush.fillRect(0, 0, 600, 400);
            if (points >= 2) {
                addText("Congratulations, you won the game! Your score was " + points + " points", 50, 200);
            } else if (points == 1) {
                addText("Congratulations, you won the game! Your score was " + points + " point", 50, 200);
            } else if (points == 0) {
                addText("Good job! You finished with no points, but you still won the game :)", 18, 200);
            } else if (points < 0) {
                addText("You lost the game :(... try again!", 150, 200);
            }
        }

        screen.onclick = startGame;

        reloadPage();

    </script>
</body>
</html>
1 resposta
solução!

Boa tarde Anne Beatrice Crema Reginatto,

Gostei muito do código implementado, acredito que condiz com o proposto sobre a tarefa.

Caso você possuir alguma dúvida compartilha ela aqui conosco para que possamos lhe auxiliar e sanar suas dúvidas.

Ahh e não esquece de avaliar o tópico como solucionado caso esteja sanada a dúvida.

Abraço e até logo!!!