Scribd
Upload
17 views

HTML

Uploaded by

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

HTML

Uploaded by

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

<!

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 = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Set canvas size


const SCREEN_WIDTH = 800;
const SCREEN_HEIGHT = 600;
canvas.width = SCREEN_WIDTH;
canvas.height = 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 += player.dx;
player.y += player.dy;

// Gravity effect
if (player.y + player.height < SCREEN_HEIGHT) {
player.dy += player.gravity;
} else {
player.y = SCREEN_HEIGHT - player.height;
player.dy = 0;
player.isJumping = false;
}

// Check for platform collision


for (let platform of platforms) {
if (player.y + player.height <= platform.y && player.y + player.height
+ player.dy > platform.y &&
player.x + player.width > platform.x && player.x < platform.x +
platform.width) {
player.y = platform.y - player.height;
player.dy = 0;
player.isJumping = false;
}
}
}

// Handle user input for movement


function keyDown(e) {
if (e.key === "ArrowLeft" || e.key === "a") {
player.dx = -player.speed;
} else if (e.key === "ArrowRight" || e.key === "d") {
player.dx = player.speed;
} else if (e.key === " " && !player.isJumping) {
player.dy = player.jumpPower;
player.isJumping = true;
}
}

function keyUp(e) {
if (e.key === "ArrowLeft" || e.key === "a" || e.key === "ArrowRight" ||
e.key === "d") {
player.dx = 0;
}
}

// Draw the player and platforms


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

function drawPlatforms() {
ctx.fillStyle = GREEN;
for (let platform of platforms) {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
}
}

// Main game loop


function gameLoop() {
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
movePlayer();
drawPlatforms();
drawPlayer();
requestAnimationFrame(gameLoop);
}

// Event listeners for keyboard input


window.addEventListener("keydown", keyDown);
window.addEventListener("keyup", keyUp);

// Start the game


gameLoop();

</script>

</body>
</html>

You might also like