JavaScript
Browser Games
Build a real canvas game that runs in any browser, and learn the game loop, movement, collisions and scoring along the way.
Start the trackFree, no sign-up needed
What you'll learn
- The game loopCall update, then draw, about sixty times a second
- Keyboard stateTrack which keys are held down on every frame
- Rectangle collisionsA hits(a, b) function that doesn't count touching as a collision
- A Pong paddleA paddle that stays on the court and a bounce the player controls
- Gravity and jumpingFalling that speeds up and jumping only from the ground
- The enemy spawnerAccumulate time and cap the number of enemies
- Game statesOne state variable and a pure transition function
- Sprite sheetsPick which cell to draw and when to draw it
- A particle systemCreate, move and safely remove particles
- A camera that follows the playerShow a world that's bigger than the screen
Track contents
10 lessons, 2.5 hours in total- 1The game loopJavaScriptCall update, then draw, about sixty times a second14 min
- 2Keyboard stateJavaScriptTrack which keys are held down on every frame14 min
- 3Rectangle collisionsJavaScriptA hits(a, b) function that doesn't count touching as a collision14 min
- 4A Pong paddleJavaScriptA paddle that stays on the court and a bounce the player controls16 min
- 5Gravity and jumpingJavaScriptFalling that speeds up and jumping only from the ground14 min
- 6The enemy spawnerJavaScriptAccumulate time and cap the number of enemies14 min
- 7Game statesJavaScriptOne state variable and a pure transition function14 min
- 8Sprite sheetsJavaScriptPick which cell to draw and when to draw it14 min
- 9A particle systemJavaScriptCreate, move and safely remove particles15 min
- 10A camera that follows the playerJavaScriptShow a world that's bigger than the screen13 min