Vanilla JavaScript: Mobile Game Programming

Vanilla JavaScript: Mobile Game Programming

Every developer wants to write fast and mobile-friendly projects. Using a game to practice JavaScript programming will enhance your skills in all areas of development: whether you’re designing corporate websites, ecommerce apps, multimedia players, complex interactive navigation, or yes, games. Join instructor Tom Duffy as he guides you through practical exercises that will build your JavaScript skills the fun way. Learn how to create and animate HTML objects, handle user input, implement a game loop, determine how objects interact, and style all the elements with CSS. Tom also shows how to incorporate music and sound effects and test the final game using Android and iOS emulators. By the end of the course, you’ll have “gamed” your way to better vanilla JavaScript skills.

Topics include:

  • 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


  • 英文名称:Vanilla JavaScript: Mobile Game Programming
  • 时长:2小时29分
  • 字幕:英语


  1. Optimize your JavaScript with a game
  2. What you need to know
  3. Game programming basics
  4. Choose an editor
  5. Demo the finished product
  6. Your first game
  7. Create the game elements using HTML
  8. Define the initial conditions using CSS and link the style sheet to HTML
  9. Define the objects for the game using JavaScript
  10. Lay out the game objects
  11. Use random numbers to move the game's dot
  12. Create the game loop and start it up
  13. Animation basics
  14. Get started with replacement animation
  15. Create replacement animation using JavaScript
  16. Add some math: Get started with point-to-point animation
  17. Use a formula to animate objects
  18. The JavaScript coordinate system
  19. Boundary collisions and how to simulate them
  20. Create the game elements using HTML
  21. Add a stylesheet to the game
  22. Use CSS to style and position the game elements
  23. Test the game's CSS using Chrome's Developer Tools
  24. Create variables for the DOM objects using JavaScript
  25. Initialize the HTML DOM objects
  26. Layout the gaming area
  27. Listen for and handle keyboard events
  28. Optimize your JavaScript
  29. Start the game loop
  30. Introduction to requestAnimationFrame()
  31. Use requestAnimationFrame()
  32. Rendering: Drawing game objects on-screen
  33. Physics: Detect collisions
  34. Playability: Manage difficulty
  35. Implement end conditions
  36. Support touch and mouse events
  37. Add event listeners for mouse and touch events
  38. Add mouse and touch event handlers to the script
  39. Improving game play: Better collision detection
  40. Implement improved collision detection
  41. Testing in the Android emulator and iOS simulator
  42. Give the user some control with a settings screen
  43. Add the game controls DOM objects
  44. Add event listeners and handlers for the game controls
  45. Change the difficulty of the game
  46. Start a new game
  47. Add the HTML elements for sound
  48. Initialize the DOM objects for sound
  49. Play sounds on a mobile device
  50. Toggle sound effects
  51. Toggle background music
  52. Browser and device support
  53. Deployment
  54. Review optimizations
  55. Next steps