Game Engine
Bootstrap a mobile-friendly 2D maze game with Phaser Arcade Physics and tilt or keyboard controls.
Overview
Game Engine is an agent skill for the Build phase that scaffolds a Phaser-based 2D tilt-controlled maze game with menus, physics, and multi-level timers.
Install
npx skills add https://github.com/github/awesome-copilot --skill game-engineWhat is this skill?
- Phaser v2 Arcade Physics maze with ball, walls, and target hole per level
- Device Orientation API tilt on mobile plus arrow-key control on desktop
- Multi-scene flow: Boot, Preloader, MainMenu, Howto, Game
- Collision bounce with audio and optional vibration haptics
- Per-level and total timer progression across levels
- 5 named game scenes: Boot, Preloader, MainMenu, Howto, Game
Adoption & trust: 10.2k installs on skills.sh; 34.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a playable mobile maze prototype but lack a structured Phaser scene and control template.
Who is it for?
Solo devs shipping a quick HTML5 game demo or jam entry with orientation controls.
Skip if: Teams building 3D engines, native console titles, or server-authoritative multiplayer without extending the template.
When should I use this skill?
When starting or extending a 2D maze or tilt-ball Phaser prototype from the documented Cyber Orb–style structure.
What do I get? / Deliverables
You get a documented folder layout, scene graph, and control model ready to customize levels, assets, and rules.
- index.html plus src/ scene modules
- Playable multi-level maze loop
- Mobile and desktop control paths
Recommended Skills
Godot Gdscript Patternswshobson/agents
Unity Ecs Patternswshobson/agents
Game Developerjeffallan/claude-skills
Game Developmentsickn33/antigravity-awesome-skills
Unity Developerrmyndharis/antigravity-skills
Godot Best Practicesjwynia/agent-skills
Journey fit
How it compares
Use as a Phaser starter template instead of generic empty canvas snippets from chat.
Common Questions / FAQ
Who is game-engine for?
Indie builders and agent-assisted coders creating browser or mobile-web 2D maze or tilt-ball games with Phaser.
When should I use game-engine?
During Build frontend work when you need scenes, physics collisions, and device tilt wired before polish and ship testing.
Is game-engine safe to install?
Check the Security Audits panel on this page; the template references external demos and CDN-style assets you should vet before production.
SKILL.md
READMESKILL.md - Game Engine
# 2D Maze Game Template A mobile-optimized 2D maze game where players guide a ball through a labyrinth of obstacles to reach a target hole. The game uses the **Device Orientation API** for tilt-based motion controls on mobile devices and keyboard arrow keys on desktop. Built with the **Phaser** framework (v2.x with Arcade Physics), it features multi-level progression, collision detection, audio feedback, vibration haptics, and a timer system. **Source reference:** [MDN - HTML5 Gamedev Phaser Device Orientation](https://developer.mozilla.org/en-US/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation) **Live demo:** [Cyber Orb](https://orb.enclavegames.com/) **Source code:** [GitHub - EnclaveGames/Cyber-Orb](https://github.com/EnclaveGames/Cyber-Orb) --- ## Game Concept The player controls a ball (the "orb") by tilting their mobile device or pressing arrow keys. The ball rolls through a maze of horizontal and vertical wall segments. The objective on each level is to navigate the ball to a hole at the top of the screen while avoiding walls. Collisions with walls trigger a bounce, a sound effect, and optional vibration. A timer tracks how long the player takes per level and across the entire game. --- ## Project Structure ``` project/ index.html src/ phaser-arcade-physics.2.2.2.min.js Boot.js Preloader.js MainMenu.js Howto.js Game.js img/ ball.png hole.png element-horizontal.png element-vertical.png button-start.png loading-bg.png loading-bar.png audio/ bounce.ogg bounce.mp3 bounce.m4a ``` --- ## Phaser Setup and Initialization ### HTML Entry Point ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Cyber Orb</title> <style> body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/Boot.js"></script> <script src="src/Preloader.js"></script> <script src="src/MainMenu.js"></script> <script src="src/Howto.js"></script> <script src="src/Game.js"></script> </head> <body> <script> (() => { const game = new Phaser.Game(320, 480, Phaser.CANVAS, "game"); game.state.add("Boot", Ball.Boot); game.state.add("Preloader", Ball.Preloader); game.state.add("MainMenu", Ball.MainMenu); game.state.add("Howto", Ball.Howto); game.state.add("Game", Ball.Game); game.state.start("Boot"); })(); </script> </body> </html> ``` - Canvas size: `320 x 480` - Renderer: `Phaser.CANVAS` (alternatives: `Phaser.WEBGL`, `Phaser.AUTO`) --- ## Game State Architecture The game follows a linear state flow: ``` Boot --> Preloader --> MainMenu --> Howto --> Game ``` ### Boot State Loads minimal assets for the loading screen and configures scaling. ```javascript const Ball = { _WIDTH: 320, _HEIGHT: 480, }; Ball.Boot = function (game) {}; Ball.Boot.prototype = { preload() { this.load.image("preloaderBg", "img/loading-bg.png"); this.load.image("preloaderBar", "img/loading-bar.png"); }, create() { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.state.start("Preloader"); }, }; ``` ### Preloader State Displays a visual loading bar while loading all game assets. Audio is loaded in multiple formats for cross-browser compatibility. ```javascript Ball.Preloader = function (game) {}; Ball.Preloader.prototype = { preload() { this.preloadBg = this.add.sprite( (Ball._WIDTH - 297) * 0.5, (Ball._HEIGHT - 145) * 0.5, "preloaderBg" ); this.preloadBar = this.add.sprite( (Ball._WIDTH - 158) * 0.5, (Ball._HEIGHT - 50) * 0.5, "preloaderBar" ); this.load.setPreloadSprite(this.preloadBar); this.load.image("ball", "img/ball.png"); this.load.image("hole", "img/hole.png"); this.load.image("element-w", "img/element-