My First Browser Game Ep 6: Platformer Part 2

🧩

Need the game so far? This episode continues your platformer from Part 1, so it assumes you already have that <canvas><canvas>, player and loop. Open your Part 1 file to keep building, or grab the finished Part 1 code and skeleton here: Platformer Part 1 → · JS Cheatsheet →

🏗️

Your Own Engine File

Rebuild the core loop from memory, no builder

Active

🎯

Goal for this step

Write the complete platformer core in a fresh file, unassisted.

1New platformer2.html: canvas 800×480, rAF loop, player object {x, y, vx, vy, onGround}.
2Gravity 0.5/frame, arrows set vx ±4, jump sets vy −11 when grounded. Platform landing: the falling-only rule.
3This time write it WITHOUT looking at the builder. Stuck? Peek, close the tab, write from memory. That struggle is the learning.
4Working core in one sitting = you have genuinely internalised the platformer.

platformer2.html

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!) ...
}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!) ...
}

📦 Step 1 starter , the platformer core in a fresh file

The 800×480 canvas, the playerplayer object, arrow movement and gravity with a temporary floor. This is the Step 1 core you rebuild from memory. The steps below add double jump, wall jump, camera, ASCII levels and enemies.

platformer2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  body { display:flex; justify-content:center; background:#0d1117; padding:16px; }
  canvas { background:#10162a; border:2px solid #1e2733; border-radius:8px; }
</style>
</head>
<body>
<canvas id="game" width="800" height="480"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

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;                 // gravity
  player.x += player.vx;
  player.y += player.vy;
  if (player.y > 440) { player.y = 440; player.vy = 0; player.onGround = true; }  // temp floor
}

function draw() {
  ctx.clearRect(0, 0, 800, 480);
  ctx.fillStyle = "#60a5fa";
  ctx.fillRect(player.x, player.y, player.w, player.h);
}

function loop() { update(); draw(); requestAnimationFrame(loop); }
requestAnimationFrame(loop);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  body { display:flex; justify-content:center; background:#0d1117; padding:16px; }
  canvas { background:#10162a; border:2px solid #1e2733; border-radius:8px; }
</style>
</head>
<body>
<canvas id="game" width="800" height="480"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

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;                 // gravity
  player.x += player.vx;
  player.y += player.vy;
  if (player.y > 440) { player.y = 440; player.vy = 0; player.onGround = true; }  // temp floor
}

function draw() {
  ctx.clearRect(0, 0, 800, 480);
  ctx.fillStyle = "#60a5fa";
  ctx.fillRect(player.x, player.y, player.w, player.h);
}

function loop() { update(); draw(); requestAnimationFrame(loop); }
requestAnimationFrame(loop);
</script>
</body>
</html>

✏️

Fill in the Blanks

+15 XP

The keys object tracks held keys: keydown sets a key , keyup sets it . Gravity adds 0.5 to every frame.

🧠

Knowledge Check

+15 XP

Why rebuild from memory instead of copying the builder’s output?

ACopying is cheating

BRecall is how skills stick, code you can rebuild is code you truly own

CThe builder code is wrong

🦘

Double Jump

A jump counter instead of a boolean

Locked

🎯

Goal for this step

Allow exactly two jumps: ground jump plus one air jump.

1Replace the onGround-only jump gate with a counter: jumpsLeft.
2Landing resets it to 2; each jump consumes 1; jump allowed while > 0.
3Make the air jump slightly weaker (−9 vs −11), it reads as a "flip" and keeps level design sane.
4Jump on keydown EVENT (not the held-keys object) so each press is one jump.

platformer2.html

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;
}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;
}

⌨️

Code Challenge

+20 XP

Implement the two-stage jump:

platformer2.html

if (e.key === "ArrowUp" && jumpsLeft > if (e.key === "ArrowUp" && jumpsLeft > ) {
    player.vy = (jumpsLeft === 2) ? -11 : ) {
    player.vy = (jumpsLeft === 2) ? -11 : ;
    jumpsLeft;
    jumpsLeft;
};
}

💡 Hint: Any remaining jump allows a press; the second (air) jump is the weaker value; then spend one.

🧠

Knowledge Check

+15 XP

Generalising onGround (bool) to jumpsLeft (number) means triple jump is…

AA rewrite

BChanging the 2 to a 3, good abstractions make features one-number cheap

CImpossible

🧗

Wall Slide & Wall Jump

Cling to walls, kick off them

