![Select Plan](/wp-content/uploads/SelectPlan-1.png")
Web Game Design
Length: 44 weeks
Content type: Text based
Grades: 7-12
Print a Certificate of Completion
Welcome to Our Homeschool Game Design Curriculum: Web Game Design
Please click the images below for more information.
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 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
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.
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.
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.)
Click on the image above to be taken to our Affiliate Image Gallery, where you can find additional images for this class.
You can use our affiliate banner on your website, blog, or even social network to tell your friends, family, and contacts about this wonderful class. If you’re an affiliate with SchoolhouseTeachers.com, you can earn a commission every month for new members you send. Visit our Affiliate Image Gallery here.
You can find out more about our affiliate program by clicking here.
Quick Start
1. Bookmark the course for easy access during instruction.
2. Click “View Lesson Plan” as available and organize as desired (on computer desktop or in a printed format). Lesson Plans for all courses coming soon.
3. Gather necessary resources, found on page 2 of 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.
Chris Yust
Lesson Designer
Chris Yust is a 17-year veteran of the software industry and a father of two homeschooled…
FacebookRelated Classes You May Enjoy
