OpenClaw: Web-Based Pixel RPG Game Prototype

Purpose and Significance

OpenClaw is an experimental web-based game prototype exploring the intersection of procedural game design and AI-assisted development. Built as a top-down pixel art adventure game inspired by Stranger Things and classic SNES RPGs, it demonstrates how modern web technologies (Phaser 3, JavaScript) can create immersive interactive experiences. The project serves as both a playable proof-of-concept and a reference architecture for developers building browser-based games with dynamic content systems and modular design patterns.

Key Features

• 8-Directional Movement System: Smooth collision-aware character movement supporting keyboard (WASD) and touch-based virtual joystick controls for mobile devices.
• Dynamic Level Loading: ASCII-style tile data structures enable rapid map creation and iteration without manual sprite placement.
• Zone Transition System: Fade-screen teleportation mechanics manage seamless transitions between interconnected game areas (school yard, hallways, basement).
• Mobile-First Input: Hybrid input architecture handles desktop keyboard controls and touch drag-based joystick for responsive mobile gameplay.
• Modular Systems Architecture: Core runtime split into discrete systems (InputController, LevelLoader, DoorSystem, PortalSystem, NpcSystem) hosted under src/systems/, enabling independent testing and extension.
• Content Validation Layer: validateLevel.js performs early-stage content checks; tileLegend.js maps tile characters to visual/behavioral rules, decoupling data from rendering logic.
• CI/CD Automation: GitHub Actions auto-deploys builds to GitHub Pages, streamlining the development-to-deployment pipeline.
• Agent-Driven Documentation: Architecture guidelines and review instructions embedded in docs/agents/, supporting AI-assisted code generation and review workflows.

Project Scope and Vision

The game unfolds in a seemingly ordinary school setting where players explore corridors, classrooms, and a schoolyard—only to discover dark secrets lurking beneath the surface, particularly in the basement. This juxtaposition of mundane and supernatural creates narrative tension aligned with 1980s mystery aesthetics. The top-down 2D perspective with 16-bit pixel art delivers retro visual appeal while the web-based platform ensures accessibility across desktop and mobile devices.

Technical Architecture Overview

OpenClaw uses Phaser 3 as its core game engine, managing rendering, camera systems, physics/collision detection, and input handling. The architecture separates concerns into three layers:

• Rendering & Engine Layer (index.html): Handles display, camera positioning, physics simulation, and input binding.
• Game Systems Layer (src/systems/): Orchestrated by WorldScene, manages input, level loading, door/portal transitions, NPC groups, and state updates.
• Content Layer (src/content/): Defines tile semantics, level validation rules, and game-world metadata independent of rendering implementation.

Level data is stored as ASCII-style arrays in js/levels.js, allowing designers to visualize and edit maps as human-readable text. This approach dramatically reduces friction in level iteration and enables non-programmers to contribute content.

Current Implementation (v0.2)

The playable prototype includes three interconnected zones: the School Yard (sunny, starting area), Main Hallway (indoor, dimly lit), and The Basement (pitch black, atmospheric). Implemented features include smooth 8-directional movement with collision response, dynamic zone transitions with fade effects, and responsive mobile controls. The codebase demonstrates clean separation between input handling, collision logic, and content definition—patterns applicable to larger game projects.

Getting Started

Clone the repository and review docs/agents/README.md for architecture guidelines. Install dependencies via npm, then run the development server. The project structure is intentionally flat and readable: examine src/systems/ to understand how movement, levels, and transitions orchestrate, then explore src/content/ to see how tile definitions and level validation work. Playwright configuration indicates E2E testing capabilities; review test_output.json to understand the testing approach.

Who This Project Is For

• Game Developers: Reference implementation for modular, data-driven game architecture in JavaScript/Phaser.
• AI/ML Engineers: Proof-of-concept for AI-assisted game design and code generation workflows (via agent instructions in docs/agents/).
• Web Platform Developers: Example of handling complex input, physics, and state management in browser-based interactive experiences.
• Retro Game Enthusiasts: Playable tribute to 16-bit RPG design principles applied to modern web standards.
• Educational Institutions: Accessible codebase for teaching game development, systems architecture, and collaborative open-source contribution.

Roadmap and Future Direction

Planned features include NPC dialogue systems (teachers, students), a functional lighting engine (flashlight mechanic in the basement), hostile entities (rats, shadow creatures), inventory management, and key-based progression gates. These additions will test whether the modular systems architecture scales while maintaining the game's accessible, iterative design process.

Resources and Links

• Repository: https://github.com/cinaird/Openclaw
• Live Build: Deployed automatically to GitHub Pages via GitHub Actions
• Agent Instructions: docs/agents/README.md for architecture and development guidelines
• Technical Docs: AGENTS.md, AI_AND_ENTITY_SYSTEM.md, WORLD_BUILDING_AND_STATE.md
• Engine: Phaser 3
• Related Concepts: game-architecture-patterns, web-game-frameworks

Project created and maintained by cinaird. Active development as of February 2026.