// ===== Part 1 of 8 (as shown in the lesson) =====
const player = { x: 100, y: 380, vx: 0, vy: 0, w: 30, h: 40, onGround: false };
const keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
function update() {
player.vx = 0;
if (keys["ArrowLeft"]) player.vx = -4;
if (keys["ArrowRight"]) player.vx = 4;
player.vy += 0.5;
player.x += player.vx;
player.y += player.vy;
// ... platform landing (you know this!) ...
}
// ===== Part 2 of 8 (as shown in the lesson) =====
// ===== Part 3 of 8 (as shown in the lesson) =====
let jumpsLeft = 2;
// on landing:
player.onGround = true;
jumpsLeft = 2;
// keydown handler:
if (e.key === "ArrowUp" && jumpsLeft > 0) {
player.vy = (jumpsLeft === 2) ? -11 : -9;
jumpsLeft--;
player.onGround = false;
}
// ===== Part 4 of 8 (as shown in the lesson) =====
let onWall = 0; // -1 left wall, 1 right wall, 0 none
// during horizontal collision resolution:
if (hitLeftSide) onWall = 1;
if (hitRightSide) onWall = -1;
// the slide (after gravity):
if (onWall !== 0 && !player.onGround && player.vy > 1.5)
player.vy = 1.5;
// wall jump in the keydown handler:
if (e.key === "ArrowUp" && onWall !== 0 && !player.onGround) {
player.vy = -10;
player.vx = -onWall * 6; // kick away from the wall
jumpsLeft = 1;
}
// ===== Part 5 of 8 (as shown in the lesson) =====
const camX = Math.max(0, Math.min(LEVEL_W - 800, player.x - 400));
// far clouds (barely move):
drawClouds(-camX * 0.1);
// mid hills:
drawHills(-camX * 0.3);
// world (full speed):
ctx.save();
ctx.translate(-camX, 0);
drawWorld();
ctx.restore();
// ===== Part 6 of 8 (as shown in the lesson) =====
const LEVEL = [
" F ",
" ==== ",
" o E ",
" o ===== ===== ^^ ",
" ==== ====== ",
" ^^ E ",
"##############################",
];
function parse(level) {
for (let r = 0; r < level.length; r++)
for (let c = 0; c < level[r].length; c++) {
const ch = level[r][c];
const x = c * 40, y = r * 40;
if (ch === "#" || ch === "=")
platforms.push({ x: x, y: y, w: 40, h: 40 });
if (ch === "o") coins.push({ x: x + 11, y: y + 11 });
if (ch === "^") spikes.push({ x: x, y: y + 20 });
if (ch === "E") enemies.push(makeEnemy(x, y));
if (ch === "F") flag = { x: x, y: y };
}
}
// ===== Part 7 of 8 (as shown in the lesson) =====
const startTime = performance.now();
// on reaching the flag:
const secs = ((performance.now() - startTime) / 1000).toFixed(1);
const key = "plat2-best-" + levelIndex;
const best = Number(localStorage.getItem(key) || 9999);
if (secs < best) localStorage.setItem(key, secs);
msg = "Level clear in " + secs + "s (best " +
Math.min(secs, best) + "s)";
// ===== Part 8 of 8 (as shown in the lesson) =====
Sky Climb - Platformer
🎮? Sky Climb
? ? move • ? / Space jump (double + wall jump) • R restart