Scribd
Upload
13 views

1a2

The document is an HTML file that implements a simple game called 'Dodge the Falling Obstacles' using JavaScript and HTML5 canvas. Players control a character that must dodge falling obstacles and giant blocks, with features including respawn and pause buttons. The game tracks the number of obstacles dodged and displays a 'Game Over' message when the player collides with an obstacle.

Uploaded by

griffinhearn
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views

1a2

The document is an HTML file that implements a simple game called 'Dodge the Falling Obstacles' using JavaScript and HTML5 canvas. Players control a character that must dodge falling obstacles and giant blocks, with features including respawn and pause buttons. The game tracks the number of obstacles dodged and displays a 'Game Over' message when the player collides with an obstacle.

Uploaded by

griffinhearn
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dodge the Falling Obstacles</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}

canvas {
display: block;
background: #222;
}

.controls {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}

button {
font-size: 16px;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
border: none;
border-radius: 5px;
background: #00aaff;
color: white;
transition: background 0.3s;
}

button:hover {
background: #007acc;
}
</style>
</head>
<body>
<div class="controls">
<button id="respawnButton">Respawn</button>
<button id="pauseButton">Pause</button>
</div>
<script>
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const player = {
x: canvas.width / 2,
y: canvas.height - 50,
width: 30,
height: 30,
color: '#00ff00',
speed: 10
};

const obstacles = [];


const giantBlocks = [];

const smallBlockBaseSpeed = 5; // Base speed for small blocks


const smallBlockAcceleration = 0.1; // Acceleration per frame
const giantBlockSpeed = 10; // Speed for giant blocks
let spawnRate = 50; // Spawn rate for small blocks
let frameCount = 0;
let dodgedCount = 0; // Number of obstacles dodged
let gameOver = false;
let isPaused = false;

const keys = {};

function resetGame() {
player.x = canvas.width / 2;
player.y = canvas.height - 50;
obstacles.length = 0;
giantBlocks.length = 0;
frameCount = 0;
dodgedCount = 0;
gameOver = false;
}

function createObstacle() {
const x = Math.random() * (canvas.width - 30);
obstacles.push({ x, y: 0, width: 30, height: 30, speed: smallBlockBaseSpeed,
color: '#ff0000' });
}

function spawnGiantBlock() {
const size = canvas.width * 0.6; // 60% of screen width
const x = Math.random() * (canvas.width - size);
const y = -size; // Start off-screen
giantBlocks.push({ x, y, size, speed: giantBlockSpeed, color: '#ff7700' });
}

function updatePlayer() {
if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;
if (keys['ArrowRight'] && player.x < canvas.width - player.width) player.x +=
player.speed;
}

function updateObstacles() {
obstacles.forEach(obstacle => {
obstacle.y += obstacle.speed;
obstacle.speed += smallBlockAcceleration; // Increase speed over time

// Check collision
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
) {
gameOver = true;
}
});

// Remove obstacles that are off-screen


for (let i = obstacles.length - 1; i >= 0; i--) {
if (obstacles[i].y > canvas.height) {
obstacles.splice(i, 1);
dodgedCount++;

// Spawn a giant block every 5 points


if (dodgedCount % 5 === 0) {
spawnGiantBlock();
}
}
}
}

function updateGiantBlocks() {
giantBlocks.forEach((block, index) => {
block.y += block.speed;

// Check collision with the player


if (
player.x < block.x + block.size &&
player.x + player.width > block.x &&
player.y < block.y + block.size &&
player.y + player.height > block.y
) {
gameOver = true;
}

// Remove giant blocks that are off-screen


if (block.y > canvas.height) {
giantBlocks.splice(index, 1);
}
});
}

function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawObstacles() {
obstacles.forEach(obstacle => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}

function drawGiantBlocks() {
giantBlocks.forEach(block => {
ctx.fillStyle = block.color;
ctx.fillRect(block.x, block.y, block.size, block.size);
});
}
function drawGameOver() {
ctx.fillStyle = '#fff';
ctx.font = '48px Arial';
ctx.textAlign = 'center';
ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2);
}

function drawDodgedCount() {
ctx.fillStyle = '#fff';
ctx.font = '20px Arial';
ctx.fillText(`Dodged: ${dodgedCount}`, 10, 30);
}

function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver && !isPaused) {


frameCount++;
if (frameCount % spawnRate === 0) createObstacle();
updatePlayer();
updateObstacles();
updateGiantBlocks();
drawPlayer();
drawObstacles();
drawGiantBlocks();
drawDodgedCount();
} else if (gameOver) {
drawGameOver();
}

requestAnimationFrame(gameLoop);
}

// Event Listeners
window.addEventListener('keydown', e => (keys[e.key] = true));
window.addEventListener('keyup', e => (keys[e.key] = false));

document.getElementById('respawnButton').addEventListener('click', resetGame);

document.getElementById('pauseButton').addEventListener('click', () => {
isPaused = !isPaused;
const pauseButton = document.getElementById('pauseButton');
pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
});

gameLoop();
</script>
</body>
</html>

You might also like