Locked

🎯

Goal for this step

Add the wall slide and the wall jump, advanced movement.

1Detect wall contact: horizontal collision with a platform side while airborne → onWall = ±1 (which side).
2While on a wall and falling: cap vy at 1.5, the slide.
3Wall jump: jump while onWall → vy = −10, vx = −onWall * 6 (kick AWAY), and refresh jumpsLeft to 1.
4Suddenly your level design vocabulary includes shafts and climbs. Sketch a tower level to feel it.

platformer2.html

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;
}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;
}

✏️

Fill in the Blanks

+15 XP

The slide caps falling speed at while touching a wall. A wall jump kicks AWAY by setting vx to -onWall × .

🧠

Knowledge Check

+15 XP

Why does the wall jump push AWAY from the wall?

ATo look cool

BPhysics-fiction that creates the zig-zag climb, jumping INTO the wall would glue you to it

CJavaScript sign rules

🎥

Parallax Camera

Layered backgrounds moving at different speeds

Locked

🎯

Goal for this step

Add a camera plus depth illusion with parallax layers.

1Camera: camX = player.x − 400, clamped to the level (your Python skill, back again).
2Parallax: draw 2-3 background layers offset by camX × factor, hills at 0.3, clouds at 0.1. Slower = further away.
3The brain reads different scroll speeds as DEPTH, a flat canvas becomes a world.
4Foreground world subtracts full camX as usual.

platformer2.html

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();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();

💡

ctx.translate inside save/restore shifts EVERYTHING you draw, it is sf::View for the browser. No per-draw offsets needed.

⌨️

Code Challenge

+20 XP

Draw the world through a translated camera:

platformer2.html

ctx.ctx.();
ctx.translate(();
ctx.translate(, 0);
drawWorld();
ctx., 0);
drawWorld();
ctx.();();

💡 Hint: Snapshot the canvas state, shift the origin left by the camera, draw, then restore the state.

🧠

Knowledge Check

+15 XP

Clouds at 0.1× scroll look further away than hills at 0.3× because…

AThey are drawn smaller

BParallax: in real life distant objects shift less as you move, the brain decodes speed as depth

CCanvas blurs them

🗺️

Levels as Text

Design levels with ASCII strings

Locked

🎯

Goal for this step

Define your world as strings and parse them into platforms.

1A level is an array of strings: # ground, = platform, ^ spike, o coin, E enemy, F flag, each char one 40px tile.
2A parse function walks rows/columns and fills your arrays (platforms, spikes, coins, enemies, flag).
3Now design in your editor: type a mountain! (This is Python Breakout’s pattern idea, expanded.)
4Adjacent # cells can merge into wide rects for performance, optional polish.

platformer2.html

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 };
        }
}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 };
        }
}

✏️

Fill in the Blanks

+15 XP

Each character maps to one px tile. The parser turns text into the platforms, coins, spikes, enemies and arrays.

🧠

Knowledge Check

+15 XP

The biggest win of ASCII levels is…

ASmaller files

BYou SEE the level shape in the code and can edit it like a drawing, design speed goes way up

CFaster collision

🏁

Enemies, Timer & The Wrap

Stomp enemies, race the clock, finish the series

Locked

🎯

Goal for this step

Wire in patrol enemies, a speedrun timer, and complete the series.

1Patrol enemies + stomp: your Python Part 2 logic, JavaScript spelling, you can port it without help now (that is the test!).
2Speedrun timer: performance.now() at level start; show elapsed; save the best per level in localStorage.
3Series review, you have used: canvas & DOM, rAF, events, arrays & objects, algorithms (Fisher-Yates!), localStorage, touch input, parallax and a level format.
4You can now build almost ANY 2D idea in a single HTML file people open with a click. That is a superpower. Use it. 🏆

platformer2.html

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)";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)";

⌨️

Code Challenge

+20 XP

Time the run with the high-precision clock:

platformer2.html

const secs = ((performance.const secs = ((performance.() - startTime) / () - startTime) / ).toFixed(1);).toFixed(1);

💡 Hint: The browser’s precise timer returns milliseconds, divide to get seconds, one decimal place.

🧠

Knowledge Check

+15 XP

Six episodes of browser games. What makes JavaScript games uniquely shareable?

AThey are smaller

BZero install: one file or one link and ANY device with a browser plays it instantly

CThey run faster than C++

✅ See the complete finished Platformer , all 6 steps assembled

