diff --git a/Games/Rocket_Ride/README.md b/Games/Rocket_Ride/README.md new file mode 100644 index 0000000000..33669b51a1 --- /dev/null +++ b/Games/Rocket_Ride/README.md @@ -0,0 +1,32 @@ +# Rocket Ride + +## Description + +Rocket Ride is an exciting space-themed game where players control a rocket, dodging obstacles and collecting power-ups. Navigate through increasingly challenging terrain, manage your fuel, and aim for the highest score! + +## Features + +- Smooth, responsive rocket control +- Randomly generated obstacles +- Power-ups: fuel and score boosts +- Progressive difficulty +- High score tracking +- Parallax star background +- Frame-independent game logic + +## How to Play + +1. Open `index.html` in a modern web browser +2. Click "Start Game" on the title screen +3. Use ↑ and ↓ arrow keys to move the rocket +4. Avoid white obstacles +5. Collect green (fuel) and gold (score) power-ups +6. Survive as long as possible! + +## Installation + +No installation required. Simply clone the repository and open `index.html`: + +## Screenshots + +![image](https://github.com/user-attachments/assets/4676aa85-1c70-4ed2-8121-c4ddac562fbe) \ No newline at end of file diff --git a/Games/Rocket_Ride/index.html b/Games/Rocket_Ride/index.html new file mode 100644 index 0000000000..eee330bdc9 --- /dev/null +++ b/Games/Rocket_Ride/index.html @@ -0,0 +1,33 @@ + + + + + + Advanced Rocket Game + + + +
+ +
+
Score: 0
+
High Score: 0
+
Fuel: 100%
+
+
+

Game Over

+

Your Score:

+ +
+
+

Rocket Adventure

+ +
+

Use ↑ and ↓ arrows to move

+

Collect fuel cells and avoid obstacles

