canvas { background-color: #333; width: 100%; height: 100%; display: block; /* Prevents scrollbars */ }
#gameOverScreen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#gameOverScreen h1 { font-size: 3em; margin-bottom: 0.5em; }
#gameOverScreen p { font-size: 1.5em; } </jitFile> <jitFile type="file" filePath="script.js"> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const gameOverScreen = document.getElementById('gameOverScreen');
let gameRunning = true; let player = { x: 50, y: 0, // y will be set relative to canvas height in reset() width: 30, height: 30, velocityY: 0, gravity: 0.5, isJumping: false, color: 'lime', rotation: 0, // Rotation angle in radians rotationSpeed: 0.1 // Speed of rotation };
let obstacle = { x: 0, // x will be set relative to canvas width in reset() y: 0, // y will be set relative to canvas height in reset() width: 30, height: 30, speed: 5, color: 'red' };
let score = 0;
function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; reset(); }
function reset() { gameRunning = true; gameOverScreen.style.display = 'none'; player.y = canvas.height - 50; player.rotation = 0; // Reset rotation on game reset obstacle.y = canvas.height - 30; obstacle.x = canvas.width + 50; obstacle.speed = 5; player.gravity = 0.5; player.color = 'lime'; score = 0; }
function updatePlayer() { player.velocityY += player.gravity; player.y += player.velocityY;
if (player.isJumping) { player.rotation += player.rotationSpeed; // Rotate when jumping }
if (player.y > canvas.height - player.height) { player.y = canvas.height - player.height; player.velocityY = 0; player.isJumping = false; player.rotation = 0; // Reset rotation when landing } }
function updateObstacle() { obstacle.x -= obstacle.speed; if (obstacle.x < -obstacle.width) { obstacle.x = canvas.width + Math.random() * 200 + canvas.width/2; // Spawn further apart } }
function checkCollision() { 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 ) { gameRunning = false; gameOverScreen.style.display = 'flex'; // Show game over screen } }
function drawPlayer() { ctx.fillStyle = player.color; ctx.save(); // Save current canvas state ctx.translate(player.x + player.width / 2, player.y + player.height / 2); // Translate to player's center ctx.rotate(player.rotation); // Rotate around player's center ctx.fillRect(-player.width / 2, -player.height / 2, player.width, player.height); // Draw rectangle centered at origin ctx.restore(); // Restore canvas state }
function drawObstacle() { ctx.fillStyle = obstacle.color; ctx.beginPath(); ctx.moveTo(obstacle.x, obstacle.y + obstacle.height); // Bottom-left corner ctx.lineTo(obstacle.x + obstacle.width / 2, obstacle.y); // Top center ctx.lineTo(obstacle.x + obstacle.width, obstacle.y + obstacle.height); // Bottom-right corner ctx.closePath(); ctx.fill(); }
function drawScore() { ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + score.toFixed(0), 10, 30); // Display integer score }
function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayer(); drawObstacle(); drawScore(); }
function gameLoop() { if (gameRunning) { updatePlayer(); updateObstacle(); checkCollision(); score += 0.01; // Increment score over time draw(); } requestAnimationFrame(gameLoop); }
document.addEventListener('keydown', (event) => { if (event.code === 'Space') { if (!player.isJumping && gameRunning) { player.velocityY = -10; player.isJumping = true; } else if (!gameRunning) { reset(); // Restart the game } } });
window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // Initial canvas resize reset(); gameLoop(); *