Untitled
unknown
javascript
a month ago
37 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Future Stick Game</title> <style> body, html { margin: 0; padding: 0; height: 100%; } canvas { display: block; margin: 0 auto; background-color: #f4f4f4; } </style> </head> <body> <canvas id="gameCanvas"></canvas> <script src="game.js"></script> </body> </html> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Canvas size canvas.width = 800; canvas.height = 600; // Variables for game elements let player, obstacles = [], score = 0; let isGameOver = false; // Player object class Player { constructor() { this.width = 50; this.height = 50; this.x = 100; this.y = canvas.height - this.height - 30; this.speed = 5; this.dy = 0; this.jumpHeight = -15; } update() { this.y += this.dy; if (this.y < canvas.height - this.height - 30) { this.dy += 1; // gravity effect } else { this.y = canvas.height - this.height - 30; // reset to ground this.dy = 0; } this.draw(); } draw() { ctx.fillStyle = 'blue'; ctx.fillRect(this.x, this.y, this.width, this.height); } jump() { if (this.y === canvas.height - this.height - 30) { this.dy = this.jumpHeight; } } } // Obstacle object class Obstacle { constructor() { this.width = 50; this.height = 50; this.x = canvas.width; this.y = canvas.height - this.height - 30; this.speed = 4; } update() { this.x -= this.speed; if (this.x < 0) { this.x = canvas.width; this.height = Math.random() * 50 + 50; // random height for variety score++; } this.draw(); } draw() { ctx.fillStyle = 'red'; ctx.fillRect(this.x, this.y, this.width, this.height); } } // Initialize player player = new Player(); // Handle user input for jumping document.addEventListener('keydown', (e) => { if (e.code === 'Space' && !isGameOver) { player.jump(); } }); // Game loop function gameLoop() { if (isGameOver) return; ctx.clearRect(0, 0, canvas.width, canvas.height); // Update and draw player player.update(); // Generate obstacles if (Math.random() < 0.02) { obstacles.push(new Obstacle()); } // Update obstacles obstacles.forEach((obstacle, index) => { obstacle.update(); // Collision detection 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) { isGameOver = true; } // Remove off-screen obstacles if (obstacle.x + obstacle.width < 0) { obstacles.splice(index, 1); } }); // Display score ctx.font = '20px Arial'; ctx.fillStyle = 'black'; ctx.fillText('Score: ' + score, 10, 30); requestAnimationFrame(gameLoop); } // Start the game loop gameLoop();
Editor is loading...
Leave a Comment