Welcome to Our Homeschool Game Design Curriculum: Web Game Design

Course Sample for Our Web Game Design Curriculum

HTML5 Canvas and JavaScript Lesson 3: Screen Coordinates and Colors

This week we are going to take a closer look at the way we specify locations and colors on the <canvas> drawing surface.

FillStyle Colors

Remember last week that we selected a color for our filled-in shapes using the fillStyle property:

ctx.fillStyle = “blue”;

The fillStyle property is very flexible, and can be used to choose a solid color or even a gradient or pattern! You can use several different formats to choose a color. Here are a few of the color options:

Open your existing “index.html”. Try setting the fillStyle using the rgb() pattern with red, green, and blue components. What interesting colors can you make that don’t match any pre-defined name?

To view a full sample of this course, click here.

Course Outline for Our Web Game Design Curriculum

Forty-four Web Game Design curriculum lessons teach homeschool teens how to create some simple games right in their web browsers.

• Week One: Using File Explorers and Text Editors
• Week Two: Web Browsers and HTML Files
• Week Three: Introducing JavaScript
• Week Four: Introducing the <canvas> Element
• Week Five: Screen Coordinates and Colors
• Week Six: Canvas Paths
• Week Seven: Simple JavaScript Variables
• Week Eight: JavaScript Functions and Animation Loops
• Week Nine: Logical Expressions and Flow Control
• Week Ten: Complex JavaScript Objects
• Week Eleven: Using Keyboard Input
• Week Twelve: Key Combinations and States
• Week Thirteen: Using Mouse Input
• Week Fourteen: Displaying Images
• Week Fifteen: Stretching and Clipping Images
• Week Sixteen: Image Transparency
• Week Seventeen: Sprites
• Week Eighteen: Arrays
• Week Nineteen: Loops
• Week Twenty: Collision Detection
• Week Twenty-One: Firing Shots
• Week Twenty-Two: Managing Speeds and Lifespans
• Week Twenty-Three: Keeping Score
• Week Twenty-Four: Keeping Time
• Week Twenty-Five: Buttons
• Week Twenty-Six: Adding Text Input
• Week Twenty-Seven: Adding Numeric Input
• Week Twenty-Eight: Adding Checkboxes
• Week Twenty-Nine: Sound Files
• Week Thirty: Playing Sounds
• Week Thirty-One: Volume Control
• Week Thirty-Two: Background Music
• Week Thirty-Three: Sprite Sheets
• Week Thirty-Four: Continuous Animation
• Week Thirty-Five: Animation Shorts
• Week Thirty-Six: Sprite Sheet Editors
• Week Thirty-Seven: Virtual Worlds
• Week Thirty-Eight: A Larger World
• Week Thirty-Nine: Mini-Maps
• Week Forty: Background Tiles
• Week Forty-One: Resized Viewport
• Week Forty-Two: Multiple Viewports
• Week Forty-Three: Multiple Players
• Week Forty-Four: Finishing Touches