CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Raid 2024</title>
<style>
.riverraid2024-body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #1a1a2e;
font-family: Arial, sans-serif;
color: #e0e0e0;
}
.riverraid2024-canvas {
border: 2px solid #16213e;
max-width: 100%;
max-height: 70vh;
}
.riverraid2024-controls {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 20px;
}
.riverraid2024-button {
background-color: #0f3460;
color: #e0e0e0;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.riverraid2024-button:hover {
background-color: #16213e;
}
.riverraid2024-info {
margin-top: 20px;
text-align: center;
}
@media (orientation: landscape) {
.riverraid2024-body {
flex-direction: row;
}
.riverraid2024-info {
margin-left: 20px;
text-align: left;
}
}
</style>
</head>
<body class="riverraid2024-body">
<canvas id="gameCanvas" class="riverraid2024-canvas"></canvas>
<div class="riverraid2024-info">
<h1>River Raid 2024</h1>
<p>Navigate your aircraft through a dangerous river, avoiding obstacles and enemies.</p>
<h2>How to play:</h2>
<ul>
<li>Tap left side of the screen to move left</li>
<li>Tap right side of the screen to move right</li>
<li>Tap middle of the screen to shoot</li>
<li>Collect fuel tanks to keep flying</li>
<li>Avoid or destroy obstacles and enemies</li>
</ul>
<div class="riverraid2024-controls">
<button id="startButton" class="riverraid2024-button">Start Game</button>
<button id="resetButton" class="riverraid2024-button">New Game</button>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const resetButton = document.getElementById('resetButton');
canvas.width = 300;
canvas.height = 500;
let gameLoop;
let player = { x: canvas.width / 2, y: canvas.height - 50, width: 30, height: 30 };
let obstacles = [];
let bullets = [];
let fuel = 100;
let score = 0;
let gameSpeed = 2;
let isGameOver = false;
function drawPlayer() {
ctx.fillStyle = '#e94560';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawObstacles() {
ctx.fillStyle = '#16213e';
obstacles.forEach(obstacle => {
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
function drawBullets() {
ctx.fillStyle = '#ffff00';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
function drawFuel() {
ctx.fillStyle = '#00ff00';
ctx.fillRect(10, 10, fuel * 2, 10);
}
function drawScore() {
ctx.fillStyle = '#ffffff';
ctx.font = '20px Arial';
ctx.fillText(`Score: ${score}`, 10, 40);
}
function updateGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (Math.random() < 0.02) {
obstacles.push({
x: Math.random() * (canvas.width - 30),
y: -30,
width: 30,
height: 30,
type: Math.random() < 0.2 ? 'fuel' : 'enemy'
});
}
obstacles = obstacles.filter(obstacle => {
obstacle.y += gameSpeed;
if (obstacle.y > canvas.height) {
return false;
}
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
) {
if (obstacle.type === 'fuel') {
fuel = Math.min(fuel + 20, 100);
score += 10;
return false;
} else {
gameOver();
return false;
}
}
return true;
});
bullets = bullets.filter(bullet => {
bullet.y -= 5;
if (bullet.y < 0) {
return false;
}
for (let i = 0; i < obstacles.length; i++) {
if (
bullet.x < obstacles[i].x + obstacles[i].width &&
bullet.x + bullet.width > obstacles[i].x &&
bullet.y < obstacles[i].y + obstacles[i].height &&
bullet.y + bullet.height > obstacles[i].y
) {
if (obstacles[i].type === 'enemy') {
score += 5;
obstacles.splice(i, 1);
return false;
}
}
}
return true;
});
fuel -= 0.1;
if (fuel <= 0) {
gameOver();
}
drawPlayer();
drawObstacles();
drawBullets();
drawFuel();
drawScore();
if (!isGameOver) {
requestAnimationFrame(updateGame);
}
}
function gameOver() {
isGameOver = true;
ctx.fillStyle = '#ffffff';
ctx.font = '30px Arial';
ctx.fillText('Game Over', canvas.width / 2 - 70, canvas.height / 2);
}
function startGame() {
if (!gameLoop) {
gameLoop = requestAnimationFrame(updateGame);
}
}
function resetGame() {
player = { x: canvas.width / 2, y: canvas.height - 50, width: 30, height: 30 };
obstacles = [];
bullets = [];
fuel = 100;
score = 0;
gameSpeed = 2;
isGameOver = false;
if (gameLoop) {
cancelAnimationFrame(gameLoop);
}
gameLoop = requestAnimationFrame(updateGame);
}
startButton.addEventListener('click', startGame);
resetButton.addEventListener('click', resetGame);
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
const x = touch.clientX - rect.left;
if (x < canvas.width / 3) {
player.x = Math.max(0, player.x - 10);
} else if (x > canvas.width * 2 / 3) {
player.x = Math.min(canvas.width - player.width, player.x + 10);
} else {
bullets.push({ x: player.x + player.width / 2 - 2, y: player.y, width: 4, height: 10 });
}
});
// Initial game start
startGame();
</script>
</body>
</html>