Simple HTML5 Game Development

Learn to build a complete web or mobile video game using HTML5. No previous programming or web development required.
4.4 (23 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.
611 students enrolled
$20
Take This Course
  • Lectures 64
  • Contents Video: 13 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2014 English

Course Description

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.

The course centers around a game engine designed especially to be easy to understand. The game engine and all the other tools needed for the course are completely free. You won't need to purchase anything to build great games.

By the end of the course, you'll be able to build 2D games on the web as well as on mobile devices like the iPad and mobile phones.  

What are the requirements?

  • 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)
  • Comfort with middle school math (coordinate systems, basic arithmetic, some knowledge of angles)

What am I going to get from this course?

  • 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
  • Understand how a Scene works in the simpleGame library, and how that adds space and time elements to your game.
  • Build a basic Sprite object and learn how to build custom sprites to represent any game element you can imagine
  • Practice object-oriented programming to build complex and interesting game objects that can respond to user input, collisions, and other game events
  • Manage standard game events like input, boundary-detection and collisions
  • Manage sound effects
  • Learn to use the mouse and keyboard for basic user input
  • Explore how physics can be used for more interesting control like space vehicles, realistic acceleration, and skidding.
  • Extend your games to mobile platforms with touch and tilt input, and learn to add icons and full-screen behavior to your games
  • Learn not just the code, but the process of building your own game from idea to reality
  • Explore the simpleGame engine and see how it does all the magic. Learn how you can extend it yourself for even more power.

What is the target audience?

  • Anyone interested in game development.
  • Web or programming experience is a bonus, but not required
  • 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!
  • We'll have fun, but making a game is complex, and requires a commitment of time and effort. You'll only get a lot out of this course if you put a lot in.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Building a basic page - and an epic adventure
08:04
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.

18:33
Resources mentioned in this lecture:

11:10

Pages mentioned in this lecture:

10:03

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.

14:23

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:

Building an adventure game with basic HTML and CSS
12 questions
Section 2: Talking to the Page
03:12

Files used in this video:

wordStory.html

10:47

Files used in this video:

input.html

20:54

Files used in this video:

greet.html

greetName.html

greetOutput.html

14:17

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:

WordStory.html

WordStory.css

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

11:43

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

wordStory.html

wordStory.css

wordStory.js

Basic input and output
12 questions
Section 3: Coding Like a Pro
14:05

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:

TypeConv.html

19:47

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:

if.html

ifElse.html

ifElseIf.html

nestedIf.html

switch.html

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.

11:10

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:

forLoops.html

24:49

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:

while.html

logicError.html

15:00

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:

param.html

16:37

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:

basicArrays.html

antsArray.html

Coding like a pro
13 questions
Section 4: Building a text-based game
07:55

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:

numGuess.html

highLow.png

09:45

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:

rand100.html

11:17

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:

numGuess.html

numGuess.css

numGuess.js

Random numbers and guessing game
10 questions
Section 5: Introducing the Game Engine
12:17

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:

redBall.html

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.

13:58

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

10:50

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

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

09:55

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:

simpleGamePractice.html

8 questions

Make sure you're solid on the basic concepts behind game engines and 2d gaming

Section 6: Creating Game Elements
11:12

Object-Oriented-Programming is one of the most exciting ideas in computer programming, and it's a major part of game development. Learn the basic elements of OOP by customizing a Sprite to make a new object. Learn about inheritance, properties, and methods.

Files used in this video:

critter.html - A very basic sprite

critterConstructer.html - Turning a critter into an object

critterSpeed.html - Adding a property to an object

critterChangeSpeed.html - Adding a method to an object

05:19

Sound effects are an important aspect of game development. Learn how to build and play sound effects with the simpleGame Sound object.

Files used in this video:

soundTest.html

audacity - audio editor mentioned in this video

10:43

All the best things in gaming happen when sprites collide with each other. Learn two ways to detect sprite collisions, and understand the strengths and limitations of each.

Files referenced in this video:

colTest.html - Investigate bounding-rectangle collisions

boundRect.png - Understand the biggest weakness of the bounding box paradigm

distance.html - Explore distance-based collision detection

Working with the Timer
04:37
10 questions

