<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Obby BigDips</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #111; overflow: hidden; }
canvas { display: block; margin: auto; background: linear-gradient(#00aaff,
#004477); }
</style>
</head>
<body>
<canvas id="game" width="800" height="400"></canvas>
<script>
const canvas = [Link]("game");
const ctx = [Link]("2d");
const player = {
x: 50, y: 300, w: 30, h: 30,
dx: 0, dy: 0,
onGround: false,
};
const gravity = 0.
const friction = 0.8;
const keys = {};
const platforms = [
{ x: 0, y: 350, w: 200, h: 50 },
{ x: 250, y: 300, w: 100, h: 20 },
{ x: 400, y: 250, w: 100, h: 20 },
{ x: 550, y: 200, w: 100, h: 20 },
{ x: 700, y: 150, w: 100, h: 20 },
];
const platforms = [
{ x: 0, y: 350, w: 200, h: 50 },
{ x: 250, y: 300, w: 100, h: 20 },
{ x: 400, y: 250, w: 100, h: 20 },
{ x: 550, y: 200, w: 100, h: 20 },
{ x: 700, y: 150, w: 100, h: 20 },
];
const platforms = [
{ x: 0, y: 350, w: 200, h: 50 },
{ x: 250, y: 300, w: 100, h: 20 },
{ x: 400, y: 250, w: 100, h: 20 },
{ x: 550, y: 200, w: 100, h: 20 },
{ x: 700, y: 150, w: 100, h: 20 },
];
const platforms = [
{ x: 0, y: 350, w: 200, h: 50 },
{ x: 250, y: 300, w: 100, h: 20 },
{ x: 400, y: 250, w: 100, h: 20 },
{ x: 550, y: 200, w: 100, h: 20 },
{ x: 700, y: 150, w: 100, h: 20 },
];
const platforms = [
{ x: 0, y: 350, w: 200, h: 50 },
{ x: 250, y: 300, w: 100, h: 20 },
{ x: 400, y: 250, w: 100, h: 20 },
{ x: 550, y: 200, w: 100, h: 20 },
{ x: 700, y: 150, w: 100, h: 20 },
];
const flag = { x: 750, y: 100, w: 20, h: 50 };
[Link]("keydown", e => keys[[Link]] = true);
[Link]("keyup", e => keys[[Link]] = false);
function collideRect(a, b) {
return (
a.x < b.x + b.w &&
a.x + a.w > b.x &&
a.y < b.y + b.h &&
a.y + a.h > b.y
);
}
function update() {
if (keys["ArrowLeft"]) [Link] = -3;
if (keys["ArrowRight"]) [Link] = 3;
[Link] += gravity;
player.x += [Link];
player.y += [Link];
[Link] = false;
// Platform collision
for (let plat of platforms) {
if (collideRect(player, plat)) {
if ([Link] > 0 && player.y + player.h <= plat.y + [Link]) {
player.y = plat.y - player.h;
[Link] = 0;
[Link] = true;
}
}
}
if ([Link]) {
if (keys["Space"]) {
[Link] = -10;
}
}
// Apply friction
[Link] *= friction;
// Win condition
if (collideRect(player, flag)) {
alert("🏁 Tu as gagné, BigDips !");
player.x = 50;
player.y = 300;
[Link] = 0;
[Link] = 0;
}
}
function draw() {
[Link](0, 0, [Link], [Link]);
// Draw platforms
[Link] = "#444";
for (let plat of platforms) {
[Link](plat.x, plat.y, plat.w, plat.h);
}
// Draw flag
[Link] = "yellow";
[Link](flag.x, flag.y, flag.w, flag.h);
[Link]();
[Link](flag.x + flag.w, flag.y);
[Link](flag.x + 40, flag.y + 10);
[Link](flag.x + flag.w, flag.y + 20);
[Link]();
[Link]();
// Draw player
[Link] = "#fff";
[Link](player.x, player.y, player.w, player.h);
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>