Ball with Mouse Paddle - Warm-Up and Review
Section Introduction
Create the HTML File
Proper HTML Header
JavaScript in HTML with Console Use
HTML5 Canvas with Setup Function
Draw Filled Rectangle and Circle
Variable and Timed Updates for Motion
Modify Speed, Also for Vertical Motion
Reason for a Big Rectangle Each Frame
Separate the Motion and Draw Code
Make Functions for Fill Rect and Circle
Mouse-Controlled Horizontal Paddle
Reset Ball When It Goes Off Bottom
Move Paddle From Edge, Reflect Ball
Aim Based on Where Ball Hits Paddle
Section 1 Review
Row of Removable Bricks
Section Introduction
Display Mouse Coordinate by Cursor
Set Up and Display the First Brick
Draw Multiple Bricks with Gaps
Vanish Individual Bricks
Renumber Bricks to Start at Zero
Using an Array for Bricks
How For() Can Loop on the Brick Array
Clearing Isolated Bricks in the Array
Label Deeply Stacked Closing Braces
Section 2 Review
Ball-Brick Grid Collision
Section Introduction
Display Tile Coordinate Near Mouse
Supporting Multiple Brick Rows
Changing Brick "Count" to "Columns"
Support Removal of Each Brick Position
Make More Bricks, and Smaller
Compute Index From Row and Column
Remove Bricks Under Mouse
Remove Bricks Where the Ball Goes
Fix Edge-Wrap Collision Bug
Bounce Ball When It Hits Bricks
How to Start the Ball in the Center
Section 3 Review
Advanced Ball Collision
Section Introduction
Cutting Ball Code Into Functions
Understanding the Ball-Brick Side Test
Get the Ball Bouncing Off Brick Sides
Add Cheat to Reposition the Ball
Fix the Covered-Edge-Corner Case
Section 4 Review
Finish Brick Gameplay
Section Introduction
Keep Count of Bricks Remaining
Start with Empty Gutter at Top
Reset Ball at Start, Bricks After Last Hit
Reset Bricks When Player Misses Ball
Fix Bug with Hitting Bottom Bricks
Testing to Look for Remaining Bugs
Fixing the Ball-Stuck-Along-Edge Bug
Play Testing to Look for Bugs Again
Section 5 Review
Adapt the Grid for Racing
Section Introduction
Now Let's Tear This Up
Remove the Paddle
Rename "Brick" in the Code to "Track"
Stretch Tile Grid to Cover the Canvas
Design a Grid Layout by Hand
Quick Example of Grid Map Design
Fill in a Basic Track Layout
Set Ball Start Location in the Array
Section 6 Review
Draw and Code an Image
Section Introduction
How to Create the Car Image
Turning on Headlights and Taillights
Import and Display the Car Image
Section 7 Review
Spin and Angled Motion
Section Introduction
Replace "Ball" in Code with "Car"
Spin the Car Image
Drive the Car the Way It Faces
Use of Sine and Cosine for Games
Understanding Why We Use Sin & Cos
Clean Away Outdated Ball Code
Section 8 Review
Giving You the Car Keys
Section Introduction
Functions on Key Press and Release
Find the Key Code for Each Arrow Key
Crude Steering and Gas on Key Presses
Treat Keys More Like Buttons
Lose Speed From Driving Into Walls
Slow Down Over Time
Fix Car's Start Direction
Section 9 Review
Break to Get Organized
Section Introduction
Label Car Tuning Values
Create Labels for Tile Types
JavaScript and HTML in Different Files
Give Common Graphics Code a File
Divide Code Into Files by Purpose
Section 10 Review
Graphical Tiles
Section Introduction
Draw the Road Tile Image
Create Wall Tile Art
Load Your Tile Art in Code
Display the Tile Images
Stop Drawing Giant Rect Every Frame
Section 11 Review
Improve Image Loading
Section Introduction
Bring Together All Image Code
Wait for the Last Image to Load
Connect OnLoad Automatically
Auto Count Images to Load: A Bad Way
Auto Count Images to Load: Good Way
Add a Basic Loading Screen
Section 12 Review
New World Tile Types
Section Introduction
Divide Project Files Into Folders
Create Images for New Track Tiles
Load New Track Images in Code
Put New Track Types in Level Grid
Get New Tile Types to Block Car
Show the Images for New Track Types
Make a Layout Using New Tiles
Tune Car & Disallow Spinning in Place
Section 13 Review
Accelerate Your Project
Section Introduction
Save All Track Tile Art to an Array
Draw Track Tile Based on Index
Optimizing the Track Draw Loops
Section 14 Review
Add a Classy Player 2 Car
Section Introduction
Put Car's Vars and Functions in a Class
Update Use of Variables in the Class
Create Player One's Car Instance
Make a Second Car for Player Two
Copy and Recolor Blue Car to Green
Import and Use the Green Car Image
Use Different Control Keys Per Car
Section 15 Review
Reach the Finish Line
Section Introduction
Decrease Time to Test the Finish Line
Vary Consequences by Tile Type Hit
Assign Each Car a Unique Name
Declare Winner When Goal is Reached
Understanding the Problem with Reset
Separate Active Map From Saved Layout
Reset When Finish Line is Reached
Reset Car Speed When Map Reloads
How to Support Multiple Level Maps
Racing Game Wrap-Up
Section 16 Review
Racing to Adventure
Section Introduction
Start with Racing Source Minus Player 2
Rename files and variables
Rework Drive Motion Into Walking
Enlarge Tiles to Bring Camera Closer
Replace Racing Art with Dungeon Art
Support Partially Transparent Tiles
New Layout and Code for Keys & Doors
Adventure Core Wrap-Up
Section 17 Review
More Grid Applications
Section Introduction
Many Balls in Grid
Scrolling Camera
Side View Platform Jumper
Moving Grid with Collision Gaps
Board Game with Mouse Control
Course Wrap-Up
Section 18 Review
Demonstration of Games You're Ready to Make Next, Plus a Few Additional Concepts
Bonus Lecture: What to Create Next (Real Game Examples by Gamkedo Club Members)
Your Included PDF Textbook: Hands-On Intro to Game Programming
Full Included PDF Textbook: Hands-On Intro to Game Programming