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

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 above example with comments: HTML5 Game Script

Here is the example refactored for ES6: HTML5 Game Script in ES6

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 Script in ES6.

Try this example with keyboard functionality. Experiment with values—what can you change?

Generate quick Canvas game templates with ChatGPT.

Student Pairings

HTML5 Canvas Game: 15%

DUE: Monday April 9th

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

Your Steps:

  1. Game Concept Ideation: Brainstorm ideas for your game, ranging from simple mechanics to complex strategies using p5.js.
  2. Game Design Document: Outline objectives, mechanics, rules, controls, and levels.
  3. Consult with ChatGPT: Use ChatGPT for refining your design and solving technical challenges.
  4. Implement the Game: Begin coding with proper structure. Use p5.js for drawing and animations.
  5. Testing and Debugging: Ensure functionality and address balance and interaction issues.
  6. CSS Styling and UI Design: Style your game’s interface to enhance usability and aesthetics.
  7. Add AI Media: Generate sound effects, images, or graphic elements.
  8. Integration Statement: Document development steps and ChatGPT’s contributions in your code comments.
  9. Final Submission: Upload files to a folder named “canvas-game.” Validate and test functionality on multiple browsers.

Suggested Game Ideas:

  • Generative Art Puzzle: Use p5.js to create puzzles based on patterns or fractals.
  • 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

Project Requirements:

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