Review the concepts behind the main game elements (scene, sprites, collisions, and sound effects.)

Section 7: Getting to a Game
09:35

Game ideas don't go anywhere unless they begin with a solid plan. Learn how to build a game design document detailed enough that you'll actually be able to program with it.

Files used in this video:

frogGame.png

14:40

Once you've decided on the overall design and created some intermediate goals, start building the component elements. Learn how to build the fly and the frog in isolation before adding them to your game.

Files used in this video:

fly.html

frog.html

06:55

All the interesting things in arcade gaming happen when sprites collide with each other. Add collision detection and a simple sound effect to the frog game.

Files used in this example:

collision.html

08:38

Once you know how to work with a single fly, learn how to use arrays to manage multiple flies. Learn how to build multiple flies in an array, then how to use loops to create and update the flies. For once, you're introducing bugs into a program on purpose!

09:07

Finish your game by adding a simple scorekeeping and timing mechanism to it. Learn a sneaky but simple way to reset your game.

10 questions

Now that you know all the basic aspects of game development, put it all together to build a complete game.

Section 8: Motion and Animation
08:58

Getting your sprites to move realistically requires a very basic knowledge of physics. Learn how Newton's laws of motion apply to game programming, and experiment by building an asteroids-like spacecraft.

Files used in this video:

space.html

09:24

Understanding acceleration and drag are the secret to realistic vehicle motion. Learn a simple mechanism for adding these features to your sprites.

Files used in this video:

drag.html

06:25

Drifting and skidding behavior can be quite difficult to program, but here you will learn a simple mechanism for creating fun skidding and drifting behavior for your sprites.

Files used in this video:

drift.html

08:44

Many games utilize some sort of gravitational pull. It turns out gravity is quite easy to implement when you understand force vectors. Learn to implement the type of gravity used in side scrollers and flying games.

Files used in this video:

hoverCar.html

13:12

Orbital physics is rocket science, but it's really not that hard. Learn how a basic formula can build realistic orbits for a very fun game dynamic.

Files used in this video:

orbit.html

17:01

What good is a vehicle without a rocket launcher? Learn the basics of firing a missile or other projectile from a sprite. Also learn how to create a stream of bullets with a random spread and multiple bullets shotgun-style.

Files used in this video

missile.html

multiBullets.html

threeBullets.html

09:47

Another aspect of animation is the use of a sprite sheet to combine multiple images to create animated characters. Learn how to build an animated character from a sprite sheet.

Files used in this video:

walkAnim.html

rpg_sprite_walk.png

openGameArt.org

Physics and motion
10 questions
Section 9: Going Mobile
07:16

HTML5 is great for mobile development. Look at a variation of the frog game designed for mobile use, and learn how to create games that work well on mobile devices, even when the device is not on the Internet. Learn also how to add an icon to a mobile web game.

Files used in this video:

mobile Frog Game (note this game is optimized for mobile devices - it may not work on a desktop machine.) Use save link to desktop on IOS to keep a local copy of the game.

cache.manifest The cache manifest file used when building this game.

04:18

To see your games on a mobile device, you'll need to post it to some kind of hosting service. Learn the basics of setting up such a service. Also, learn how to set the size and position of the scene to best fit your device screen.

Files used in this video:

changeSizePos.html

07:39

Mobile devices do not support a mouse, and the touch interface isn't exactly like a mouse. Learn how you can treat the touch interface like a mouse, and how to add a simple button to your game.

Files used in this video:

button.html

touchMouse.html

17:58

Touch interfaces are often used as virtual joysticks. The simpleGame library has a virtual joystick object. Learn how to use it in a couple of ways. Learn how to build a convertible game that works with either a keyboard or a touch interface, and learn a clever technique for making the virtual joystick act just like the arrow keys.

Files used in this video:

joy1.html

joy2.html

joystickCar.html

virtualKeys.html

11:50

Many mobile devices come with a built-in accellerometer which can be used to detect the orientation of the device. Learn how to harness this feature in your games.

Files featured in this video:

accel.html

calibrate.html

Going Mobile Quz
10 questions
Section 10: SimpleGame in depth
10:25

Get an overview of the simpleGame library and the scene element.

