WEEK 10: Canvas Animations
(March 17 & 19)

To Do This Week:

Work on Map Projects. Due Wednesday March 19th

---

Module Notes

Programming Concepts > JavaScript Syntax

Basic Principles:

• Statements
• JavaScript Commenting
• Variables
• Adding JavaScript to a Page (internal and external methods)
• Data Types: Strings, numbers, booleans, arrays

Operators:

• Basic Operators and “Shortcut” Operators
• Comparison Operators

Doing Stuff:

• Conditional Statements
• For Loops
• Functions
• Scope

Storing Stuff:

• Variables
• Arrays
• Objects / Methods / Properties:
  • Object Literals
  • Object Constructors
• Classes

---

Maps Q & A

Map Projects List

---

Workshop Canvas

Intro to Canvas:

• Canvas Element: Introduction to JavaScript Drawing and Animation
• Canvas Reference
• beginPath() – Begins a path or resets the current path
• moveTo() – Defines the starting point of a shape
• arc() – Draws a circle or arc

Create a Drawing/Animation with Canvas:

Copy the source code from this starter file into a new file:

JavaScript Canvas Drawing + Animation

Change the JavaScript to create your own face animation. Examples:

• Example Face 1
• Example Face 2
• Example Face 3

Canvas Clock Example

Student Pairings

---

Canvas Project: 5%
(Due March 26)

 

HTML5 Canvas Game: 15%
DUE: Wednesday April 10th

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:

Your Steps:

1. Game Concept Ideation: Brainstorm ideas for your game, from platformers to puzzle games, using p5.js for visuals.
2. Game Design Document: Outline objectives, mechanics, rules, controls, and levels.
3. Consult with ChatGPT: Refine your game design and solve technical challenges with ChatGPT’s assistance.
4. Implementing the Game: Code your game incrementally, integrating JavaScript and p5.js for logic and animations.
5. Testing and Debugging: Test thoroughly to ensure functionality and balance.
6. CSS Styling and UI Design: Style your game’s interface to enhance the experience.
7. Integration Statement: Add comments in your source code summarizing development steps and ChatGPT’s role.
8. Final Submission: Upload your game files to a folder named “canvas-game” and submit the working URL.

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 you used to build the game. 
4. the work is uploaded to the server as an index.html inside a folder called “game”

 

\