Double jump, wall slide & wall jump, a parallax camera, an ASCII-string level, patrol-and-stomp enemies, spikes, coins, a finish flag and a speedrun timer , one file. Save it as platformer2.htmlplatformer2.html, open it, and play. Stuck on a step? Compare your file against this.

platformer2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sky Climb - Platformer</title>
<style>
  body { display:flex; flex-direction:column; align-items:center; gap:8px;
         background:#0d1117; color:#e8eaf2; font-family:system-ui, sans-serif; padding:16px; }
  canvas { background:#10162a; border:2px solid #1e2733; border-radius:8px; }
</style>
</head>
<body>
  <h2>🏔️ Sky Climb</h2>
  <canvas id="game" width="800" height="480"></canvas>
  <div>← → move · ↑ / Space jump (double + wall jump) · R restart</div>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const TILE = 40;
const levelIndex = 0;

// # ground, = platform, ^ spike, o coin, E enemy, F flag
const LEVEL = [
  "                                        ",
  "                                     F  ",
  "                                  ===   ",
  "              o          o              ",
  "         ==        ==        ===        ",
  "    o                            o      ",
  "   ===        ^^       E     ==         ",
  "                   ===                  ",
  "         E                     ^^       ",
  "  ==           o         ==             ",
  "          ===                   ===     ",
  "########################################",
];
const LEVEL_W = LEVEL[0].length * TILE;

let player, keys, platforms, coins, spikes, enemies, flag;
let jumpsLeft, onWall, wallKick, score, dead, won, msg, startTime;

function makeEnemy(x, y) { return { x:x, y:y+10, w:28, h:28, vx:1.2, x0:x, range:70, alive:true }; }

function parse(level) {
  platforms = []; coins = []; spikes = []; enemies = []; flag = null;
  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*TILE, y = r*TILE;
      if (ch === "#" || ch === "=") platforms.push({ x:x, y:y, w:TILE, h:TILE });
      if (ch === "o") coins.push({ x:x+11, y:y+11, got:false });
      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 };
    }
}

function start() {
  parse(LEVEL);
  player = { x: 60, y: 360, vx:0, vy:0, w:30, h:40, onGround:false };
  keys = {};
  jumpsLeft = 2; onWall = 0; wallKick = 0; score = 0;
  dead = false; won = false; msg = "";
  startTime = performance.now();
}

function overlap(a, b) {
  return a.x < b.x + (b.w||40) && a.x + a.w > b.x &&
         a.y < b.y + (b.h||40) && a.y + a.h > b.y;
}

function respawn() { player.x = 60; player.y = 360; player.vx = 0; player.vy = 0; }

document.addEventListener("keyup",   e => keys[e.key] = false);
document.addEventListener("keydown", e => {
  keys[e.key] = true;
  if (e.key === "r" || e.key === "R") { start(); return; }
  if (e.key === "ArrowUp" || e.key === " ") {
    if (won || dead) return;
    if (onWall !== 0 && !player.onGround) {           // wall jump
      player.vy = -10; player.vx = -onWall * 6; wallKick = 12; jumpsLeft = 1;
    } else if (jumpsLeft > 0) {                        // ground / double jump
      player.vy = (jumpsLeft === 2) ? -11 : -9;
      jumpsLeft--; player.onGround = false;
    }
  }
});
canvas.addEventListener("click", () => { if (won || dead) start(); });

