CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Raid 5678</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.riverraid5678-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.riverraid5678-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.riverraid5678-game-area {
border: 2px solid #333;
}
.riverraid5678-info {
max-width: 300px;
}
.riverraid5678-button {
margin: 10px 0;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.riverraid5678-button:hover {
background-color: #45a049;
}
@media (max-width: 768px) {
.riverraid5678-container {
flex-direction: column;
align-items: center;
}
.riverraid5678-info {
order: 2;
}
}
</style>
</head>
<body class="riverraid5678-body">
<div class="riverraid5678-container">
<div class="riverraid5678-info">
<h1><i class="fas fa-fighter-jet"></i> River Raid 5678</h1>
<p>Navigate your aircraft through dangerous waters, destroy enemies and bridges, and manage your fuel!</p>
<h3>Instructions:</h3>
<ul>
<li><i class="fas fa-arrows-alt"></i> Use arrow keys to move</li>
<li><i class="fas fa-space-shuttle"></i> Press spacebar to shoot</li>
<li><i class="fas fa-gas-pump"></i> Collect fuel tanks to refill</li>
<li><i class="fas fa-star"></i> Collect stars for temporary invincibility</li>
<li><i class="fas fa-bolt"></i> Collect lightning for rapid fire</li>
<li><i class="fas fa-archway"></i> Shoot bridges to destroy them</li>
<li><i class="fas fa-skull-crossbones"></i> Destroy enemy ships and helicopters</li>
</ul>
<button id="startButton" class="riverraid5678-button"><i class="fas fa-play"></i> Start Game</button>
<button id="newGameButton" class="riverraid5678-button" style="display: none;"><i class="fas fa-redo"></i> New Game</button>
<button id="pauseButton" class="riverraid5678-button" style="display: none;"><i class="fas fa-pause"></i> Pause</button>
</div>
<canvas id="gameCanvas" class="riverraid5678-game-area" width="400" height="600"></canvas>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const pauseButton = document.getElementById('pauseButton');
let game = {
player: { x: 200, y: 550, width: 30, height: 30, speed: 5 },
enemies: [],
bullets: [],
terrain: [],
bridges: [],
powerUps: [],
fuel: 100,
score: 0,
multiplier: 1,
consecutiveHits: 0,
isGameOver: false,
isPaused: false,
difficulty: 1,
isInvincible: false,
invincibilityTimer: 0,
isRapidFire: false,
rapidFireTimer: 0
};
function generateTerrain() {
const terrainWidth = 50 + Math.random() * 50;
game.terrain.push({ x: 0, y: -600, width: terrainWidth, height: 600 });
game.terrain.push({ x: 400 - terrainWidth, y: -600, width: terrainWidth, height: 600 });
}
function generateBridge() {
game.bridges.push({ x: 0, y: -50, width: 400, height: 20, health: 3 });
}
function generateEnemy() {
const type = Math.random() < 0.7 ? 'ship' : 'helicopter';
const x = 100 + Math.random() * 200;
game.enemies.push({ x, y: -30, width: 30, height: 30, type });
}
function generatePowerUp() {
const x = 50 + Math.random() * 300;
const type = Math.random() < 0.5 ? 'invincibility' : 'rapidFire';
game.powerUps.push({ x, y: -30, width: 20, height: 20, type });
}
function drawPlayer() {
ctx.fillStyle = game.isInvincible ? 'gold' : 'blue';
ctx.font = '30px FontAwesome';
ctx.save();
ctx.translate(game.player.x + 15, game.player.y + 15);
ctx.rotate(-Math.PI / 2);
ctx.fillText('\uf072', -15, 15);
ctx.restore();
}
function drawEnemies() {
ctx.font = '30px FontAwesome';
game.enemies.forEach(enemy => {
ctx.fillStyle = enemy.type === 'ship' ? 'brown' : 'red';
ctx.fillText(enemy.type === 'ship' ? '\uf21a' : '\uf1cd', enemy.x, enemy.y + 30);
});
}
function drawTerrain() {
ctx.fillStyle = 'green';
game.terrain.forEach(t => {
ctx.fillRect(t.x, t.y, t.width, t.height);
});
}
function drawBridges() {
ctx.fillStyle = 'gray';
game.bridges.forEach(bridge => {
ctx.fillRect(bridge.x, bridge.y, bridge.width, bridge.height);
ctx.font = '20px FontAwesome';
for (let i = 0; i < bridge.health; i++) {
ctx.fillText('\uf55b', bridge.x + 10 + i * 20, bridge.y + 15);
}
});
}
function drawBullets() {
ctx.fillStyle = 'yellow';
ctx.font = '10px FontAwesome';
game.bullets.forEach(bullet => {
ctx.fillText('\uf0e7', bullet.x, bullet.y);
});
}
function drawPowerUps() {
ctx.font = '20px FontAwesome';
game.powerUps.forEach(powerUp => {
ctx.fillStyle = powerUp.type === 'invincibility' ? 'gold' : 'cyan';
ctx.fillText(powerUp.type === 'invincibility' ? '\uf005' : '\uf0e7', powerUp.x, powerUp.y + 20);
});
}
function drawHUD() {
ctx.fillStyle = 'black';
ctx.font = '16px Arial';
ctx.fillText(`Fuel: ${Math.round(game.fuel)}`, 10, 20);
ctx.fillText(`Score: ${game.score}`, 10, 40);
ctx.fillText(`Multiplier: x${game.multiplier}`, 10, 60);
if (game.isInvincible) {
ctx.fillStyle = 'gold';
ctx.fillText('INVINCIBLE!', 150, 20);
}
if (game.isRapidFire) {
ctx.fillStyle = 'cyan';
ctx.fillText('RAPID FIRE!', 150, 40);
}
}
function update() {
if (game.isGameOver || game.isPaused) return;
game.terrain.forEach(t => t.y += 1);
if (game.terrain[0].y > 0) {
game.terrain = [];
generateTerrain();
}
game.bridges.forEach(bridge => bridge.y += 1);
game.bridges = game.bridges.filter(bridge => bridge.y < 600 && bridge.health > 0);
if (game.bridges.length === 0 || game.bridges[game.bridges.length - 1].y > 300) {
generateBridge();
}
game.enemies.forEach(enemy => {
enemy.y += 1;
if (enemy.type === 'helicopter') {
enemy.x += Math.sin(enemy.y / 30) * 1.5;
}
});
game.enemies = game.enemies.filter(enemy => enemy.y < 600);
game.bullets.forEach(bullet => bullet.y -= 10);
game.bullets = game.bullets.filter(bullet => bullet.y > 0);
game.powerUps.forEach(powerUp => powerUp.y += 1);
game.powerUps = game.powerUps.filter(powerUp => powerUp.y < 600);
if (Math.random() < 0.01 * game.difficulty) {
generateEnemy();
}
if (Math.random() < 0.002) {
generatePowerUp();
}
game.fuel -= 0.05 * game.difficulty;
if (game.fuel <= 0) {
game.isGameOver = true;
}
if (game.isInvincible) {
game.invincibilityTimer--;
if (game.invincibilityTimer <= 0) {
game.isInvincible = false;
}
}
if (game.isRapidFire) {
game.rapidFireTimer--;
if (game.rapidFireTimer <= 0) {
game.isRapidFire = false;
}
}
checkCollisions();
game.difficulty += 0.0005;
}
function checkCollisions() {
if (!game.isInvincible) {
game.terrain.forEach(t => {
if (game.player.x < t.x + t.width &&
game.player.x + game.player.width > t.x &&
game.player.y < t.y + t.height &&
game.player.y + game.player.height > t.y) {
game.isGameOver = true;
}
});
game.enemies.forEach((enemy, index) => {
if (game.player.x < enemy.x + enemy.width &&
game.player.x + game.player.width > enemy.x &&
game.player.y < enemy.y + enemy.height &&
game.player.y + game.player.height > enemy.y) {
game.isGameOver = true;
}
});
}
game.enemies.forEach((enemy, enemyIndex) => {
game.bullets.forEach((bullet, bulletIndex) => {
if (bullet.x < enemy.x + enemy.width &&
bullet.x + 5 > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + 10 > enemy.y) {
game.enemies.splice(enemyIndex, 1);
game.bullets.splice(bulletIndex, 1);
game.score += 10 * game.multiplier;
game.consecutiveHits++;
updateMultiplier();
if (Math.random() < 0.3) {
game.fuel = Math.min(game.fuel + 20, 100);
}
}
});
});
game.bridges.forEach((bridge, bridgeIndex) => {
game.bullets.forEach((bullet, bulletIndex) => {
if (bullet.x > bridge.x &&
bullet.x < bridge.x + bridge.width &&
bullet.y < bridge.y + bridge.height &&
bullet.y + 10 > bridge.y) {
bridge.health--;
game.bullets.splice(bulletIndex, 1);
game.score += 5 * game.multiplier;
game.consecutiveHits++;
updateMultiplier();
if (bridge.health <= 0) {
game.bridges.splice(bridgeIndex, 1);
}
}
});
});
game.powerUps.forEach((powerUp, index) => {
if (game.player.x < powerUp.x + powerUp.width &&
game.player.x + game.player.width > powerUp.x &&
game.player.y < powerUp.y + powerUp.height &&
game.player.y + game.player.height > powerUp.y) {
if (powerUp.type === 'invincibility') {
game.isInvincible = true;
game.invincibilityTimer = 300;
} else if (powerUp.type === 'rapidFire') {
game.isRapidFire = true;
game.rapidFireTimer = 300;
}
game.powerUps.splice(index, 1);
}
});
}
function updateMultiplier() {
if (game.consecutiveHits >= 10) {
game.multiplier = 3;
} else if (game.consecutiveHits >= 5) {
game.multiplier = 2;
} else {
game.multiplier = 1;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawTerrain();
drawBridges();
drawPlayer();
drawEnemies();
drawBullets();
drawPowerUps();
drawHUD();
if (game.isGameOver) {
ctx.fillStyle = 'black';
ctx.font = '30px Arial';
ctx.fillText('Game Over', 150, 300);
newGameButton.style.display = 'block';
pauseButton.style.display = 'none';
}
}
function gameLoop() {
update();
draw();
if (!game.isGameOver && !game.isPaused) {
requestAnimationFrame(gameLoop);
}
}
function startGame() {
game = {
player: { x: 200, y: 550, width: 30, height: 30, speed: 5 },
enemies: [],
bullets: [],
terrain: [],
bridges: [],
powerUps: [],
fuel: 100,
score: 0,
multiplier: 1,
consecutiveHits: 0,
isGameOver: false,
isPaused: false,
difficulty: 1,
isInvincible: false,
invincibilityTimer: 0,
isRapidFire: false,
rapidFireTimer: 0
};
generateTerrain();
generateBridge();
startButton.style.display = 'none';
newGameButton.style.display = 'none';
pauseButton.style.display = 'block';
gameLoop();
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', () => {
game.isPaused = !game.isPaused;
pauseButton.innerHTML = game.isPaused ? '<i class="fas fa-play"></i> Resume' : '<i class="fas fa-pause"></i> Pause';
if (!game.isPaused) gameLoop();
});
document.addEventListener('keydown', (e) => {
if (game.isGameOver || game.isPaused) return;
switch (e.key) {
case 'ArrowLeft':
game.player.x -= game.player.speed;
break;
case 'ArrowRight':
game.player.x += game.player.speed;
break;
case 'ArrowUp':
game.player.y -= game.player.speed;
break;
case 'ArrowDown':
game.player.y += game.player.speed;
break;
case ' ':
game.bullets.push({ x: game.player.x + 12, y: game.player.y });
if (game.isRapidFire) {
game.bullets.push({ x: game.player.x + 8, y: game.player.y });
game.bullets.push({ x: game.player.x + 16, y: game.player.y });
}
break;
}
game.player.x = Math.max(0, Math.min(game.player.x, canvas.width - game.player.width));
game.player.y = Math.max(0, Math.min(game.player.y, canvas.height - game.player.height));
});
</script>
</body>
</html>