Fwoggy

FWOGGY-FLICK

Physics-Based Tile Hookshot

Grab tiles with your tongue • Launch them as projectiles • Survive the cascade

INSERT COIN

// PLAY DEMO

// HOW TO PLAY

CONTROLS

  • SPACE Extend tongue / Shoot / Retract
  • P  /  ESC Pause game
  • AUTO-AIM Frog auto-rotates −70° to +70°

MECHANICS

  1. 01 Shoot tongue upward to grab tiles
  2. 02 Tongue tip collides & captures tile
  3. 03 Retract — tile loads at your mouth
  4. 04 Press SPACE again to launch it
  5. 05 Tile flies, bounces & destroys others

TILE TYPES

Green border = grabbable • Tongue hit on non-grabbable tiles will bounce off.

Normal

NORMAL

Grab & launch. Destroyed on any hit.

Heart

HEART

Grab to instantly heal +1 HP. Cannot be launched.

Shield

SHIELD

Grab or shoot into to gain 3s invincibility.

Multishot

MULTISHOT

Grants a 3-shot burst on your next launch.

Ice

ICE

Grab or hit to freeze grid for 5 seconds.

Slow

SLOW

Freezes then slows grid speed temporarily.

Bomb

BOMB

Explodes in a 3×3 area. Chain reactions!

Spike

SPIKE

Deflects projectiles. Takes 2 hits. Not grabbable.

Poison

POISON

Damages you on tongue contact. Grab at your own risk.

Hardened

HARDENED

Armoured — takes 2 hits to destroy. Not grabbable.

OBJECTIVE

The grid scrolls down at increasing speed. Destroy tiles before they pass you — each missed tile costs 1 HP (max 3 HP). Score 10–30 pts per tile destroyed plus 10 pts/second survived. Chain explosions and powerup combos for high scores!

// ABOUT THE PROJECT

Fwoggy-Flick is a tile-based physics game built entirely from scratch using vanilla JavaScript and the Canvas API—no game engines, no physics libraries. Every system—collision detection, state machines, particle effects—was hand-implemented to sharpen core game-development fundamentals.

TECHNICAL HIGHLIGHTS

⚙️

Custom Physics Engine

Hand-implemented collision detection using the Separating Axis Theorem (SAT) for pixel-perfect collision between rotating convex polygons. Two-phase: AABB broad-phase for performance, SAT narrow-phase for accuracy.

🎭

Finite State Machines

FSM pattern for Player (IDLE → EXTENDING → RETRACTING → LOADED → DEATH) and GameManager (MENU → PLAYING → PAUSED → GAMEOVER). Prevents edge cases and enables scalable behaviour control.

✨

Pool-Based Particle System

Zero heap allocations per frame after init. 500-particle pool with emitter methods per game event: tileDestroy, bombExplosion, playerHurt, powerup, tongueGrab, tileHit. 2-pass render (rings then squares).

🏗️

Object-Oriented Architecture

Inheritance hierarchy with base GameObject class. Polymorphic onHit() and onDestroy() methods enable tile-specific behaviours without switch-case sprawl. Composition over inheritance where appropriate.

🎨

Sprite System & Rendering

JSON atlas-based sprite rendering with frame animation. requestAnimationFrame loop with fixed deltaTime for time-independent physics. Arcade HUD drawn entirely on-canvas with Press Start 2P pixel font.

🔀

Procedural Content Generation

Weighted random tile spawning with an infinite scrolling grid. Dynamic difficulty — scroll speed scales with score. Tile recycling and pooling prevent GC pressure during long sessions.

📺

Canvas Fullscreen & Scaling

Fullscreen API (requestFullscreen + webkit fallback) with JS letterbox scaling. scaleToFit() calculates min(vw, vh×ASPECT) and updates canvas CSS dimensions, with a resize listener active during fullscreen.

💾

Data Persistence

LocalStorage leaderboard with score tracking across sessions. Score system: 10 pts/second survived, 10–30 pts per tile (type-dependent), with dynamic speed scaling as a soft difficulty curve.

LEARNING OUTCOMES

Computer Science

  • SAT collision detection from academic resources & papers
  • Vector maths — dot products, polygon projections, normals
  • Object pooling for zero-GC particle system design
  • Two-phase collision for broad/narrow performance split

Software Engineering

  • FSM, Strategy Pattern, Module Pattern throughout
  • Single responsibility, separation of concerns
  • ES6 modules with clean dependency trees
  • Composition vs inheritance trade-off decisions

Game Development

  • Update/render loop separation, fixed-timestep physics
  • Projectile trajectory, velocity degradation, bounce mechanics
  • FSM transitions preventing impossible game states
  • Pool-based particles with multi-pass canvas rendering

Debugging & Problem Solving

  • Debugged rotation/collision interactions on-canvas visually
  • Resolved FSM edge cases in tongue retract & tile load flow
  • Diagnosed GC spikes; redesigned to pool-based allocation
  • Canvas fullscreen letterbox scaling across browsers

KEY FEATURES

  • SAT Collision: Pixel-perfect on arbitrary rotating convex polygons
  • Physics Projectiles: Velocity vectors & bounce degradation (max 5 bounces)
  • Chain Reactions: Bomb tiles create 3×3 cascade explosions
  • Particle System: 500-pool, zero GC, 6 emitter types with ring+square passes
  • 10 Tile Types: Normal, Hardened, Bomb, Ice, Slow, Spike, Poison, Heart, Shield, Multishot
  • Dynamic Difficulty: Grid speed scales progressively with player score
  • Arcade HUD: On-canvas sidebar with live stats, tile guide & sprite icons
  • Fullscreen Mode: Letterbox scaling with Fullscreen API + resize listener
  • Leaderboard: Persistent best-score via localStorage
  • Powerup System: Shield (invincibility), Multishot (3x burst), Heal, Freeze, Slow