HTML5 Foundations
Document structure, elements, attributes, images, links, semantic tags and a first taste of CSS.
Interactive Web Games Lab
Learn HTML5 game development by reading, running, and rewriting real games. Every lab gives you the objectives, a guided file-by-file activity, a live preview of each game, and checkpoints you tick off as you go.
📚 Introduction: what this lab is
This lab teaches HTML5 and JavaScript by building complete, playable games — the same teaching approach used in The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript (3rd edition) by Jeanine Meyer. Rather than learning the language in isolation, you start with a small working game and grow it step by step, one idea at a time.
Each of the six weekly labs is adapted from one of the book's games and follows the same objectives → guided build → complete-the-code flow:
- Objectives — the HTML5 and JavaScript skills the week covers.
- Lab activity — create the files yourself and write the code shown, step by step.
- Finished example output — run the completed game in the preview and compare it with your own.
- Activity — complete the code — drag the missing tokens into place and check your answer.
Everything is written in plain HTML5, the Canvas 2D API and JavaScript — no frameworks and no libraries — so what you write is standard web technology you can reuse anywhere.
The games you build include the Craps dice game, the bouncing ball, the cannonball and slingshot, the memory (matching) game, and an ordering quiz with audio and video rewards. Examples and game ideas are adapted from The Essential Guide to HTML5 (3rd ed.) by Jeanine Meyer.
Canvas & the Dice Game
Draw with <canvas>, generate random numbers, handle clicks and build the Craps dice game.
Animation, Inputs & Media
Animate with timers, bounce a ball off walls, wire up form inputs and mix in images, gradients and video.
Objects & Physics
Build reusable game objects, follow mouse input and launch a projectile with gravity in the slingshot game.
Memory Game
Arrays, images, shuffling, click hit-testing and match logic — plus drawing polygons on the canvas.
Audio, Video & Rewards
Control media from JavaScript and build an ordering quiz that rewards correct answers with sound and video.
⚙ How to use a lab
- Create your own folder for the week (for example
Week1) on your PC and copy the example files you need from this site into it. - Open that week folder in VS Code or Sublime Text.
- Follow the Lecture activity slides with your lecturer (the Lecture slides button on each week).
- Read the Objectives, then work through the Lab activity steps file by file. Tick each checkpoint as you finish.
- The Finished example output box already shows the completed game for the week — use the dropdown to preview another example, or press Open to launch it in its own tab.
- Edit the game files in your editor, save, then double-click the file (or refresh the tab) to see the change.
- Use the Tasks for this file panel and its Hint button when you are stuck (ask your lecturer before Show solution).
- Finish with the Exit quiz — it is your ticket out of the lab.
- Save your graded copy as
filename_yourname.htmlin the same week folder.
No server needed: just open index.html in your browser. Progress and quiz scores
are saved in this browser only. Lecturers can add ?answers=1 to a lab URL to reveal all hints
and solutions.
New to the tools? Read the Setup guide for VS Code and Sublime Text instructions.