File used in this video:

simpleGame documentation

19:57

The sprite object is one of the key elements of simpleGame. Learn all of the methods and properties of this important object.

File used in this video:

simpleGame documentation

04:47

SimpleGame includes a number of utility objects. Learn the various aspects of the sound system, the keyboard mechanism, and the timer object.

File used in this video:

simpleGame documentation

05:06

SimpleGame includes a number of useful elements for mobile game development. Learn how to use the touch interface, virtual joystick, and tilt interface.

File used in this video:

simpleGame documentation

SimpleGame.js in Depth
10 questions
Section 11: Game Asset Resources
06:25

Dia is a powerful free diagramming tool. Learn to use this tool to build game design documents and flow diagrams for your games.

Link to Dia Download

12:39

Inkscape is a professional-level vector graphics drawing tool available for free. Learn the basics of using this tool to build animated characters and sprite objects.

Link to Inkscape

12:45

Gimp is a free open-source alternative to photoshop and other high-end graphic editing tools. Learn how to use this tool for a number of common game-development tasks including rotating sprites, resizing images, and changing element colors.

Download link for Gimp

18:40

Blender is an incredibly powerful free 3D modeling program. Learn some basic techniques for building 3D models you can then render as realistic graphics for your games

Link to download Blender

14:41

There are a number of excellent places to get really wonderful free game art. Take a look at several of these terrific resources:

Pages mentioned in this video:

Ari's Spritelib Great 2d images

Reiner's Tilesets Huge library of 2d and 3d characters

OpenGameArt Wonderful online community

LPC Sprite Sheet (click 'download zip' button in right margin to download)

Open Clip Art Wonderful moddable vector graphics

09:49

Sound effects are an important part of the gaming experience. Learn about great tools and resources for adding audio to your games.

Pages mentioned in this video:

Audacity

Freesound

soundJay

bfxr

Game Assets Quiz
10 questions
Section 12: Game Starters
11:25

Learn the foundation of a lunar-lander style game. This game features multiple visual states and a complex landing condition, as well as gravity.

Link to game and files

19:33

Build an endless scoller with mouse motion, repeating targets, and multiple obstacles. A key new feature of this game is a seemingly endless scrolling background. Adapt this game to build multiple types of endless running or shooting games.

Link to game and files

18:59

Build a tilt-based marble game. The most interesting features of this game are dynamic layer creation (building ever-more complex levels) creating elements that are guaranteed to not overlap, and creating an interface that can adapt between keyboard input on desktops and tilt-based input for tablets and mobile devices.

Link to game and files
22:31

Whack - A - Mole is one of the classic arcade types, and it translates beautifully to mobile and desktop. This version uses object-oriented programming to create a mole object that can be customized for whatever difficulty level you wish. You can design moles to appear in random spaces, or you can modify the code for more organisation. This game also includes a high-score feature using the localstorage mechansim.

Link to game and files

10:05

Build a platform-jumping game. The character can run and jump, and lands on blocks. You can drag the blocks around to experiment with different configurations

Link to game and files

20:31

Pong is the classic arcade game. Its simple appearance actually hides some complexity. Learn a way to think about ball-paddle collisions mathematically to get the standard bouncing behavior. The game also looks into a very simplistic 'Artificial Stupidity' algorithm for making a more lifelike and beatable opponent.

Link to game and files
16:20

A great number of game types involve combat systems - Learn about a basic but very flexible and extensible combat system that can be used in many game types.

This game also features animated characters for a little extra fun.

Link to game and files

10:37

This project demonstrates a more complex multi-part sprite, with a tank containing a turret and a shell. Learn how to build sprites containing other sprites.

Link to game and files

21:45

Tiles are a terrific mechanism for creating complex and flexible maps from very simple components. Learn how to build a simple tile, how to dynamically edit a map, and how to build a large scrolling map without running into memory problems.

Link to game and files

21:42

Tic Tac Toe is a classic programming problem. This version uses a custom cell object, can determine a winner, and even features a simple artificial intelligence model with a heuristic algorithm.

Link to game and files

Game starters quiz
10 questions

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andy Harris, 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.

Ready to start learning?
Take This Course