function update() {
  if (won || dead) return;

  // horizontal move (wallKick keeps the kick for a few frames)
  if (wallKick > 0) wallKick--;
  else {
    player.vx = 0;
    if (keys["ArrowLeft"])  player.vx = -4;
    if (keys["ArrowRight"]) player.vx =  4;
  }
  player.x += player.vx;
  if (player.x < 0) player.x = 0;
  onWall = 0;
  for (const p of platforms) {
    if (overlap(player, p)) {
      if (player.vx > 0) { player.x = p.x - player.w; onWall = 1; }
      else if (player.vx < 0) { player.x = p.x + p.w; onWall = -1; }
    }
  }

  // gravity + vertical
  player.vy += 0.5;
  player.y += player.vy;
  player.onGround = false;
  for (const p of platforms) {
    if (overlap(player, p)) {
      if (player.vy > 0) { player.y = p.y - player.h; player.vy = 0; player.onGround = true; jumpsLeft = 2; }
      else if (player.vy < 0) { player.y = p.y + p.h; player.vy = 0; }
    }
  }

  // wall slide
  if (onWall !== 0 && !player.onGround && player.vy > 1.5) player.vy = 1.5;

  // fell off the bottom
  if (player.y > 480 + 80) respawn();

  // enemies patrol + stomp
  for (const en of enemies) {
    if (!en.alive) continue;
    en.x += en.vx;
    if (en.x > en.x0 + en.range || en.x < en.x0 - en.range) en.vx = -en.vx;
    if (overlap(player, en)) {
      if (player.vy > 0 && (player.y + player.h - en.y) < 20) { en.alive = false; player.vy = -8; score += 5; }
      else respawn();
    }
  }

  // spikes
  for (const s of spikes) if (overlap(player, { x:s.x, y:s.y, w:TILE, h:20 })) respawn();

  // coins
  for (const c of coins) if (!c.got && overlap(player, { x:c.x, y:c.y, w:18, h:18 })) { c.got = true; score += 1; }

  // flag
  if (flag && overlap(player, { x:flag.x, y:flag.y, w:TILE, h:TILE })) {
    won = true;
    const secs = ((performance.now() - startTime) / 1000).toFixed(1);
    const key = "plat2-best-" + levelIndex;
    const best = Number(localStorage.getItem(key) || 9999);
    if (Number(secs) < best) localStorage.setItem(key, secs);
    msg = "Level clear in " + secs + "s (best " + Math.min(Number(secs), best) + "s)";
  }
}

function drawClouds(off) {
  ctx.fillStyle = "rgba(255,255,255,.08)";
  for (let i = 0; i < 6; i++) {
    const x = ((i*260 + off) % (LEVEL_W)) ;
    ctx.beginPath(); ctx.arc(x, 70 + (i%2)*30, 26, 0, Math.PI*2); ctx.fill();
  }
}
function drawHills(off) {
  ctx.fillStyle = "rgba(80,120,90,.25)";
  for (let i = 0; i < 8; i++) {
    const x = i*200 + off;
    ctx.beginPath(); ctx.arc(x, 480, 120, Math.PI, 0); ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, 800, 480);
  const camX = Math.max(0, Math.min(LEVEL_W - 800, player.x - 400));

  drawClouds(-camX * 0.1);
  drawHills(-camX * 0.3);

  ctx.save();
  ctx.translate(-camX, 0);

  // platforms
  ctx.fillStyle = "#3b4a63";
  for (const p of platforms) ctx.fillRect(p.x, p.y, p.w, p.h);

  // spikes
  ctx.fillStyle = "#ff5470";
  for (const s of spikes) {
    ctx.beginPath();
    ctx.moveTo(s.x, s.y+20); ctx.lineTo(s.x+20, s.y); ctx.lineTo(s.x+40, s.y+20);
    ctx.closePath(); ctx.fill();
  }

  // coins
  ctx.fillStyle = "#ffd166";
  for (const c of coins) if (!c.got) { ctx.beginPath(); ctx.arc(c.x+9, c.y+9, 8, 0, Math.PI*2); ctx.fill(); }

  // enemies
  ctx.fillStyle = "#a855f7";
  for (const en of enemies) if (en.alive) ctx.fillRect(en.x, en.y, en.w, en.h);

  // flag
  if (flag) { ctx.fillStyle = "#4ade80"; ctx.fillRect(flag.x+6, flag.y, 6, 40); ctx.fillRect(flag.x+12, flag.y, 18, 12); }

  // player
  ctx.fillStyle = "#60a5fa";
  ctx.fillRect(player.x, player.y, player.w, player.h);

  ctx.restore();

  // HUD
  ctx.fillStyle = "#e8eaf2";
  ctx.font = "16px system-ui"; ctx.textAlign = "left";
  ctx.fillText("Score " + score, 12, 26);
  const t = won ? msg : ((performance.now() - startTime)/1000).toFixed(1) + "s";
  ctx.textAlign = "right"; ctx.fillText(t, 788, 26);

  if (won) {
    ctx.fillStyle = "rgba(0,0,0,.6)"; ctx.fillRect(0,0,800,480);
    ctx.fillStyle = "#fff"; ctx.textAlign = "center";
    ctx.font = "bold 36px system-ui"; ctx.fillText("You Win! 🏁", 400, 220);
    ctx.font = "18px system-ui"; ctx.fillText(msg, 400, 258);
    ctx.fillText("press R to play again", 400, 288);
  }
}

