document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 600;
let level = 1;
let score = 0;
let gameOver = false;
const player = {
x: canvas.width / 2 - 25,
y: canvas.height - 100,
width: 50,
height: 50,
color: 'red',
speed: 7,
dx: 0,
};
const obstacles = [];
let obstacleSpeed = 2;
// Definizione degli ostacoli
const obstacleTypes = [
{ type: 'penna', color: 'blue', width: 20, height: 60 },
{ type: 'cartellina', color: 'green', width: 50, height: 40 },
{ type: 'foglio', color: 'white', width: 40, height: 40 }
];
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function createObstacle() {
const randomObstacle = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
const x = Math.random() * (canvas.width - randomObstacle.width);
obstacles.push({
x: x,
y: 0,
width: randomObstacle.width,
height: randomObstacle.height,
color: randomObstacle.color,
type: randomObstacle.type
});
}
function drawObstacles() {
obstacles.forEach((obstacle, index) => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
obstacle.y += obstacleSpeed;
if (obstacle.y > canvas.height) {
obstacles.splice(index, 1);
score++;
}
// Collisione tra il giocatore e l'ostacolo
if (
player.x < obstacle.x + obstacle.width &&
player.x + player.width > obstacle.x &&
player.y < obstacle.y + obstacle.height &&
player.y + player.height > obstacle.y
) {
gameOver = true;
document.getElementById('game-over').style.display = 'block';
}
});
}
function updateLevel() {
if (score >= level * 10) {
level++;
obstacleSpeed += 0.5;
document.getElementById('level-display').textContent = `Livello: ${level}`;
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function updatePlayerPosition() {
player.x += player.dx;
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
}
function update() {
if (!gameOver) {
clearCanvas();
drawPlayer();
drawObstacles();
updatePlayerPosition();
updateLevel();
requestAnimationFrame(update);
}
}
function moveRight() {
player.dx = player.speed;
}
function moveLeft() {
player.dx = -player.speed;
}
function stopMovement() {
player.dx = 0;
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') moveRight();
if (e.key === 'ArrowLeft') moveLeft();
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') stopMovement();
});
setInterval(createObstacle, 1000);
update();
});