Welcome to Our Homeschool Game Design Curriculum: Web Game Design

Getting Started with Our Web Game Design Curriculum

With the Web Game Design curriculum, students learn how to create some simple games right in their web browsers. This is a programming-centric homeschool computer course, meaning students write (type) code to make things happen. The web design course covers several topics including starting a JavaScript game, as well as handling images and sound effects, input fields, 2D frame animation, virtual worlds, and much more. The student must be familiar with the day-to-day use of a computer before using this Web Game Design curriculum. Students should start with the first lesson and progress sequentially through the lessons, as they build on each other throughout the course.

Overview

• 44 weeks
• Includes text-based lessons and links to additional resources
• Grades 7th-12th

Supplies Needed

Corresponding downloads on SchoolhouseTeachers.com, computer access and web browser that supports HTML5, and notebook for storing notes

What to Do

Go to Class Lessons and download the lesson plan and lessons. Start with the Day 1 assignment on the lesson plan. Follow the instructions each day on the lesson plan and check them off when completed.

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.