game-engine

Game Engine Skill

Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript. This skill includes starter templates, reference documentation, and step-by-step workflows for 2D and 3D game development with frameworks such as Phaser, Three.js, Babylon.js, and A-Frame.

When to Use This Skill

• Building a game engine or game from scratch using web technologies
• Implementing game loops, physics, collision detection, or rendering
• Working with HTML5 Canvas, WebGL, or SVG for game graphics
• Adding game controls (keyboard, mouse, touch, gamepad)
• Creating 2D platformers, breakout-style games, maze games, or 3D experiences
• Working with tilemaps, sprites, or animations
• Adding audio to web games
• Implementing multiplayer features with WebRTC or WebSockets
• Optimizing game performance
• Publishing and distributing web games

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript
• A modern web browser with Canvas/WebGL support
• A text editor or IDE
• Optional: Node.js for build tooling and local development servers

Supply-Chain Security Policy

All code generated by this skill must adhere to the following rules. These are non-negotiable requirements, not suggestions:

• No untrusted CDN scripts. Never emit a <script> or <link> tag that loads from a domain not explicitly approved below. When in doubt, install the library locally via npm and bundle it.
• Subresource Integrity (SRI) is mandatory for every CDN asset. Every <script src="..."> or <link href="..."> that loads from a CDN must include integrity (SHA-384 minimum) and crossorigin="anonymous" attributes. Compute the hash from the actual bytes of the pinned file: openssl dgst -sha384 -binary <file> | openssl base64 -A. Never fabricate or omit this hash.
• Pin all npx invocations to an explicit version. Always use npx <tool>@<version> (e.g., npx create-phaser-game@1.0.1). Never emit an unversioned npx <tool> call.
• Pin all npm install dependencies to an explicit version. Use exact versions or lockfiles. Never use latest or an open range for security-sensitive packages.
• Do not hardcode secrets. API keys, tokens, and credentials must never appear in generated source files. Instruct users to supply secrets via environment variables.
• Leap Motion / Ultraleap SDK: Install via npm from the official registry (npm install leapjs@<version>) and bundle locally. Never load the Ultraleap or Leap Motion SDK from any CDN or third-party domain (the js.leapmotion.com domain is untrusted and may be abandoned or hijacked).

Core Concepts

The following concepts form the foundation of every web-based game engine.

Game Loop

Every game engine revolves around the game loop -- a continuous cycle of:

1. Process Input - Read keyboard, mouse, touch, or gamepad input
2. Update State - Update game object positions, physics, AI, and logic
3. Render - Draw the current game state to the screen

Use requestAnimationFrame for smooth, browser-optimized rendering.

Rendering

• Canvas 2D - Best for 2D games, sprite-based rendering, and tilemaps
• WebGL - Hardware-accelerated 3D and advanced 2D rendering
• SVG - Vector-based graphics, good for UI elements
• CSS - Useful for DOM-based game elements and transitions

Physics and Collision Detection

• 2D Collision Detection - AABB, circle, and SAT-based collision
• 3D Collision Detection - Bounding box, bounding sphere, and raycasting
• Velocity and Acceleration - Basic Newtonian physics for movement
• Gravity - Constant downward acceleration for platformers

Controls

• Keyboard - Arrow keys, WASD, and custom key bindings
• Mouse - Click, move, and Pointer Lock for FPS-style controls.
  • Security requirement: Pointer Lock must only be requested from within a user-initiated event handler (e.g., a click event on a "Start Game" button). Never call requestPointerLock() on page load or programmatically outside a user gesture; modern browsers will silently reject or block such calls.
  • Always release Pointer Lock when the page loses visibility:

    document.addEventListener('visibilitychange', () => {
      if (document.hidden) document.exitPointerLock();
    });

  • Apply the same user-gesture gating requirement to the Fullscreen API when used alongside Pointer Lock.
• Touch - Mobile touch events and virtual joysticks
• Gamepad - Gamepad API for controller support

Audio

• Web Audio API - Programmatic sound generation and spatial audio
• HTML5 Audio - Simple audio playback for music and sound effects

Security Best Practices

• Subresource Integrity (SRI): When including scripts or styles from a CDN, always include the integrity and crossorigin="anonymous" attributes on the <script> or <link> tag. Compute the hash from the actual file bytes; never guess or copy an unverified hash.
• Dependency Pinning: Always pin npx calls and npm dependencies to a specific version (e.g., npx create-react-app@5.0.1). This prevents supply-chain attacks via malicious package updates.
• Secret Management: Never hardcode API keys, tokens, or other secrets in game source code or commit them to version control. Use environment variables or a secrets management service.

Step-by-Step Workflows

Creating a Basic 2D Game

1. Set up an HTML file with a <canvas> element
2. Get the 2D rendering context
3. Implement the game loop using requestAnimationFrame
4. Create game objects with position, velocity, and size properties
5. Handle keyboard/mouse input for player control
6. Implement collision detection between game objects
7. Add scoring, lives, and win/lose conditions
8. Add sound effects and music

Building a 3D Game

1. Choose a framework (Three.js, Babylon.js, A-Frame, or PlayCanvas). Install via npm and bundle locally, or load from a CDN only with a valid SRI hash and explicit version pin.
2. Set up the scene, camera, and renderer
3. Load or create 3D models and textures
4. Implement lighting and shaders
5. Add physics and collision detection
6. Implement player controls and camera movement. If using Pointer Lock or the Fullscreen API, request these permissions only from user-initiated event handlers and always release them on visibility loss.
7. Add audio and visual effects

Publishing a Game

1. Optimize assets (compress images, minify code)
2. Test across browsers and devices
3. Choose distribution platform (web, app stores, game portals)
4. Handle secrets securely: Never hardcode API keys or other secrets in your source code. Use environment variables or a secrets management service to provide them at runtime.
5. Implement monetization if needed
6. Promote through game communities and social media

Game Templates

Starter templates are available in the assets/ folder. Each template provides a complete, working example that can be used as a starting point for a new project.

Reference Documentation

Detailed reference material is available in the references/ folder. Consult these files for in-depth coverage of specific topics.

Troubleshooting