MarieLynneBlock 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
- Optimising 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
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:
- Process Input - Read keyboard, mouse, touch, or gamepad input
- Update State - Update game object positions, physics, AI, and logic
- Render - Draw the current game state to the screen
Use requestAnimationFrame for smooth, browser-optimised 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
- 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
- Set up an HTML file with a
<canvas>element - Get the 2D rendering context
- Implement the game loop using
requestAnimationFrame - Create game objects with position, velocity, and size properties
- Handle keyboard/mouse input for player control
- Implement collision detection between game objects
- Add scoring, lives, and win/lose conditions
- Add sound effects and music
Building a 3D Game
- Choose a framework (Three.js, Babylon.js, A-Frame, or PlayCanvas)
- Set up the scene, camera, and renderer
- Load or create 3D models and textures
- Implement lighting and shaders
- Add physics and collision detection
- Implement player controls and camera movement
- Add audio and visual effects
Publishing a Game
- Optimise assets (compress images, minify code)
- Test across browsers and devices
- Choose distribution platform (web, app stores, game portals)
- Implement monetization if needed
- 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.
| Template | Description |
|---|---|
paddle-game-template.md |
2D Breakout-style game with pure JavaScript |
2d-maze-game.md |
Maze game with device orientation controls |
2d-platform-game.md |
Platformer game using Phaser framework |
game-base-template-repo.md |
Game base template repository structure |
simple-2d-engine.md |
Simple 2D platformer engine with collisions |
Reference Documentation
Detailed reference material is available in the references/ folder. Consult these files for in-depth coverage of specific topics.
| Reference | Topics Covered |
|---|---|
basics.md |
Game development introduction and anatomy |
web-apis.md |
Canvas, WebGL, Web Audio, Gamepad, and other web APIs |
techniques.md |
Collision detection, tilemaps, async scripts, audio |
3d-web-games.md |
3D theory, frameworks, shaders, WebXR |
game-control-mechanisms.md |
Touch, keyboard, mouse, and gamepad controls |
game-publishing.md |
Distribution, promotion, and monetization |
algorithms.md |
Raycasting, collision, physics, vector math |
terminology.md |
Game development glossary |
game-engine-core-principles.md |
Core design principles for game engines |
Troubleshooting
| Issue | Solution |
|---|---|
| Canvas is blank | Check that you are calling drawing methods after getting the context and inside the game loop |
| Game runs at different speeds | Use delta time in update calculations instead of fixed values |
| Collision detection is inconsistent | Use continuous collision detection or reduce time steps for fast-moving objects |
| Audio does not play | Browsers require user interaction before playing audio; trigger playback from a click handler |
| Performance is poor | Profile with browser dev tools, reduce draw calls, use object pooling, and optimise asset sizes |
| Touch controls are unresponsive | Prevent default touch behaviour and handle touch events separately from mouse events |
| WebGL context lost | Handle the webglcontextlost event and restore state on webglcontextrestored |