Game Engine Skill

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

Core Concepts

Game Loop

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

requestAnimationFrame

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
• 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

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)
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
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. Implement monetization if needed
5. Promote through game communities and social media

Game Templates

assets/

paddle-game-template.md

2d-maze-game.md

2d-platform-game.md

gameBase-template-repo.md

simple-2d-engine.md

Reference Documentation

references/

basics.md

web-apis.md

techniques.md

3d-web-games.md

game-control-mechanisms.md

game-publishing.md

algorithms.md

terminology.md

game-engine-core-principles.md

Troubleshooting

webglcontextlost

webglcontextrestored