Web Game Design

Leah Walton2024-12-13T12:12:55-05:00

Welcome to Our Homeschool Game Design Curriculum: Web Game Design

Do you have a student interested in coding? With our Web Game Design course, students in middle and high school learn how to create simple games right in their web browsers. Each of the forty-four text-based lessons guides homeschool teens through a digital adventure complete with instructional material, hands-on activities, and creative projects.

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: 7–12

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

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

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?

Transcript Information for Our Web Game Design Curriculum

Most Web Game Design curriculum weekly lessons generally take 1-2 hours to complete. Homeschool students who thoroughly complete the entire course may receive 0.5 computer science credit. (Deeper resources may be found at Mr. Yust’s website: www.homeschoolprogramming.com. There, the KidCoder and TeenCoder students are expected to be spending 3-5 hours a week on more intensive study, and Mr. Yust recommends 0.5 credit per semester, or 1.0 credit per year, for those courses.)

*Please be informed of your state’s academic requirements.

Visit our High School Help page for resources and information about:

Finding out your state’s academic requirements.
How to create a transcript
Keeping a schedule
Career Exploration
And more!

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 1: Using File Explorers and Text Editors
Week 2: Web Browsers and HTML Files
Week 3: Introducing JavaScript
Week 4: Introducing the <canvas> Element
Week 5: Screen Coordinates and Colors
Week 6: Canvas Paths
Week 7: Simple JavaScript Variables
Week 8: JavaScript Functions and Animation Loops
Week 9: Logical Expressions and Flow Control
Week 10: Complex JavaScript Objects
Week 11: Using Keyboard Input
Week 12: Key Combinations and States
Week 13: Using Mouse Input
Week 14: Displaying Images
Week 15: Stretching and Clipping Images
Week 16: Image Transparency
Week 17: Sprites
Week 18: Arrays
Week 19: Loops
Week 20: Collision Detection
Week 21: Firing Shots
Week 22: Managing Speeds and Lifespans
Week 23: Keeping Score
Week 24: Keeping Time
Week 25: Buttons
Week 26: Adding Text Input
Week 27: Adding Numeric Input
Week 28: Adding Checkboxes
Week 29: Sound Files
Week 30: Playing Sounds
Week 31: Volume Control
Week 32: Background Music
Week 33: Sprite Sheets
Week 34: Continuous Animation
Week 35: Animation Shorts
Week 36: Sprite Sheet Editors
Week 37: Virtual Worlds
Week 38: A Larger World
Week 39: Mini-Maps
Week 40: Background Tiles
Week 41: Resized Viewport
Week 42: Multiple Viewports
Week 43: Multiple Players
Week 44: Finishing Touches

More About Our Web Game Design Curriculum

Welcome to the SchoolhouseTeachers.com Web Game Design curriculum! Chris Yust, co-author of eight computer programming books for kids and teens, guides homeschool students through a digital adventure.

Please carefully read these student prerequisites before continuing:

Web Game Design curriculum students must have access to a Windows PC or Mac OS desktop/laptop computer. Many of the homeschool computer course lessons involve hands-on projects on the computer, and generally speaking, a tablet or smartphone will be insufficient or cramped.
This course should work across nearly all versions of Windows and Mac OS. However, the student MUST have a reasonably recent web browser that supports HTML5, such as: Internet Explorer 11+, Firefox 25.0+, Safari 7+, Google Chrome 30+
Material is geared for 6th-12th grade homeschool students in a self-study environment. Teachers do not have to be computer science experts themselves! Younger students may participate at the parent’s discretion; just be prepared as a teacher to offer them additional guidance and assistance as needed.
Web Game Design curriculum students should already be fundamentally familiar with computers for daily use. These homeschool computer lessons do not cover computer “literacy” topics such as how to use a mouse, keyboard, or navigate through an operating system.
This course does not cover word processing, spreadsheets, or presentations, nor are those skills needed for the work in these lessons.

The Web Game Design lesson format typically includes some instructional material, as well as a hands-on activity the homeschool teen can complete on their own computer. Students may expect to spend about one hour per week completing the lessons and activities, though they are encouraged to creatively expand projects on their own if desired.

Please contact Mr. Yust with questions at chris@HomeschoolProgramming.com.

External links may be included within the course content; they do not constitute an endorsement or an approval by SchoolhouseTeachers.com of any of the products, services, or opinions of the corporation, organization, or individual. Contact the external site for answers to questions regarding its content. Parents may wish to preview all links because third-party websites include ads that may change over time.

Para traducir cualquier página web, haz clic en los tres puntos o líneas en la esquina superior derecha de tu navegador, o haz clic aquí para más información.

Web Game Design

Length: 44 weeks
Content type: Text based
Grades: 7–12

PRINT CERTIFICATE OF COMPLETION

Chris Yust

Crystal Calhoun2023-11-14T15:10:14-05:00

Chris Yust

Lesson Designer

Chris Yust is a 17-year veteran of the software industry and a father of two homeschooled…

Facebook

Quick Start

1. Bookmark the course for easy access during instruction.

2. Click “View Lesson Plan” and organize as desired (on computer desktop or in a printed format).

3. Gather necessary resources as listed in the lesson plan.

4. Click “Go to Class Lessons” and get started.

5. Enjoy the course!

6. Utilize Applecore or your own record keeping system throughout the course.

7. Print a certificate of completion.

Need help? Check out our tutorials or click the live chat box in the corner of your screen.

Related Classes You May Enjoy

All Computer and Technology Classes

Building Blocks of Computer Science

Editing Photos with GIMP

How to Use Microsoft Excel

How to Use Microsoft Word: Beyond the Basics

Internet Entrepreneurship for Teens

Keyboarding

LibreOffice Writer Basics

Podcasting to Change the World

Web Game Design

High School Computer and Technology Classes

Editing Photos with GIMP

How to Use Microsoft Excel

How to Use Microsoft Word: Beyond the Basics

Internet Entrepreneurship for Teens

Keyboarding

LibreOffice Writer Basics

Podcasting to Change the World

Web Game Design

Welcome to Our Homeschool Game Design Curriculum: Web Game Design

Chris Yust

Chris Yust

1. Bookmark the course for easy access during instruction.

2. Click “View Lesson Plan” and organize as desired (on computer desktop or in a printed format).

3. Gather necessary resources as listed in the lesson plan.

4. Click “Go to Class Lessons” and get started.

5. Enjoy the course!

6. Utilize Applecore or your own record keeping system throughout the course.

7. Print a certificate of completion.

All Computer and Technology Classes

High School Computer and Technology Classes

Share with Others!

Enjoy Our Classes?

Curriculum

About

Resources

Help