+
+
+
+ + + \ No newline at end of file diff --git a/Games/Rocket_Ride/script.js b/Games/Rocket_Ride/script.js new file mode 100644 index 0000000000..8fae94654e --- /dev/null +++ b/Games/Rocket_Ride/script.js @@ -0,0 +1,298 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +canvas.width = 800; +canvas.height = 600; + +const gameOverScreen = document.getElementById('gameOver'); +const startScreen = document.getElementById('startScreen'); +const scoreDisplay = document.getElementById('score'); +const highScoreDisplay = document.getElementById('highScore'); +const fuelDisplay = document.getElementById('fuel'); +const finalScoreDisplay = document.getElementById('finalScore'); +const restartButton = document.getElementById('restartButton'); +const startButton = document.getElementById('startButton'); + +let rocket, obstacles, powerUps, stars; +let score, highScore, fuel; +let obstacleSpeed, powerUpSpeed, obstacleInterval; +let gameRunning = false; +let lastTime = 0; +let keys = {}; +const SPEED = 300; // pixels per second + +class GameObject { + constructor(x, y, width, height, color) { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.color = color; + } + + draw() { + ctx.fillStyle = this.color; + ctx.fillRect(this.x, this.y, this.width, this.height); + } +} + +class Rocket extends GameObject { + constructor(x, y) { + super(x, y, 30, 60, 'red'); + } + + draw() { + ctx.fillStyle = this.color; + ctx.beginPath(); + ctx.moveTo(this.x, this.y + this.height); + ctx.lineTo(this.x + this.width / 2, this.y); + ctx.lineTo(this.x + this.width, this.y + this.height); + ctx.closePath(); + ctx.fill(); + + // Draw flames + ctx.fillStyle = 'orange'; + ctx.beginPath(); + ctx.moveTo(this.x, this.y + this.height); + ctx.lineTo(this.x + this.width / 2, this.y + this.height + 20); + ctx.lineTo(this.x + this.width, this.y + this.height); + ctx.closePath(); + ctx.fill(); + } +} + +class Obstacle extends GameObject { + constructor(x, y, width, height) { + super(x, y, width, height, 'white'); + this.type = Math.random() < 0.3 ? 'moving' : 'static'; + this.direction = Math.random() < 0.5 ? 1 : -1; + this.speed = Math.random() * 2 + 1; + } + + update(deltaTime) { + this.x -= obstacleSpeed * deltaTime; + if (this.type === 'moving') { + this.y += this.speed * this.direction * deltaTime; + if (this.y <= 0 || this.y + this.height >= canvas.height) { + this.direction *= -1; + } + } + } +} + +class PowerUp extends GameObject { + constructor(x, y) { + super(x, y, 20, 20, 'yellow'); + this.type = Math.random() < 0.3 ? 'fuel' : 'score'; + } + + update(deltaTime) { + this.x -= powerUpSpeed * deltaTime; + } + + draw() { + ctx.fillStyle = this.type === 'fuel' ? 'green' : 'gold'; + ctx.beginPath(); + ctx.arc(this.x + this.width / 2, this.y + this.height / 2, this.width / 2, 0, Math.PI * 2); + ctx.fill(); + } +} + +class Star { + constructor() { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.size = Math.random() * 2 + 1; + this.speed = Math.random() * 3 + 1; + } + + update(deltaTime) { + this.x -= this.speed * deltaTime; + if (this.x < 0) { + this.x = canvas.width; + this.y = Math.random() * canvas.height; + } + } + + draw() { + ctx.fillStyle = 'white'; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.fill(); + } +} + +function initGame() { + rocket = new Rocket(50, canvas.height / 2); + obstacles = []; + powerUps = []; + stars = Array(100).fill().map(() => new Star()); + score = 0; + fuel = 100; + obstacleSpeed = 200; // pixels per second + powerUpSpeed = 150; // pixels per second + obstacleInterval = 1500; +} + +function drawBackground() { + ctx.fillStyle = '#000020'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + stars.forEach(star => { + star.draw(); + }); +} + +function updateGame(currentTime) { + if (!gameRunning) return; + + const deltaTime = (currentTime - lastTime) / 1000; // Convert to seconds + lastTime = currentTime; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawBackground(); + + // Handle rocket movement + if (keys['ArrowUp']) { + rocket.y = Math.max(rocket.y - SPEED * deltaTime, 0); + } + if (keys['ArrowDown']) { + rocket.y = Math.min(rocket.y + SPEED * deltaTime, canvas.height - rocket.height); + } + + rocket.draw(); + + stars.forEach(star => star.update(deltaTime)); + + obstacles.forEach(obstacle => { + obstacle.update(deltaTime); + obstacle.draw(); + }); + powerUps.forEach(powerUp => { + powerUp.update(deltaTime); + powerUp.draw(); + }); + + // Remove off-screen obstacles and power-ups + obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0); + powerUps = powerUps.filter(powerUp => powerUp.x + powerUp.width > 0); + + // Check collisions + if (checkCollisions()) { + endGame(); + return; + } + + // Update score and fuel + score += Math.floor(50 * deltaTime); + fuel = Math.max(fuel - 5 * deltaTime, 0); + if (fuel <= 0) { + endGame(); + return; + } + + // Update UI + scoreDisplay.textContent = `Score: ${score}`; + fuelDisplay.textContent = `Fuel: ${Math.round(fuel)}%`; + + // Increase difficulty + if (score % 500 === 0 && score > 0) { + obstacleSpeed += 10; + powerUpSpeed += 5; + obstacleInterval = Math.max(obstacleInterval - 100, 500); + } + + requestAnimationFrame(updateGame); +} + +function checkCollisions() { + // Check obstacle collisions + for (let obstacle of obstacles) { + if ( + rocket.x < obstacle.x + obstacle.width && + rocket.x + rocket.width > obstacle.x && + rocket.y < obstacle.y + obstacle.height && + rocket.y + rocket.height > obstacle.y + ) { + return true; + } + } + + // Check power-up collisions + powerUps = powerUps.filter(powerUp => { + if ( + rocket.x < powerUp.x + powerUp.width && + rocket.x + rocket.width > powerUp.x && + rocket.y < powerUp.y + powerUp.height && + rocket.y + rocket.height > powerUp.y + ) { + if (powerUp.type === 'fuel') { + fuel = Math.min(fuel + 20, 100); + } else { + score += 100; + } + return false; + } + return true; + }); + + return false; +} + +function createObstacle() { + if (!gameRunning) return; + + const minHeight = 50; + const maxHeight = 200; + const height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight); + const y = Math.floor(Math.random() * (canvas.height - height)); + + obstacles.push(new Obstacle(canvas.width, y, 30, height)); +} + +function createPowerUp() { + if (!gameRunning) return; + + const y = Math.floor(Math.random() * (canvas.height - 20)); + powerUps.push(new PowerUp(canvas.width, y)); +} + +function startGame() { + initGame(); + gameRunning = true; + startScreen.style.display = 'none'; + gameOverScreen.style.display = 'none'; + lastTime = performance.now(); + requestAnimationFrame(updateGame); + setInterval(createObstacle, obstacleInterval); + setInterval(createPowerUp, 3000); +} + +function endGame() { + gameRunning = false; + finalScoreDisplay.textContent = score; + gameOverScreen.style.display = 'block'; + + if (score > highScore) { + highScore = score; + highScoreDisplay.textContent = `High Score: ${highScore}`; + localStorage.setItem('highScore', highScore); + } +} + +// Event listeners +document.addEventListener('keydown', (event) => { + keys[event.key] = true; +}); + +document.addEventListener('keyup', (event) => { + keys[event.key] = false; +}); + +restartButton.addEventListener('click', startGame); +startButton.addEventListener('click', startGame); + +// Load high score from local storage +highScore = localStorage.getItem('highScore') || 0; +highScoreDisplay.textContent = `High Score: ${highScore}`; + +// Show start screen +startScreen.style.display = 'block'; \ No newline at end of file diff --git a/Games/Rocket_Ride/style.css b/Games/Rocket_Ride/style.css new file mode 100644 index 0000000000..e0ed26254a --- /dev/null +++ b/Games/Rocket_Ride/style.css @@ -0,0 +1,65 @@ +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #000033; + font-family: Arial, sans-serif; + color: white; +} + +#gameContainer { + position: relative; + width: 800px; + height: 600px; +} + +#gameCanvas { + border: 2px solid white; + background-color: #000020; +} + +#uiOverlay { + position: absolute; + top: 10px; + left: 10px; + font-size: 18px; +} + +#uiOverlay > div { + margin-bottom: 5px; +} + +#gameOver, #startScreen { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(0, 0, 0, 0.8); + padding: 20px; + border-radius: 10px; + display: none; +} + +button { + font-size: 18px; + padding: 10px 20px; + margin-top: 20px; + cursor: pointer; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; +} + +button:hover { + background-color: #45a049; +} + +#instructions { + margin-top: 20px; + font-size: 14px; +} \ No newline at end of file