HTML5 Simple Game Programming Preparation
3.6 (251 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21,026 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 Simple Game Programming Preparation to your Wishlist.

Add to Wishlist

HTML5 Simple Game Programming Preparation

Free overview of HTML, CSS, and JavaScript for my HTML5 Game Development course.
3.6 (251 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21,026 students enrolled
Created by Andy Harris
Last updated 3/2014
Price: Free
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a basic web page with HTML
  • Use CSS to add essential style to your page
  • Understand the main concepts of programming (variables, conditions, loops, branches, functions, and arrays) using JavaScript
  • Use JavaScript and the Document Object Model to build a basic interactive web page
  • Discover the free simpleGame.js game library and use the online practice tool to begin building your own games online!
View Curriculum
  • Access to an HTML5 - compliant browser (Google Chrome 23 or greater recommended)
  • Access to a higher-end text editor (specific examples linked in course)
  • Any major operating system (Windows 7+, Mac OSX, Linux)

Learn to build web and mobile games with HTML5. Even if you have no experience in programming or web development, you can create your own games.

This course begins with a quick overview of web development in HTML5 and shows you the basic web framework used in all modern pages. It then teaches essential programming concepts using the JavaScript language embedded in all modern browsers.

It introduces the simpleGame.js engine, showing you how the engine works and introducing a free online game development tool. For more information on game programming, please see my other course.

Who is the target audience?
  • Anyone interested in game development.
  • Suitable for middle school, high school, or adult learners. Motivated younger students will also enjoy the course, but they may need help from an adult. Perfect course for kids and parents to take together!
  • No prior experience in web development or programming is necessary, although it can be useful.
  • Programming is NOT a spectator sport! You'll only learn if you're willing to do some exercises on your own.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
24 Lectures
Building a basic page - and an epic adventure
6 Lectures 01:11:55
Introduction to the Free HTML5 Preparation class

Your first game will be a basic "choose your own adventure" written with HTML and CSS.  Take a look at a simple sample game and see how you will build this project.  

The video features the game you can find here. Open the game in your browser and use ctrl-u (or the 'view source' command) to view the code.

Overview of the adventure game

Resources mentioned in this lecture:

Creating a basic HTML page

Pages mentioned in this lecture:

Adding Pictures and Links

Change how your web page looks by adding CSS.

Files used in this example:

Note that we're deliberately discussing a very small subset of CSS. If you want to learn more about CSS, please see my book HTML / CSS All in One for Dummies.

Modifying a page with CSS

Think about the design of your adventure game and how you will implement it in HTML and CSS.

Create your nodes, make your images into links, and add sound effects for even more fun.

Files demonstrated in this video:

Adding Audio and Building the Adventure Game

Building an adventure game with basic HTML and CSS
12 questions
Talking to the Page
5 Lectures 01:00:53

Files used in this video:


Introducing the word game

Files used in this video:


Building a basic form

Files used in this video:




Basic Input and Output

Learn to build the form for the word story game. While you already know all the HTML code you need for this game, the code won't look good on its own. Add a floating CSS layout to make the page look great.

Code used in this lecture:



Form.css (Use this in your own forms to add a floating layout.)

Creating a good-looking form with CSS

Put together all you've learned to build the word story. Tie together HTML, CSS, and JavaScript code. Files used in this video:




Building the word story game

Basic input and output
12 questions
Coding Like a Pro
6 Lectures 01:41:28

Learn how JavaScript works with data, and a surprising error you can get when you trust the computer too much. Prevent this type of error by converting data to the format you need.

Programs used in this video:


Managing Data Types

Computers seem to make decisions when programmers use a concept called a condition. Learn how to build your own conditions in several variations of the if statement.

Examples used in this video:






Note if you're using the "HTML5 Game Programming for Dummies" book, these examples were actually taken from another book with a bit more detail (HTML5 / CSS3 All in One for Dummies) I didn't have as many examples on the HTML5 Gaming page, so I borrowed from another book for clarity.

Adding Branching Behavior

Often you'll need the computer to do something a certain number of times (Each alien in your game might need to drop a bomb, for example.) Programming languages have a structure called a "for loop" for exactly this situation. Look at a number of for loops to see how the computer can count efficiently.

File viewed in this video:


Looping with the For Loop

The while loop is a more flexible alternative to the for loop. Learn how to build a well-behaved while loop. You'll also learn how to build a loop that can exit in multiple ways, and how to watch your code run line-by-line to detect logic errors.

Files used in this video:



More flexible loops with While

You've been using simple functions, but now you learn how to make them work well with the rest of the program. Add parameters to input values into functions, and use return values to have functions produce a value.

Files used in this video:


Enhancing functions with parameters and return values

If functions are used to put together multiple instruction, you might wonder if there's a way to group data as well. Of course, there is such a concept, and in programming this is the array. Learn to build arrays in a couple of ways. Learn how for loops are the natural companion to for loops, and how to access and modify data in an array.

Files used in this video:



Using arrays

Coding like a pro
9 questions
Building a text-based game
3 Lectures 28:57

With all the basic programming concepts covered, you're ready to build a basic text-based game. Take a look at the game, then learn about how to plan a game to make the programming as easy as possible.

Files used in this video:



Designing the number guesser

Games often include random behavior. Computer programs use random number generation for practically all random numbers. Learn how to build a random number within any range of values.

Files used in this video:


Generating random numbers

Take all the concepts you've learned up to now and build a complete text-based game! This game features HTML, CSS, JavaScript, conditions, functions... pretty much everything we've done so far.

Files described in this video:




Building the number guesser
Introducing the Game Engine
4 Lectures 47:00

HTML5 doesn't directly support game programming, but there are a number of libraries which add support for the main aspects of gaming. Learn about the simpleGame library, designed specifically to be easy to learn and use while building great games. Look at a simple animation which demonstrates the basic use of this engine.

Files used in this video:


Please be sure to run this (and all files in this course) directly, as the performance in the videos tends to be more jerky than in real life.

Introduction to the SimpleGame Engine

Overview of the simpleGame engine. Learn how to find the latest version of the engine, how to download it for use in your own games, and see the main features of the engine.

Files used in this video:

book main page Main page for this course's companion book

simpleGame.js Version of the simpleGame library used in this course

simpleGame Documentation Official documentation of the simpleGame library

template Save a copy of this code for a convenient starting place for your games

SimpleGame Overview

The most obvious difference between a game and an animation is user interactivity.

Learn how to check for keyboard input, how the keyboard array works, and how to set up an image for use in game animation.

Files used in this video:


car.png car image used in game. Note images should face to right and have a transparent background.

Basic Keyboard Interaction

Learn how to use a special online tool to build experimental games even if you don't have anything installed on your computer. Play around with the simpleGame engine any time you can get to a web browser.

Files used in this video:


Using the simpleGame Practice Tool
About the Instructor
Andy Harris
4.0 Average rating
314 Reviews
21,825 Students
4 Courses
Teacher, Author, Game Developer
  • Andy is the author of over a dozen books on various topics in computer programming, especially web, game, and mobile development.

His best-selling books include

  • HTML5 / CSS3 All in One for Dummies
  • HTML5 Game Programming for Dummies
  • HTML5 Quick Reference for Dummies
  • PHP6 / MySQL Programming for the Absolute Beginner
  • Game Programming - the L Line (using Python)
  • Flash Game Programming for Dummes

He teaches computer science at a major university teaching the following courses:

  • * Computer Science I - Introduction to computer science and programming with Python
  • * Computer Science II - Advanced computer programming in C, C++, Java, basic algorithms and Data Structures
  • * Game Development I and II - 2D and 3D game development from the ground up, including building game engines.
  • * Web and Mobile Development - Various classes in client-side, server-side, and AJAX programming, as well as mobile development.

Andy is also very active in homeschooling. He has taught math and programming classes to various homeschooling groups, and is a featured technology columnist in The Old Schoolhouse magazine, a leading magazine among homeschool families.

While Andy's technical depth is notable, it's his teaching style that makes the biggest difference. He has served as a special education teacher, and knows a little about how to help smart people become even smarter by learning new complicated tasks.

Andy is particularly interested in helping kids and adults who do not have access to computing instruction learn how to get started in this fun and lucrative field.

He has a great time teaching, and his courses are engaging and fun, while informative. A course with Andy is like having a friend who's written a lot of books come by in a sweater on a Saturday morning showing you how to do cool stuff. You'll learn a ton, and you'll have a great time doing it.