Pip's Adventure | HTML5 Platformer Game

Pip’s Adventure is a self-contained HTML5 platform-adventure game built with HTML5, CSS3, and vanilla JavaScript. It needs no engine, build step, installation, or server-side service. Open main_file/index.html directly, or upload the complete main_file folder to a static host.

Players guide a young explorer through a hidden valley, running, double jumping, and dashing across ledges to collect gold and trail tokens, light lanterns, ring bells, and free a missing friend in every world. With 240 levels in six worlds, 18 mission types, a wardrobe of three outfits, synthesized piano music, and a warm storybook-valley aesthetic, Pip’s Adventure turns a simple trail into a long, charming journey that ends with bringing Pip home.

How to Play

Move with the arrow keys or A / D, jump with Space, ↑, or W (press again in mid-air for a double jump), dash with X or Shift, and interact with E beside levers, lanterns, bells, cages, and mailboxes. On touch devices, on-screen Left, Right, Dash, and Jump buttons appear. Finish every goal shown in the objective ribbon, then step into the exit gate. You start each level with three hearts — hazards and falls cost a heart, and a lit lantern becomes your return point. Lose all hearts or run out of time on a timed level, and tap Try Again to restart the same level.

Core Gameplay

• 240 progressive levels — six worlds of 40 levels each, from The Hidden Garden to The Last Crossing, with new hazards and rules introduced gradually so late levels feel harder without a sharp difficulty cliff.
• Eighteen mission types — trail token hunts, lantern routes, gold quotas, bridge restoration, ordered bells, crystal barriers and shards, field-note delivery, friend rescues, timed races, and more, each with its own objective ribbon and hint.
• Synthesized audio only — every sound effect and the soft felt-piano music for each world are generated live with the Web Audio API. No MP3s or audio downloads are needed.
• Double jump and quick dash — a first jump, a second mid-air jump, and a short dash that passes through crystal barriers and crystals and protects from hazards while it lasts. A dash meter shows when it is ready again.
• Forgiving platforming feel — a short grace time after leaving a ledge, a remembered early jump press, spring pads for extra lift, and drifting or crumbling ledges on selected levels.
• Lantern return points — light a lantern with E and any fall sends you back to it instead of the start of the level.
• 1–3 star rating per level based on hearts lost and gold collected — finish to earn 1 star, lose at most one heart for 2, and finish without losing a heart while collecting at least 60% of the gold for 3.
• Pause, restart, or jump to the level list at any time from the pause screen, which also opens automatically if the window loses focus.
• Animated feedback — particle bursts, dash trails, glowing lanterns, spring pads, mechanisms that animate when activated, and short on-screen hints that react to what you just did.
• Loading screen on every visit with the trail icon and a “Preparing the next trail…” message while the artwork loads.

Progression & Replayability

• Stage-by-stage unlock — each level unlocks only after the previous one is completed, with Level 1 always available.
• Best-star tracking — replaying a level with a lower star rating never overwrites your saved best.
• Persistent progress — completed levels, stars, best times, gold wallet, owned outfits, current outfit, resume level, and sound preference are saved via localStorage.
• Gradual hazard introduction — spikes appear from Level 5, flames from Level 13, floating crystals from Level 25, swinging axes from Level 37, and light beams from Level 49, so each new danger is met one at a time.
• Wardrobe rewards — every completed level pays out the gold you collected plus a 15 gold bonus, and gold unlocks the Blue Trail Jacket (35) and the Forest Explorer outfit (90). Outfits are cosmetic only.

Visual Presentation

• Warm storybook-valley theme — painted backdrops of a tree-house garden, mountain meadows, woodland trails, and an observatory tower, with gold, teal, and violet interface accents throughout.
• Painted artwork — backdrops, the logo, character sprite sheets, ledges, levers, cages, gates, lanterns, crystals, buttons, hearts, coins, and keys are included as WebP images in main_file/script/images.
• Animated explorer — walking, standing, jumping, and falling frames, with three outfits that change the character in the lobby preview and in every level.
• Clear HUD — hearts, trail token counter, gold counter, level timer, objective ribbon, hint bubble, and a dash meter, plus an interact button that shows the exact action available.
• Responsive layout — the interface fills the viewport, and the CSS adapts button sizes, HUD positions, level tiles, and wardrobe cards for desktop, tablet, phone, portrait, and landscape. The objective text wraps inside its scroll, and wardrobe cards keep their icons, descriptions, and prices within their frames.
• Trebuchet MS + Georgia typefaces — system fonts already on the player’s device, so nothing is downloaded or bundled.

