LogicaDeProgramacao2/jogo.html at master · iAlfredoMiranda/LogicaDeProgramacao2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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>