Vanilla JavaScript: Mobile Game Programming

Practice JavaScript programming—the fun way. Learn how to write more fast, efficient code by creating a mobile-friendly game using vanilla JavaScript.

Introduction

• Optimize your JavaScript with a game
• What you need to know

1. Game Programming

• Game programming basics
• Choose an editor
• Demo the finished product

2. Your First Game

• 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

3. Animation

• 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

4. Moving On: Setting up the Rebound Game

• 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

5. The Game Loop

• Start the game loop
• Introduction to requestAnimationFrame()
• Use requestAnimationFrame()
• Rendering: Drawing game objects on-screen
• Physics: Detect collisions
• Playability: Manage difficulty
• Implement end conditions

6. Make It Mobile!

• 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

7. Game Controls

• 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

8. Add Some Noise!

• Add the HTML elements for sound
• Initialize the DOM objects for sound
• Play sounds on a mobile device
• Toggle sound effects
• Toggle background music

Conclusion

• Browser and device support
• Deployment
• Review optimizations
• Next steps