Author
Tom Duffy
Released
8/5/2019- Creating game elements with HTML
- Defining conditions with CSS
- Defining objects with JavaScript
- Creating replacement animation with JavaScript
- Animating objects with formulas
- Simulating boundary collisions
- Styling and positioning elements with CSS
- Handling keyboard events
- Rendering game objects on screen
- Detecting collisions
- Managing difficulty
- Adding event listeners for mobile events
- Testing the game on mobile emulators
- Adding game controls
- Playing sound effects and music
- Deploying your JavaScript game
Skill Level Intermediate
Duration
Views
- [Tom] We're web developers. And we all want to write better JavaScript code. Wouldn't it be cool if we could learn how to optimize our JavaScript, and do it in a fun way? I'm going to show you how to optimize your JavaScript, while creating a mobile game that runs on nearly any device you can throw at it. I'm Tom Duffy. And I've been teaching web programming and creating websites for more than 20 years. I'll be your guide as we explore how to write better JavaScript code through game programming. If you're ready to take your JavaScript skills to the next level, and you'd like to do so in a fun, engaging way, join me for Vanilla JavaScript Game Programming on LinkedIn Learning. Ready? Let's roll.
-
Introduction
-
1. Game Programming
-
Game programming basics1m 24s
-
Choose an editor1m 52s
-
-
2. Your First Game
-
Your first game58s
-
Lay out the game objects3m 43s
-
-
3. Animation
-
Animation basics1m 36s
-
-
4. Moving On: Setting up the Rebound Game
-
Add a stylesheet to the game1m 43s
-
Layout the gaming area4m 5s
-
Optimize your JavaScript3m 35s
-
5. The Game Loop
-
Start the game loop1m 33s
-
Use requestAnimationFrame()1m 22s
-
Physics: Detect collisions4m 29s
-
Implement end conditions1m 44s
-
-
6. Make It Mobile!
-
7. Game Controls
-
Start a new game2m 19s
-
8. Add Some Noise!
-
Toggle sound effects3m 56s
-
Toggle background music2m 53s
-
Conclusion
-
Browser and device support1m 27s
-
Deployment1m 25s
-
Review optimizations2m 40s
-
Next steps2m 37s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Optimize your JavaScript with a game