<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Platformer Game</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; background: #87CEEB; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
// Set up the canvas
const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");
// Set canvas size
const SCREEN_WIDTH = 800;
const SCREEN_HEIGHT = 600;
[Link] = SCREEN_WIDTH;
[Link] = SCREEN_HEIGHT;
// Colors
const BLUE = "#0000FF";
const GREEN = "#008000";
const WHITE = "#FFFFFF";
// Player object
const player = {
x: 100,
y: SCREEN_HEIGHT - 150,
width: 50,
height: 50,
speed: 5,
dx: 0,
dy: 0,
gravity: 0.8,
jumpPower: -15,
isJumping: false
};
// Platform object
const platforms = [
{ x: 0, y: SCREEN_HEIGHT - 50, width: SCREEN_WIDTH, height: 50 },
{ x: 200, y: SCREEN_HEIGHT - 200, width: 200, height: 20 },
{ x: 400, y: SCREEN_HEIGHT - 300, width: 200, height: 20 }
];
// Handle player movement
function movePlayer() {
player.x += [Link];
player.y += [Link];
// Gravity effect
if (player.y + [Link] < SCREEN_HEIGHT) {
[Link] += [Link];
} else {
player.y = SCREEN_HEIGHT - [Link];
[Link] = 0;
[Link] = false;
}
// Check for platform collision
for (let platform of platforms) {
if (player.y + [Link] <= platform.y && player.y + [Link]
+ [Link] > platform.y &&
player.x + [Link] > platform.x && player.x < platform.x +
[Link]) {
player.y = platform.y - [Link];
[Link] = 0;
[Link] = false;
}
}
}
// Handle user input for movement
function keyDown(e) {
if ([Link] === "ArrowLeft" || [Link] === "a") {
[Link] = -[Link];
} else if ([Link] === "ArrowRight" || [Link] === "d") {
[Link] = [Link];
} else if ([Link] === " " && ![Link]) {
[Link] = [Link];
[Link] = true;
}
}
function keyUp(e) {
if ([Link] === "ArrowLeft" || [Link] === "a" || [Link] === "ArrowRight" ||
[Link] === "d") {
[Link] = 0;
}
}
// Draw the player and platforms
function drawPlayer() {
[Link] = BLUE;
[Link](player.x, player.y, [Link], [Link]);
}
function drawPlatforms() {
[Link] = GREEN;
for (let platform of platforms) {
[Link](platform.x, platform.y, [Link], [Link]);
}
}
// Main game loop
function gameLoop() {
[Link](0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
movePlayer();
drawPlatforms();
drawPlayer();
requestAnimationFrame(gameLoop);
}
// Event listeners for keyboard input
[Link]("keydown", keyDown);
[Link]("keyup", keyUp);
// Start the game
gameLoop();
</script>
</body>
</html>