CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earthquake Balance</title>
<style>
.earthquakebalance7843-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #87CEEB;
overflow: hidden;
}
.earthquakebalance7843-game-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.earthquakebalance7843-canvas {
border: 2px solid #000;
background-color: #F0F8FF;
}
.earthquakebalance7843-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.earthquakebalance7843-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.earthquakebalance7843-button:hover {
background-color: #45a049;
}
.earthquakebalance7843-description {
max-width: 300px;
margin-bottom: 20px;
}
.earthquakebalance7843-instructions {
list-style-type: decimal;
padding-left: 20px;
}
.earthquakebalance7843-difficulty {
margin-bottom: 10px;
}
.earthquakebalance7843-high-score {
font-weight: bold;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.earthquakebalance7843-game-container {
flex-direction: column;
align-items: center;
}
.earthquakebalance7843-controls {
order: 2;
}
.earthquakebalance7843-canvas {
width: 100%;
height: auto;
}
}
</style>
</head>
<body class="earthquakebalance7843-body">
<div class="earthquakebalance7843-game-container">
<canvas id="gameCanvas" class="earthquakebalance7843-canvas" width="400" height="400"></canvas>
<div class="earthquakebalance7843-controls">
<div class="earthquakebalance7843-description">
<p>Balance the character on a pole during an earthquake. The longer you survive, the higher your score!</p>
<ul class="earthquakebalance7843-instructions">
<li>Use left and right arrow keys to balance</li>
<li>Stay on the pole as long as possible</li>
<li>Collect power-ups for bonuses</li>
<li>Difficulty increases over time</li>
</ul>
</div>
<div class="earthquakebalance7843-difficulty">
<label for="difficultySelect">Difficulty:</label>
<select id="difficultySelect">
<option value="easy">Easy</option>
<option value="medium" selected>Medium</option>
<option value="hard">Hard</option>
</select>
</div>
<div id="highScore" class="earthquakebalance7843-high-score">High Score: 0</div>
<button id="startButton" class="earthquakebalance7843-button">Start Game</button>
<button id="newGameButton" class="earthquakebalance7843-button">New Game</button>
<button id="pauseButton" class="earthquakebalance7843-button">Pause</button>
</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');
const difficultySelect = document.getElementById('difficultySelect');
const highScoreElement = document.getElementById('highScore');
let gameRunning = false;
let gamePaused = false;
let character = { x: 200, y: 150, width: 30, height: 60 };
let pole = { x: 175, y: 200, width: 50, height: 200 };
let angle = 0;
let velocity = 0;
let acceleration = 0;
let score = 0;
let difficulty = 1;
let backgroundOffset = 0;
let highScore = 0;
let powerUps = [];
const difficultyFactors = {
easy: 0.7,
medium: 1,
hard: 1.3
};
const powerUpTypes = [
{ type: 'stabilizer', color: '#00FF00', duration: 5000 },
{ type: 'scoreBooster', color: '#FFD700', duration: 5000 },
{ type: 'slowMotion', color: '#00BFFF', duration: 5000 }
];
let activePowerUps = {
stabilizer: false,
scoreBooster: false,
slowMotion: false
};
// Load and play background music
const backgroundMusic = new Audio('https://example.com/background-music.mp3');
backgroundMusic.loop = true;
// Load sound effects
const balanceSound = new Audio('https://example.com/balance-sound.mp3');
const powerUpSound = new Audio('https://example.com/power-up-sound.mp3');
const gameOverSound = new Audio('https://example.com/game-over-sound.mp3');
function drawCharacter() {
ctx.save();
ctx.translate(pole.x + pole.width / 2, pole.y);
ctx.rotate(angle);
// Draw body
ctx.fillStyle = '#FF6347';
ctx.fillRect(character.x - pole.x - pole.width / 2, character.y - pole.y, character.width, character.height);
// Draw head
ctx.fillStyle = '#FFA07A';
ctx.beginPath();
ctx.arc(character.x - pole.x - pole.width / 2 + character.width / 2, character.y - pole.y - 15, 15, 0, Math.PI * 2);
ctx.fill();
// Draw arms
ctx.fillStyle = '#FF6347';
ctx.fillRect(character.x - pole.x - pole.width / 2 - 10, character.y - pole.y + 10, 10, 30);
ctx.fillRect(character.x - pole.x - pole.width / 2 + character.width, character.y - pole.y + 10, 10, 30);
ctx.restore();
}
function drawPole() {
ctx.save();
ctx.translate(pole.x + pole.width / 2, pole.y);
ctx.rotate(angle);
// Draw pole
let gradient = ctx.createLinearGradient(-pole.width / 2, 0, pole.width / 2, 0);
gradient.addColorStop(0, '#8B4513');
gradient.addColorStop(0.5, '#D2691E');
gradient.addColorStop(1, '#8B4513');
ctx.fillStyle = gradient;
ctx.fillRect(-pole.width / 2, 0, pole.width, pole.height);
// Draw wood grain
ctx.strokeStyle = '#5D2E0C';
for (let i = 0; i < 10; i++) {
ctx.beginPath();
ctx.moveTo(-pole.width / 2, i * 20);
ctx.lineTo(pole.width / 2, i * 20);
ctx.stroke();
}
ctx.restore();
}
function drawGround() {
ctx.fillStyle = '#228B22';
ctx.fillRect(0, 380, 400, 20);
// Draw grass
ctx.fillStyle = '#32CD32';
for (let i = 0; i < 40; i++) {
ctx.beginPath();
ctx.moveTo(i * 10, 380);
ctx.lineTo(i * 10 + 5, 370);
ctx.lineTo(i * 10 + 10, 380);
ctx.fill();
}
}
function drawBackground() {
// Sky
let skyGradient = ctx.createLinearGradient(0, 0, 0, 380);
skyGradient.addColorStop(0, '#87CEEB');
skyGradient.addColorStop(1, '#E0F6FF');
ctx.fillStyle = skyGradient;
ctx.fillRect(0, 0, 400, 380);
// Clouds
ctx.fillStyle = '#FFFFFF';
for (let i = 0; i < 3; i++) {
let x = (i * 150 + backgroundOffset) % 450 - 50;
drawCloud(x, 50 + i * 30);
}
// Move clouds
backgroundOffset += 0.2;
if (backgroundOffset > 150) {
backgroundOffset = 0;
}
}
function drawCloud(x, y) {
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.arc(x + 15, y - 10, 15, 0, Math.PI * 2);
ctx.arc(x + 30, y, 20, 0, Math.PI * 2);
ctx.arc(x + 15, y + 10, 15, 0, Math.PI * 2);
ctx.fill();
}
function drawScore() {
ctx.fillStyle = '#000000';
ctx.font = 'bold 20px Arial';
ctx.fillText(`Score: ${Math.floor(score)}`, 10, 30);
}
function drawPowerUps() {
powerUps.forEach(powerUp => {
ctx.fillStyle = powerUp.color;
ctx.beginPath();
ctx.arc(powerUp.x, powerUp.y, 10, 0, Math.PI * 2);
ctx.fill();
});
}
function drawActivePowerUps() {
let y = 60;
for (let [type, active] of Object.entries(activePowerUps)) {
if (active) {
ctx.fillStyle = powerUpTypes.find(p => p.type === type).color;
ctx.font = 'bold 16px Arial';
ctx.fillText(`${type.charAt(0).toUpperCase() + type.slice(1)} active`, 10, y);
y += 25;
}
}
}
function update() {
if (!gameRunning || gamePaused) return;
const scoreMultiplier = activePowerUps.scoreBooster ? 2 : 1;
score += 0.1 * scoreMultiplier;
difficulty = (1 + score / 100) * difficultyFactors[difficultySelect.value];
if (activePowerUps.slowMotion) {
angle += velocity * 0.5;
velocity += acceleration * 0.5;
} else {
angle += velocity;
velocity += acceleration;
}
if (Math.abs(angle) > Math.PI / 4) {
gameOver();
}
const stabilizationFactor = activePowerUps.stabilizer ? 0.5 : 1;
acceleration = (Math.random() * 0.0002 * difficulty - 0.0001 * difficulty) * stabilizationFactor;
character.x = pole.x + pole.width / 2 + Math.sin(angle) * 100;
character.y = pole.y - Math.cos(angle) * 100;
// Update power-ups
if (Math.random() < 0.005) {
const randomPowerUp = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
powerUps.push({
x: Math.random() * canvas.width,
y: Math.random() * 300,
...randomPowerUp
});
}
powerUps = powerUps.filter(powerUp => {
const dx = character.x - powerUp.x;
const dy = character.y - powerUp.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 20) {
activatePowerUp(powerUp.type);
return false;
}
return true;
});
}
function activatePowerUp(type) {
activePowerUps[type] = true;
powerUpSound.play();
setTimeout(() => {
activePowerUps[type] = false;
}, powerUpTypes.find(p => p.type === type).duration);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBackground();
drawGround();
drawPole();
drawCharacter();
drawScore();
drawPowerUps();
drawActivePowerUps();
if (!gameRunning) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFFFFF';
ctx.font = 'bold 30px Arial';
ctx.fillText('Press Start to begin', 80, 200);
}
if (gamePaused) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFFFFF';
ctx.font = 'bold 30px Arial';
ctx.fillText('PAUSED', 150, 200);
}
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
function startGame() {
gameRunning = true;
gamePaused = false;
score = 0;
angle = 0;
velocity = 0;
acceleration = 0;
powerUps = [];
activePowerUps = {
stabilizer: false,
scoreBooster: false,
slowMotion: false
};
pauseButton.textContent = 'Pause';
backgroundMusic.play();
}
function gameOver() {
gameRunning = false;
gameOverSound.play();
backgroundMusic.pause();
backgroundMusic.currentTime = 0;
if (score > highScore) {
highScore = Math.floor(score);
highScoreElement.textContent = `High Score: ${highScore}`;
localStorage.setItem('earthquakeBalanceHighScore', highScore);
}
alert(`Game Over! Your score: ${Math.floor(score)}`);
}
function togglePause() {
gamePaused = !gamePaused;
pauseButton.textContent = gamePaused ? 'Resume' : 'Pause';
if (gamePaused) {
backgroundMusic.pause();
} else {
backgroundMusic.play();
}
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', togglePause);
document.addEventListener('keydown', (e) => {
if (!gameRunning || gamePaused) return;
if (e.key === 'ArrowLeft') {
velocity -= 0.005;
balanceSound.play();
} else if (e.key === 'ArrowRight') {
velocity += 0.005;
balanceSound.play();
}
});
// Touch controls for mobile devices
let touchStartX = 0;
canvas.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
canvas.addEventListener('touchmove', (e) => {
if (!gameRunning || gamePaused) return;
const touchEndX = e.touches[0].clientX;
const touchDiff = touchEndX - touchStartX;
if (touchDiff < 0) {
velocity -= 0.005;
} else if (touchDiff > 0) {
velocity += 0.005;
}
balanceSound.play();
touchStartX = touchEndX;
});
// Responsive canvas sizing
function resizeCanvas() {
const containerWidth = document.querySelector('.earthquakebalance7843-game-container').clientWidth;
const scale = containerWidth < 400 ? containerWidth / 400 : 1;
canvas.style.width = `${400 * scale}px`;
canvas.style.height = `${400 * scale}px`;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Load high score from local storage
const savedHighScore = localStorage.getItem('earthquakeBalanceHighScore');
if (savedHighScore) {
highScore = parseInt(savedHighScore);
highScoreElement.textContent = `High Score: ${highScore}`;
}
gameLoop();
</script>
</body>
</html>