WEEK 11: HTML5 Games
(March 24 & 26)

To Do This Week:

With ChatGPT, explore ideas for your HTML5 Canvas game.

Game Project DUE Wednesday April 5th

Class

Map Projects 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

Canvas-Game List

HTML5 Canvas Game: 15%

DUE: Monday April 15th

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”

 

To Do This Week:

With ChatGPT, explore ideas for your HTML5 Canvas game. 
Game Project –  DUE Wednesday April 5th

Class

Map Projects List 

HTML5 Games:

Explore 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 above example refactored for ES6:  html5-game script in ES6

Understand how objects are generated and then are animated with speed and gravity properties. Try playing around with values. 

Previous Student Canvas Games
Escape the Room
Cube Game
Space Jam
Welcome to Greenhedge
game: inventory  
Knight Runner
Undead Outpost
bedbugs-hslocum– Holly Slocum

Other Resources:

Game Assets for Knight Runner:

JS Files for Knight Runner:

In-class Exercise:

Go over the html5-game script in ES6

Here is another example with keyboard functionality

Play with values, what can you change?

Make other quick canvas Game templates with ChatGPT

Student Pairings

Canvas-Game List

HTML5 Canvas Game :15%

DUE: Monday April 15th

For this project, you will be creating an interactive HTML5 canvas game that uses JavaScript for dynamic, engaging gameplay. This project is a blend of creative game design and programming skills. Follow these structured guidelines, as well as consulting ChatGPT for brainstorming, planning, and troubleshooting throughout your project’s development:

Project Statement Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical and creative steps for your game development with JavaScript and p5.js. Include how ChatGPT assisted in the ideation, planning, or debugging phases of your work.

Your Steps:

  1. Game Concept Ideation: Start by brainstorming ideas for your game. This could range from simple mechanics like platformers or puzzle games to more complex concepts like strategy or adventure games with generative environments. Think about how p5.js can be used to create unique visual effects or game elements.
  2. Game Design Document: Write an outline for your game’s objective, mechanics, rules, controls, and levels (if applicable). This document will serve as your project blueprint.
  3. Consult with ChatGPT: Use ChatGPT to refine your game design, discuss your technical approach, and solve any challenges you encounter with JavaScript or p5.js. This can include code structure, algorithm development, or implementing specific game features.
  4. Implementing the Game: Begin coding your game, ensuring your HTML structure supports the canvas element and interactive features. Optionally use p5.js for drawing and animation. Integrate game logic with JavaScript. Regularly consult ChatGPT for coding assistance and troubleshooting. Work incrementally.
  5. Testing and Debugging: Test your game extensively to ensure all mechanics and interactions function as intended. Pay special attention to game balance, user input handling, and visual effects.
  6. CSS Styling and UI Design: Apply CSS to style your game’s interface, focusing on a design that enhances the gaming experience without distracting from the gameplay. 
  7. Add AI media: generate sound effects, images, graphic elements, etc.
  8. Integration Statement: In your source code comments, summarize the game development steps in natural language and highlight how ChatGPT supported your project.
  9. Final Submission: Place your game files in a folder named “canvas-game”. Upload your project to a server and submit the URL through your course management system. Validate your HTML and ensure your game runs smoothly across different browsers and devices. 

Suggested Game Ideas:

  • Generative Art Puzzle: Create a game that uses p5.js to generate unique puzzles based on artistic patterns or fractals. Players could solve puzzles to unlock the next level or piece of a story.
  • Platformer with Dynamic Environments: Develop a platform game where levels are procedurally generated using p5.js, offering a new experience each time.
  • Educational Games: Design a game that teaches a concept such as mathematics, history, or coding through interactive challenges.
  • Adventure Game with Expressive Characters: Animate characters with expressive movements and interactions, enhancing the narrative experience.
  • Physics-Based Puzzle Game: Design a game where players manipulate objects to solve puzzles influenced by realistic physics. Simulate gravity, friction, and collision effects to create challenges that require players to think creatively. 
  • Dodging Objects Game: Create an intense game where the player controls a character or object that must dodge an onslaught of obstacles. As the game progresses, the difficulty can increase by speeding up the obstacles or introducing new types that behave unpredictably.
  • Maze Runner Game: Design a game where the player navigates through complex mazes that are generated dynamically with p5.js. Each maze presents its own set of challenges, including dead ends, traps, and puzzles that must be solved to find the exit. The game could include different themes for the mazes, such as a dark forest, an ancient dungeon, or a futuristic labyrinth, each with unique obstacles and aesthetics.
  • Physics-Based Destruction Game: Create a game where the goal is to destroy structures or objects using a variety of tools or weapons, all while obeying the laws of physics. Players must strategize the best way to cause maximum destruction, considering the material properties and structural weaknesses. p5.js can be used to simulate realistic destruction effects, offering a satisfying visual and gameplay experience.
  • Escape Game with Environmental Puzzles: In this game, players find themselves locked in rooms or complex environments and must solve puzzles to escape. Use JavaScript o create interactive elements within the environment that players can manipulate—such as levers, buttons, and movable objects—integrating physics to add realism to how these elements interact. Each level can escalate in difficulty, requiring more inventive solutions and understanding of the game’s physics.

You will be graded on:

  1. your effort
  2. the clarity of your idea executed in JavaScript steps
  3. your process of creative discovery
  4. the usability of your game – provide instructions

Your project must have the following:

  1. a title and author name visible
  2. well-commented code to make sure you understand what the script is doing at each stage
  3. in the the <head>, inside HTML comments, you have a statement that includes resources, and how you used ChatGPT to build the game. 
  4. the work is uploaded to the server as an index.html inside a folder called “game”