CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airplane Adventure</title>
<style>
.airplaneadventure7823-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #87CEEB;
}
.airplaneadventure7823-game-container {
display: flex;
flex-direction: column;
align-items: center;
}
.airplaneadventure7823-canvas {
border: 2px solid #333;
background-color: #E0F6FF;
}
.airplaneadventure7823-controls {
margin-top: 20px;
display: flex;
gap: 10px;
}
.airplaneadventure7823-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.airplaneadventure7823-button:hover {
background-color: #45a049;
}
.airplaneadventure7823-info {
margin-top: 20px;
text-align: center;
}
@media (max-width: 600px) {
.airplaneadventure7823-game-container {
flex-direction: column-reverse;
}
.airplaneadventure7823-canvas {
width: 100%;
max-width: 400px;
}
}
</style>
</head>
<body class="airplaneadventure7823-body">
<div class="airplaneadventure7823-game-container">
<canvas id="gameCanvas" class="airplaneadventure7823-canvas" width="400" height="600"></canvas>
<div class="airplaneadventure7823-controls">
<button id="startButton" class="airplaneadventure7823-button">Start</button>
<button id="newGameButton" class="airplaneadventure7823-button">New Game</button>
<button id="pauseButton" class="airplaneadventure7823-button">Pause</button>
</div>
<div class="airplaneadventure7823-info">
<h1>Airplane Adventure</h1>
<p>Navigate your airplane through obstacles and collect points!</p>
<h3>Instructions:</h3>
<ul>
<li>Use arrow keys to move the airplane</li>
<li>Avoid hitting obstacles</li>
<li>Collect coins for extra points</li>
<li>Survive as long as possible!</li>
</ul>
</div>
</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 airplane = { x: 200, y: 500, width: 40, height: 40 };
let obstacles = [];
let coins = [];
let score = 0;
let gameLoop;
let isPaused = false;
function drawAirplane() {
ctx.fillStyle = 'blue';
ctx.fillRect(airplane.x, airplane.y, airplane.width, airplane.height);
}
function drawObstacles() {
ctx.fillStyle = 'red';
obstacles.forEach(obstacle => {
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
function drawCoins() {
ctx.fillStyle = 'gold';
coins.forEach(coin => {
ctx.beginPath();
ctx.arc(coin.x, coin.y, coin.radius, 0, Math.PI * 2);
ctx.fill();
});
}
function moveObstacles() {
obstacles.forEach(obstacle => {
obstacle.y += 2;
});
obstacles = obstacles.filter(obstacle => obstacle.y < canvas.height);
}
function moveCoins() {
coins.forEach(coin => {
coin.y += 1;
});
coins = coins.filter(coin => coin.y < canvas.height);
}
function createObstacle() {
if (Math.random() < 0.02) {
obstacles.push({
x: Math.random() * (canvas.width - 50),
y: 0,
width: 50,
height: 20
});
}
}
function createCoin() {
if (Math.random() < 0.01) {
coins.push({
x: Math.random() * canvas.width,
y: 0,
radius: 10
});
}
}
function checkCollisions() {
obstacles.forEach(obstacle => {
if (airplane.x < obstacle.x + obstacle.width &&
airplane.x + airplane.width > obstacle.x &&
airplane.y < obstacle.y + obstacle.height &&
airplane.y + airplane.height > obstacle.y) {
gameOver();
}
});
coins = coins.filter(coin => {
if (Math.hypot(coin.x - (airplane.x + airplane.width/2), coin.y - (airplane.y + airplane.height/2)) < coin.radius + airplane.width/2) {
score += 10;
return false;
}
return true;
});
}
function gameOver() {
clearInterval(gameLoop);
ctx.fillStyle = 'black';
ctx.font = '30px Arial';
ctx.fillText('Game Over!', canvas.width/2 - 70, canvas.height/2);
}
function updateScore() {
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Score: ' + score, 10, 30);
}
function gameUpdate() {
if (!isPaused) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
createObstacle();
createCoin();
moveObstacles();
moveCoins();
drawAirplane();
drawObstacles();
drawCoins();
checkCollisions();
updateScore();
score++;
}
}
function startGame() {
obstacles = [];
coins = [];
score = 0;
airplane = { x: 200, y: 500, width: 40, height: 40 };
isPaused = false;
pauseButton.textContent = 'Pause';
if (gameLoop) clearInterval(gameLoop);
gameLoop = setInterval(gameUpdate, 1000 / 60);
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', () => {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
});
document.addEventListener('keydown', (e) => {
if (!isPaused) {
switch(e.key) {
case 'ArrowLeft':
if (airplane.x > 0) airplane.x -= 5;
break;
case 'ArrowRight':
if (airplane.x < canvas.width - airplane.width) airplane.x += 5;
break;
case 'ArrowUp':
if (airplane.y > 0) airplane.y -= 5;
break;
case 'ArrowDown':
if (airplane.y < canvas.height - airplane.height) airplane.y += 5;
break;
}
}
});
</script>
</body>
</html>