<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple 2D Game</title>
<style>
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Avoid the Obstacles!</h1>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Player properties
const player = {
width: 30,
height: 30,
x: canvas.width / 2 - 15,
y: canvas.height - 50,
speed: 5,
dx: 0
};
// Obstacle properties
const obstacles = [];
const obstacleSpeed = 3;
const obstacleFrequency = 1000;
let lastObstacleTime = 0;
// Game state
let isGameOver = false;
// Draw the player
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
// Draw the obstacles
function drawObstacles() {
ctx.fillStyle = 'red';
obstacles.forEach(obstacle => {
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
// Move the player
function movePlayer() {
player.x += player.dx;
// Boundary check
if (player.x < 0) {
player.x = 0;
} else if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
}
// Create new obstacles
function createObstacle() {
const obstacleWidth = Math.random() * 40 + 20;
const x = Math.random() * (canvas.width - obstacleWidth);
const newObstacle = {
x: x,
y: 0,
width: obstacleWidth,
height: 20
};
obstacles.push(newObstacle);
}
// Move the obstacles
function moveObstacles() {
obstacles.forEach(obstacle => {
obstacle.y += obstacleSpeed;
});
// Remove obstacles that have fallen off the screen
obstacles.forEach((obstacle, index) => {
if (obstacle.y > canvas.height) {
obstacles.splice(index, 1);
}
});
}
// Check for collision
function checkCollision() {
obstacles.forEach(obstacle => {
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
) {
isGameOver = true;
}
});
}
// Clear the canvas
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// Game loop
function gameLoop(timestamp) {
if (isGameOver) {
ctx.font = '40px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Game Over!', canvas.width / 2 - 100, canvas.height / 2);
return;
}
clearCanvas();
drawPlayer();
drawObstacles();
movePlayer();
moveObstacles();
checkCollision();
// Create new obstacles based on time
if (timestamp - lastObstacleTime > obstacleFrequency) {
createObstacle();
lastObstacleTime = timestamp;
}
requestAnimationFrame(gameLoop);
}
// Keydown event
function keyDown(e) {
if (e.key === 'ArrowRight') {
player.dx = player.speed;
} else if (e.key === 'ArrowLeft') {
player.dx = -player.speed;
}
}
// Keyup event
function keyUp(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
player.dx = 0;
}
}
// Event listeners
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
// Start the game loop
requestAnimationFrame(gameLoop);
</script>
</body>
</html>