function loop() { update(); draw(); requestAnimationFrame(loop); }
start();
requestAnimationFrame(loop);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sky Climb - Platformer</title>
<style>
  body { display:flex; flex-direction:column; align-items:center; gap:8px;
         background:#0d1117; color:#e8eaf2; font-family:system-ui, sans-serif; padding:16px; }
  canvas { background:#10162a; border:2px solid #1e2733; border-radius:8px; }
</style>
</head>
<body>
  <h2>🏔️ Sky Climb</h2>
  <canvas id="game" width="800" height="480"></canvas>
  <div>← → move · ↑ / Space jump (double + wall jump) · R restart</div>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const TILE = 40;
const levelIndex = 0;

// # ground, = platform, ^ spike, o coin, E enemy, F flag
const LEVEL = [
  "                                        ",
  "                                     F  ",
  "                                  ===   ",
  "              o          o              ",
  "         ==        ==        ===        ",
  "    o                            o      ",
  "   ===        ^^       E     ==         ",
  "                   ===                  ",
  "         E                     ^^       ",
  "  ==           o         ==             ",
  "          ===                   ===     ",
  "########################################",
];
const LEVEL_W = LEVEL[0].length * TILE;

let player, keys, platforms, coins, spikes, enemies, flag;
let jumpsLeft, onWall, wallKick, score, dead, won, msg, startTime;

function makeEnemy(x, y) { return { x:x, y:y+10, w:28, h:28, vx:1.2, x0:x, range:70, alive:true }; }

function parse(level) {
  platforms = []; coins = []; spikes = []; enemies = []; flag = null;
  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*TILE, y = r*TILE;
      if (ch === "#" || ch === "=") platforms.push({ x:x, y:y, w:TILE, h:TILE });
      if (ch === "o") coins.push({ x:x+11, y:y+11, got:false });
      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 };
    }
}

function start() {
  parse(LEVEL);
  player = { x: 60, y: 360, vx:0, vy:0, w:30, h:40, onGround:false };
  keys = {};
  jumpsLeft = 2; onWall = 0; wallKick = 0; score = 0;
  dead = false; won = false; msg = "";
  startTime = performance.now();
}

function overlap(a, b) {
  return a.x < b.x + (b.w||40) && a.x + a.w > b.x &&
         a.y < b.y + (b.h||40) && a.y + a.h > b.y;
}

function respawn() { player.x = 60; player.y = 360; player.vx = 0; player.vy = 0; }

document.addEventListener("keyup",   e => keys[e.key] = false);
document.addEventListener("keydown", e => {
  keys[e.key] = true;
  if (e.key === "r" || e.key === "R") { start(); return; }
  if (e.key === "ArrowUp" || e.key === " ") {
    if (won || dead) return;
    if (onWall !== 0 && !player.onGround) {           // wall jump
      player.vy = -10; player.vx = -onWall * 6; wallKick = 12; jumpsLeft = 1;
    } else if (jumpsLeft > 0) {                        // ground / double jump
      player.vy = (jumpsLeft === 2) ? -11 : -9;
      jumpsLeft--; player.onGround = false;
    }
  }
});
canvas.addEventListener("click", () => { if (won || dead) start(); });

function update() {
  if (won || dead) return;

  // horizontal move (wallKick keeps the kick for a few frames)
  if (wallKick > 0) wallKick--;
  else {
    player.vx = 0;
    if (keys["ArrowLeft"])  player.vx = -4;
    if (keys["ArrowRight"]) player.vx =  4;
  }
  player.x += player.vx;
  if (player.x < 0) player.x = 0;
  onWall = 0;
  for (const p of platforms) {
    if (overlap(player, p)) {
      if (player.vx > 0) { player.x = p.x - player.w; onWall = 1; }
      else if (player.vx < 0) { player.x = p.x + p.w; onWall = -1; }
    }
  }

  // gravity + vertical
  player.vy += 0.5;
  player.y += player.vy;
  player.onGround = false;
  for (const p of platforms) {
    if (overlap(player, p)) {
      if (player.vy > 0) { player.y = p.y - player.h; player.vy = 0; player.onGround = true; jumpsLeft = 2; }
      else if (player.vy < 0) { player.y = p.y + p.h; player.vy = 0; }
    }
  }

  // wall slide
  if (onWall !== 0 && !player.onGround && player.vy > 1.5) player.vy = 1.5;

  // fell off the bottom
  if (player.y > 480 + 80) respawn();

  // enemies patrol + stomp
  for (const en of enemies) {
    if (!en.alive) continue;
    en.x += en.vx;
    if (en.x > en.x0 + en.range || en.x < en.x0 - en.range) en.vx = -en.vx;
    if (overlap(player, en)) {
      if (player.vy > 0 && (player.y + player.h - en.y) < 20) { en.alive = false; player.vy = -8; score += 5; }
      else respawn();
    }
  }

  // spikes
  for (const s of spikes) if (overlap(player, { x:s.x, y:s.y, w:TILE, h:20 })) respawn();

  // coins
  for (const c of coins) if (!c.got && overlap(player, { x:c.x, y:c.y, w:18, h:18 })) { c.got = true; score += 1; }

  // flag
  if (flag && overlap(player, { x:flag.x, y:flag.y, w:TILE, h:TILE })) {
    won = true;
    const secs = ((performance.now() - startTime) / 1000).toFixed(1);
    const key = "plat2-best-" + levelIndex;
    const best = Number(localStorage.getItem(key) || 9999);
    if (Number(secs) < best) localStorage.setItem(key, secs);
    msg = "Level clear in " + secs + "s (best " + Math.min(Number(secs), best) + "s)";
  }
}

