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>