Overview
-
Practice JavaScript programming—the fun way. Learn how to write more fast, efficient code by creating a mobile-friendly game using vanilla JavaScript.
Syllabus
-
Introduction
- Optimize your JavaScript with a game
- What you need to know
- Game programming basics
- Choose an editor
- Demo the finished product
- Your first game
- Create the game elements using HTML
- Define the initial conditions using CSS and link the style sheet to HTML
- Define the objects for the game using JavaScript
- Lay out the game objects
- Use random numbers to move the game's dot
- Create the game loop and start it up
- Animation basics
- Get started with replacement animation
- Create replacement animation using JavaScript
- Add some math: Get started with point-to-point animation
- Use a formula to animate objects
- The JavaScript coordinate system
- Boundary collisions and how to simulate them
- Create the game elements using HTML
- Add a stylesheet to the game
- Use CSS to style and position the game elements
- Test the game's CSS using Chrome's Developer Tools
- Create variables for the DOM objects using JavaScript
- Initialize the HTML DOM objects
- Layout the gaming area
- Listen for and handle keyboard events
- Optimize your JavaScript
- Start the game loop
- Introduction to requestAnimationFrame()
- Use requestAnimationFrame()
- Rendering: Drawing game objects on-screen
- Physics: Detect collisions
- Playability: Manage difficulty
- Implement end conditions
- Support touch and mouse events
- Add event listeners for mouse and touch events
- Add mouse and touch event handlers to the script
- Improving game play: Better collision detection
- Implement improved collision detection
- Testing in the Android emulator and iOS simulator
- Give the user some control with a settings screen
- Add the game controls DOM objects
- Add event listeners and handlers for the game controls
- Change the difficulty of the game
- Start a new game
- Add the HTML elements for sound
- Initialize the DOM objects for sound
- Play sounds on a mobile device
- Toggle sound effects
- Toggle background music
- Browser and device support
- Deployment
- Review optimizations
- Next steps
