Scribd
Upload
19 views

HTML

Uploaded by

lssd6491
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
19 views

HTML

Uploaded by

lssd6491
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/ 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