Score hero! #1560
Comments
<title>Score Hero Simplificado - PC</title> <style> body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: black; } canvas { background-color: green; display: none; } #startScreen, #endScreen { text-align: center; font-size: 20px; font-family: Arial, sans-serif; color: white; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100%; } #startButton, #restartButton { padding: 10px 20px; font-size: 20px; cursor: pointer; margin-top: 20px; background-color: white; color: black; border: none; border-radius: 5px; } #message { display: none; text-align: center; font-size: 20px; font-family: Arial, sans-serif; color: white; position: absolute; top: 10px; width: 100%; } </style> Bem-vindo ao Jogo!Iniciar JogoFim de Jogo!Gols na partida: 0 Seu Recorde: 0 Jogar NovamenteDeslize para chutar a bola! Gols: 0
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const finalScoreElement = document.getElementById('finalScore');
const highScoreElement = document.getElementById('highScore');
const startScreen = document.getElementById('startScreen');
const endScreen = document.getElementById('endScreen');
const message = document.getElementById('message');
const startButton = document.getElementById('startButton');
const restartButton = document.getElementById('restartButton');
let ball = {
x: canvas.width / 2,
y: canvas.height - 100,
radius: 20,
color: 'white',
dx: 0,
dy: 0
};
let goal = {
x: getRandomGoalPosition(),
y: 50,
width: 120,
height: 30,
color: 'red',
speed: 2,
direction: 1
};
let score = 0;
let highScore = 0;
let isSwiping = false;
let startX, startY, endX, endY;
const difficultyIncrement = 5;
const movingGoalIncrement = 10;
let ballSpeedFactor = 1;
function getRandomGoalPosition() {
return Math.random() * (canvas.width - 120);
}
function startGame() {
startScreen.style.display = 'none';
endScreen.style.display = 'none';
message.style.display = 'block';
canvas.style.display = 'block';
score = 0;
scoreElement.innerText = score;
ballSpeedFactor = 1;
goal.speed = 2;
goal.direction = 1;
resetBallAndGoal();
gameLoop();
}
function endGame() {
canvas.style.display = 'none';
message.style.display = 'none';
endScreen.style.display = 'flex';
finalScoreElement.innerText = score;
if (score > highScore) {
highScore = score;
}
highScoreElement.innerText = highScore;
}
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
}
function drawGoal() {
ctx.fillStyle = goal.color;
ctx.fillRect(goal.x, goal.y, goal.width, goal.height);
}
function updateBall() {
ball.x += ball.dx * ballSpeedFactor;
ball.y += ball.dy * ballSpeedFactor;
if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width ||
ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
endGame();
return;
}
if (ball.y - ball.radius < goal.y + goal.height &&
ball.x > goal.x && ball.x < goal.x + goal.width) {
score++;
scoreElement.innerText = score;
resetBallAndGoal();
if (score > 5 && score % movingGoalIncrement === 0) {
goal.speed += 0.5;
}
if (score % difficultyIncrement === 0) {
ballSpeedFactor += 0.2;
}
}
}
function updateGoal() {
if (score > 5) {
goal.x += goal.direction * goal.speed;
if (goal.x <= 0 || goal.x + goal.width >= canvas.width) {
goal.direction *= -1;
}
}
}
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height - 100;
ball.dx = 0;
ball.dy = 0;
}
function resetBallAndGoal() {
resetBall();
goal.x = getRandomGoalPosition();
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawGoal();
updateBall();
updateGoal();
requestAnimationFrame(gameLoop);
}
canvas.addEventListener('mousedown', (e) => {
const rect = canvas.getBoundingClientRect();
startX = e.clientX - rect.left;
startY = e.clientY - rect.top;
if (Math.sqrt((startX - ball.x) ** 2 + (startY - ball.y) ** 2) < ball.radius) {
isSwiping = true;
}
});
canvas.addEventListener('mousemove', (e) => {
if (isSwiping) {
const rect = canvas.getBoundingClientRect();
endX = e.clientX - rect.left;
endY = e.clientY - rect.top;
}
});
canvas.addEventListener('mouseup', (e) => {
if (isSwiping) {
isSwiping = false;
const rect = canvas.getBoundingClientRect();
endX = e.clientX - rect.left;
endY = e.clientY - rect.top;
ball.dx = (endX - startX) * 0.05;
ball.dy = (endY - startY) * 0.05;
}
});
startButton.addEventListener('click', startGame);
restartButton.addEventListener('click', startGame);
</script>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: