Web Game Design

Leah Walton2023-04-10T19:07:22-04: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 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.

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

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.

Web Game Design

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

PRINT CERTIFICATE OF COMPLETION

Chris Yust

Crystal Calhoun2018-07-10T17:39:43-04: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

Editing Photos with GIMP

How to Get Started with Microsoft Excel Functions

How to Use Microsoft Word

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 Get Started with Microsoft Excel Functions

How to Use Microsoft Word

How to Use Microsoft Word: Beyond the Basics

Internet Entrepreneurship for Teens

Keyboarding

LibreOffice Writer Basics

Podcasting to Change the World

Web Game Design

The Source for Family Education

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?

Home | About | Membership | Privacy Policy | Terms and Conditions | Statement of Faith | Latest News | FAQs | Login