function drawClouds(off) {
  ctx.fillStyle = "rgba(255,255,255,.08)";
  for (let i = 0; i < 6; i++) {
    const x = ((i*260 + off) % (LEVEL_W)) ;
    ctx.beginPath(); ctx.arc(x, 70 + (i%2)*30, 26, 0, Math.PI*2); ctx.fill();
  }
}
function drawHills(off) {
  ctx.fillStyle = "rgba(80,120,90,.25)";
  for (let i = 0; i < 8; i++) {
    const x = i*200 + off;
    ctx.beginPath(); ctx.arc(x, 480, 120, Math.PI, 0); ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, 800, 480);
  const camX = Math.max(0, Math.min(LEVEL_W - 800, player.x - 400));

  drawClouds(-camX * 0.1);
  drawHills(-camX * 0.3);

  ctx.save();
  ctx.translate(-camX, 0);

  // platforms
  ctx.fillStyle = "#3b4a63";
  for (const p of platforms) ctx.fillRect(p.x, p.y, p.w, p.h);

  // spikes
  ctx.fillStyle = "#ff5470";
  for (const s of spikes) {
    ctx.beginPath();
    ctx.moveTo(s.x, s.y+20); ctx.lineTo(s.x+20, s.y); ctx.lineTo(s.x+40, s.y+20);
    ctx.closePath(); ctx.fill();
  }

  // coins
  ctx.fillStyle = "#ffd166";
  for (const c of coins) if (!c.got) { ctx.beginPath(); ctx.arc(c.x+9, c.y+9, 8, 0, Math.PI*2); ctx.fill(); }

  // enemies
  ctx.fillStyle = "#a855f7";
  for (const en of enemies) if (en.alive) ctx.fillRect(en.x, en.y, en.w, en.h);

  // flag
  if (flag) { ctx.fillStyle = "#4ade80"; ctx.fillRect(flag.x+6, flag.y, 6, 40); ctx.fillRect(flag.x+12, flag.y, 18, 12); }

  // player
  ctx.fillStyle = "#60a5fa";
  ctx.fillRect(player.x, player.y, player.w, player.h);

  ctx.restore();

  // HUD
  ctx.fillStyle = "#e8eaf2";
  ctx.font = "16px system-ui"; ctx.textAlign = "left";
  ctx.fillText("Score " + score, 12, 26);
  const t = won ? msg : ((performance.now() - startTime)/1000).toFixed(1) + "s";
  ctx.textAlign = "right"; ctx.fillText(t, 788, 26);

  if (won) {
    ctx.fillStyle = "rgba(0,0,0,.6)"; ctx.fillRect(0,0,800,480);
    ctx.fillStyle = "#fff"; ctx.textAlign = "center";
    ctx.font = "bold 36px system-ui"; ctx.fillText("You Win! 🏁", 400, 220);
    ctx.font = "18px system-ui"; ctx.fillText(msg, 400, 258);
    ctx.fillText("press R to play again", 400, 288);
  }
}

function loop() { update(); draw(); requestAnimationFrame(loop); }
start();
requestAnimationFrame(loop);
</script>
</body>
</html>

Beyond the Builder!Platformer Part 2

Beyond the Builder!
Platformer Part 2