Scribd
Upload
20 views4 pages

1 A 2

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views4 pages

1 A 2

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
We take content rights seriously. If you suspect this is your content, claim it here.
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