Back to Projects

SkyFudge

An original endless vertical climber built with a React hub and a React-free Canvas engine — procedural biomes, discovery/lore, and offline progression.

Next.jsTypeScriptReactTailwind CSSHTML5 CanvasFramer MotionZustandHowlernext-intl
1 / 2

Overview

SkyFudge is an original endless vertical jumper set in a forgotten world above the clouds. Players climb automatically while steering horizontally — the goal isn't just a height record, but curiosity about what waits above through biomes, discoveries, quests, and lore.

The game engine runs on HTML5 Canvas in pure TypeScript; menus, hub, and meta progression live in React / Next.js. Offline-first saves, EN/TR localization, and V2-ready service contracts (auth, cloud save, leaderboard) are built in from the start. Canvas owns simulation; React owns UI — neither leaks into the other.

Key Features

  • Auto-jump + horizontal control (keyboard, touch zones, or on-screen buttons)
  • Procedural tower generation with pooled platforms and upward-only camera
  • 15+ platform types — moving, breaking, ice, sticky, teleporter, fire, wind, portal
  • Power-ups including rocket, jetpack, shield, slow-mo, magnet, and mystery box
  • Enemies defeated by stomp or thrust — drones, ghosts, robots, birds, laser turrets
  • Ability system with Energy Bridge (temporary platforms) and energy regen
  • Segment & event directors — Coin Cave, Wind Tunnel, Low Gravity, Coin Rain
  • 8 biomes with smooth height-based transitions (Forest to Volcano)
  • XP / levels, skill tree, passive pets, and non-pay-to-win cosmetics
  • Daily / weekly / story quests with reward claim flow
  • Journal with lore tablets, relics, and secret locations
  • Game Hub shell with glass UI, settings, FPS overlay, and run-end summary
  • Offline-first LocalStorage via adapter; cloud interfaces ready for V2
  • Full UI localization with next-intl (EN + TR)

Challenges & Solutions

The core challenge was enforcing a hard split between the Canvas simulation and the React hub so gameplay logic stayed free of React, Zustand, and DOM dependencies. This was solved with a thin bridge for mount, input, and snapshots, plus service contracts for storage, audio, and future cloud features. Platform behaviors, segments, events, and abilities were designed as extensible registries so new content doesn't require rewriting the engine. Balancing procedural difficulty across 8 biomes while keeping frame timing stable with variable dt on desktop and mobile required careful pooling and camera constraints.