WEEK 11: HTML5 Games
(March 24 & 26)

To Do This Week:

With ChatGPT, explore ideas for your HTML5 Canvas game.

Canvas Project DUE March 26 (this Wednesday)

HTML Game Project DUE Wednesday April 9th

Module Notes

View Canvas-Game List

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:

Other Resources:

Game Assets for Knight Runner:

JS Files for Knight Runner:

In-Class Exercise:

Review the HTML5 Game in ES6

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

The game with images

Generate quick Canvas game templates with ChatGPT.

Student Pairings

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);

To add sound effects, load the audio file in the Audio() object and then use play() when needed. Setting current time to zero helps when do fast repetitions like shooting.

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

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.

  • Responds to move up and down based on player input (w, s, arrow keys) , and draws itself on the screen with each frame.

Create Ball class:

  • The ball has a position, size, and speed in both X and Y directions.

  • It knows how to move, bounce off the top/bottom, detect paddle collisions, and reset after a score.  When bouncing off a side, the X direction is reversed (i.e. ballSpeedX *= -1). Y stays the same.

Track game state:

  • Keep score for Player 1 and Player 2.

  • Listen for key presses (w, s, arrow keys) to move the paddles.

  • Use booleans to store which keys are currently held down.

Game loop (updateGame):

  • Clear the canvas each frame.

  • Update paddle positions based on key input.

  • Move the ball and check for collisions or scoring.

  • Draw paddles, ball, and score.

  • Use requestAnimationFrame() to keep the game running smoothly.

 

Asteroids Logic Steps:

Set up the canvas: Same as Pong – get the drawing surface ready so we can show the ship, bullets, and asteroids.

Create Ship class:

  • The ship has a position, direction (angle), thrust (speed), and can rotate.

  • It knows how to move with physics (inertia), apply thrust, rotate, shoot bullets, and draw itself as a triangle. The ship’s direction is controlled by an angle that tells us which way it’s pointing. When you rotate the ship with the arrow keys, you’re changing that angle – for thrust forward and shooting. The interia is set with key up: thrust.x *= 0.99 which will incrementally decrease thrust with each frame.

  • The ship also wraps around the screen if it goes off the edges. If the ship or asteroid goes off the left edge (x < 0), we set its x position to the right edge (canvas.width). If it goes off the right edge (x > canvas.width), we move it to x = 0. We do the same for the top and bottom using the y value and canvas.height

Create Bullet class:

  • Each bullet starts at the ship’s position and moves in the direction the ship was pointing.

  • It has a limited lifespan and disappears after a while or when it leaves the screen.

  • It knows how to move and draw itself.

Create Asteroid class:

  • Asteroids have random positions and velocities.

  • They move continuously and wrap around the screen.

  • They know how to check if they’ve been hit by a bullet.

Create Game class:

  • The game creates the ship and an initial batch of asteroids.

  • It tracks which keys are being pressed.

  • It runs the game loop (update and draw functions).

  • Handle player input: arrow keys rotate the ship and apply thrust and shooting.

  • Update ship, bullets, and asteroids.

  • Check for collisions between bullets and asteroids.

  • Remove bullets and asteroids when collisions occur.

  • In a loop: draw everything on the screen and call requestAnimationFrame() to keep looping the game smoothly.

html5-games-cheatsheet.pdf

HTML5 Canvas Game: 15%

DUE: Wednesday April 9th

For this project, create an interactive HTML5 canvas game using JavaScript for engaging gameplay. Consult ChatGPT for brainstorming, planning, coding assistance and troubleshooting. Follow these guidelines:

Your Steps:

  1. Game Concept Brainstorm: What kind of game is it? (e.g., avoid falling objects, jump over obstacles, collect coins)
  2. Game Design: Define basic mechanics, scoring system etc.
  3. Basic Features: List the key features and write them in  simple, human terms: objective, rules, controls, levels
  4. Consult with ChatGPT: Use ChatGPT for refining your design and solving technical challenges.
  5. Logic Steps: work out the basic steps in human language for the game set up, functionality and scoring.
  6. Script the Game: Begin coding or work with ChatGPT for the coding in ES6 JavaScript. 
  7. Testing and Debugging: Ensure functionality and address balance and interaction issues.
  8. CSS Styling and UI Design: Style your game’s interface to enhance usability and aesthetics.
  9. Add AI Media: Generate sound effects, images, or graphic elements.
  10. Integration Statement: Document logic steps and how you used ChatGPT and add this as a commented section in the <script>.
  11. Final Submission: Upload files to a folder named “game.” Validate and test functionality on multiple browsers.

Suggested Game Ideas:

  • Platformer with Dynamic Environments: Procedurally generate levels for a unique experience each time.
  • Educational Games: Teach concepts like math or history interactively.
  • Adventure Game with Expressive Characters: Create animated, expressive interactions.
  • Physics-Based Puzzle Game: Manipulate objects with gravity and friction to solve challenges.
  • Dodging Objects Game: Navigate through increasing challenges while dodging obstacles.
  • Maze Runner Game: Design complex, dynamically generated mazes.
  • Physics-Based Destruction Game: Destroy structures strategically, using p5.js for realistic effects.
  • Escape Game with Environmental Puzzles: Solve puzzles to escape rooms with interactive elements.

Grading Criteria:

  1. Effort and execution of JavaScript steps
  2. Process of creative discovery
  3. Game usability and instructions
  4. UX design and presentation

Project Requirements:

  1. Title and author name visible
  2. Well-commented code
  3. Statement in the <script> section with logic steps, resources and ChatGPT usage
  4. Uploaded to a server as “index.html” inside a folder named “game”