Vanilla JavaScript: Mobile Game Programming

Course details

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.

Learning objectives
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

Concepts

0. Introduction

01 - Optimize your JavaScript with a game
02 - What you need to know

1. Game Programming

03 - Game programming basics
04 - Choose an editor
05 - Demo the finished product

2. Your First Game

06 - Your first game
07 - Create the game elements using HTML
08 - Define the initial conditions using CSS and link the style sheet to HTML
09 - 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

3. Animation

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

4. Moving On - Setting up the Rebound Game

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

5. The Game Loop

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

6. Make It Mobile

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

7. Game Controls

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

8. Add Some Noise

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

Conclusion

52 - Browser and device support
53 - Deployment
54 - Review optimizations
55 - Next steps