Games Development with Typescript and Canvas
summary
Reimplements Pac‑Man using TypeScript, the Canvas API for 2D rendering and Web Audio for sound, with a hand‑built entity‑component system, sprite‑sheet processing via createImageBitmap, requestAnimationFrame game loop (aiming for 60fps / 16.66ms), keyboard polling abstraction, tile map layout (created by hand as CSV), and a ghost tracking system using Euclidean distance. Core systems are unit tested (sprite animation by timestamp). Demo runs with rendering, input and basic ghost AI but movement has some bugs and audio may require user interaction to autoplay.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:36Game project overview
- 2:29TypeScript benefits
- 6:27Canvas API rendering
- 8:28Web Audio API integration
- 10:13Core game loop
- 12:09Sprite management
- 14:14User input handling
- 15:39Tile-based level design
- 19:19Vector mathematics
- 23:14ECS architecture
- 29:38Game systems
- 32:07Live demo
- 32:56Conclusion and Q&A
related talks
25m"ECS and Engine-less GameDev in TypeScript"
50mBuild Your Own Game Engine in the Browser
25mJavascript as Play A Primer on Getting Started with Video Games
46mEmulating the NES/Famicom/Dendy with Web Technologies
45mArt.js
26mdeveloping videogames in JavaScript
27mHow NOT to build a video game
29mJavaScript and Game Development