DTC 477: Advanced Web Design & Development

Week 10: HTML5 Games: Classes

HTML5 Games

Explore the W3Schools HTML5 Games Demo to see how JavaScript can build a game using the Canvas element.

Here is the example refactored for ES6: Dodging Obstacles Game

Understand how objects are generated and then animated with speed and gravity properties. Experiment with values.

Previous Student Canvas Games:

HTML5 Game Elements:

HTML5 Game Resources:

Game Assets for Knight Runner:

JS Files for Knight Runner:

In-Class Demos:

Review the HTML5 Game in ES6.

Explore this game with falling balls using keyboard functionality. Experiment with values—what can you change?

Arrow Functions (=>)

An arrow function is just a shorter way to write a function in JavaScript.

Look for the arrow: =>

// Arrow function
objects.forEach(obj => {
  obj.update();
});

This does the same thing as: 

// Regular function
objects.forEach(function(obj) {
  obj.update();
});

If you see =>, it means “this is a function.”

Adding Images and Sound Effects

To add images, first load the image in the Image() object, then draw it with drawImage().

const playerImg = new Image();
playerImg.src = 'player.png';
ctx.drawImage(playerImg, this.x, this.y, this.width, this.height);

The game with images

Download ZIP

To add sound effects, load the audio file in the Audio() object and then use play() when needed.

const shootSound = new Audio('shoot.wav');
shootSound.currentTime = 0; // rewind to start
shootSound.play();

JavaScript Concepts Used in the Canvas Game

Popular Games Refactored to HTML5/ES6 with Classes

Pong Logic Steps:

Set up the canvas: Get access to the canvas element and its drawing context so we can draw shapes like paddles and the ball.

Create Paddle class: Each paddle has a position (x, y), size (width, height), and speed. It responds to player input (W/S, arrow keys) and draws itself on the screen each frame.

Create Ball class: The ball has a position, size, and speed in both X and Y directions. It moves, bounces, detects paddle collisions, and resets after a score.

Track game state: Keep score, listen for key presses, and use booleans to store which keys are held down.

Game loop (updateGame): Clear the canvas, update positions, check for collisions, draw everything, and use requestAnimationFrame() for smooth animation.

Asteroids Logic Steps:

Set up the canvas: Same as Pong – get the drawing surface ready.

Create Ship class: The ship has position, direction, and thrust, moves with physics, rotates, shoots, and wraps around the screen.

Create Bullet class: Each bullet starts at the ship’s position, moves in its direction, and disappears after a while.

Create Asteroid class: Asteroids have random positions and velocities, move and wrap around, and detect bullet hits.

Create Game class: Manages ship, asteroids, and input; runs the update/draw loop.

Game Assets + AI Tools for HTML5 Game Development

Collaborative HTML5 Canvas Game: 25%

DUE: April 30

In teams of 3-4, create an interactive HTML5 Canvas game that demonstrates your combined skills in design, programming, and creative collaboration. This project is an opportunity to experience a small web development workflow using GitHub for version control and to practice communicating logic, problem-solving, and design ideas as a group.

Each team will work with the Custom GPT created for this class to help plan, refine, and debug their game. Use it to translate your ideas and logic into human-readable steps before writing code. Each student will submit their AI chat transcript as part of the documentation of their contribution and learning process.

Your Steps:

  1. Team Brainstorm: Develop a shared game concept and visual style. Decide on your core mechanic, objective, and general mood or theme.
  2. Design and Roles: Identify areas of strength among your team—coding, sound design, animation, art direction, or logic planning—and distribute tasks so that everyone contributes meaningfully.
  3. Logic Steps: Use the Custom GPT to describe your game’s setup, gameplay loop, and scoring in plain language before coding. Save these chats as documentation.
  4. Collaborative Coding: Build your game using ES6 JavaScript, committing regularly to GitHub. Use branches and merges to manage contributions.
  5. Testing and Debugging: Playtest your game as a team and refine responsiveness, balance, and performance.
  6. Visual and Audio Design: Style the interface with CSS, and integrate sound effects, sprites, or other media to enhance the experience. You may generate assets or ideas with AI tools.
  7. Integration Statement: In your JavaScript file, include a brief commented section summarizing your game logic, team process, and how you used AI and GitHub.
  8. Final Submission: Upload your game as index.html in a folder named game and ensure all assets and scripts function properly online.

Suggested Game Ideas:

Grading Criteria:

  1. Collaboration and Process: Evidence of teamwork, GitHub participation, and AI-assisted planning.
  2. JavaScript Logic and Implementation: Effective and clear application of ES6 syntax and structure.
  3. Creative Design and Usability: Quality of interaction, visuals, sound, and overall play experience.
  4. Documentation and Reflection: Clarity and completeness of your logic statement and AI chat records.

Project Requirements:

  1. Title screen with game name and team member credits
  2. Well-commented, functional ES6 code
  3. Integration statement and AI chat documentation
  4. GitHub repository link included in submission
  5. Final build uploaded as index.html in folder named game

In-Class Activities:

Canvas Interaction and Animation

Explore this game with falling balls using keyboard functionality. Experiment with values—what can you change? Use HTML5 Game Mentor to develop ideas using this file as a template.

HTML5 Game Groups

Group 1

Group 2

Group 3

Group 4

Group 5

Settle into groups and discuss ideas. Quickly try out prototypes using HTML5 Game Mentor. At this stage, you are exploring, testing, and researching possibilities. By the end of next week, you should have the basic logic and structure of your game clearly worked out.

AI is not a shortcut to a finished game. If you use it that way, you will skip the most important part of this project: learning how games actually work.

Instead, use AI as a thinking partner:

You should always be able to explain: What is happening in your game, why it works, and how the code supports your design. If you can’t explain it, you’re moving too fast.

The goal of this project is not just to make a game—it’s to learn how to think like a designer and developer: working through ideas, iterating, collaborating, and building something meaningful step by step.