Technical Specifications

• Built with: Pure HTML5, CSS3, and vanilla JavaScript (Canvas 2D rendering)
• Runtime libraries: None. The game uses the system fonts Trebuchet MS and Georgia; no font files are loaded or bundled.
• Responsive: Designed for phones, tablets, and desktop; portrait and landscape both supported; test your target devices
• Browser support: Minimum supported version floors: Chrome 108+ (desktop & Android), Edge 108+, Firefox 121+ (desktop & Android), and Safari 16+ (macOS & iOS), set by the Canvas roundRect(), CSS :has(), and dvh features the game uses. Verified in Google Chrome 156 on Windows.
• Touch & mouse support: Keyboard, mouse, and touch all work — on-screen Left, Right, Dash, and Jump buttons use pointer events with pointer capture on touch devices, and every action also has a keyboard key.
• Internet requirement: Not needed. All code, artwork, and sound are part of the project folder or synthesized in the browser, so the game runs fully offline once the files are in place.
• Storage: localStorage (a few hundred bytes for a new player, roughly 15 KB at most with all 240 levels completed) under the key pips-adventure-campaign-240-v4, plus pips-adventure-muted for the sound preference. Inspect or clear via browser DevTools (Application > Local Storage).
• Audio: All sounds and music synthesized with the Web Audio API. No external audio files.
• Performance: The backdrop is cached between frames, each coin’s rotation frames are pre-rendered once, and physics runs on a fixed 120-step-per-second timer, so movement stays consistent on mid-range phones and fast desktops alike.

Setup & Customization

1. Keep index.html beside its script folder (with the css, js, and images subfolders).
2. Open the HTML file in a browser, or upload the entire main_file folder to a static web host. If local-file restrictions cause missing styles or images, run it from a local web server.
3. For basic branding, edit the title, tagline, and lobby text in index.html, replace script/images/logo.webp and the favicons, or change the outfit names and prices in the outfits array in script/js/03-save-progress.js. Game content, functionality, and visual styling can be customized through the project files. JavaScript customization requires development knowledge — the level definitions, physics values, outfits, and audio engine all live in the JavaScript file.

Third-Party Services & Licensing

• Fonts: The interface uses the system fonts Trebuchet MS and Georgia from the player’s device. Nothing is downloaded from a CDN and no font files are redistributed, so there are no font license files to include.
• Artwork & Audio: The WebP, PNG, ICO, and SVG artwork ships inside main_file/script/images and is distributed with the project under the item’s license. All audio is synthesized in the browser with the Web Audio API.
• Other Dependencies: All code, artwork, and sound ship inside main_file; the game makes no requests to external libraries, services, or APIs.

Buyer FAQ

• Can I embed it in an iframe? The game has no built-in iframe restriction. Embedding depends on the host’s frame/security headers and the parent page; test on your target host. Add allow="fullscreen" to the iframe if you want the full-screen button to work.
• Does it work on phones and tablets? The layout responds to screen size, and on-screen Left, Right, Dash, and Jump buttons appear on touch devices. Portrait and landscape are supported; no specific orientation is required, and landscape shows a wider view of the valley.
• Does it work offline? Yes. Every file the game uses is in the project folder, and sound is synthesized in the browser, so no connection is needed once the files are on the device or host.
• Can I disable a screen or feature? There is no built-in feature switch. To hide a lobby button, use a CSS rule such as #openWardrobe { display: none !important; } instead of deleting its element, because the game scripts find their elements by id. Changing game rules means editing the numbered files in script/js/; development knowledge is recommended.
• Can I replace the artwork? Yes. Replace the WebP files in main_file/script/images with your own images using the same file names and dimensions, such as logo.webp (1280 × 640) or the 1536 × 864 backdrops. Outfits use 1672 × 941 sprite sheets with a 4 × 2 frame grid.

Changelog

• 1.0 Initial Release — Initial release of Pip’s Adventure.

No build tools, no installation, nothing to compile.