To Do This Week:
Map Project DUE Monday March 20th
Overview: API – Application Programming Interface – & JavasScript & JSON
View Map Projects
Map Projects List
Audio/Video Projects DUE Monday March 27th
Upload in a folder “av”
Audio/Video Projects List
Canvas Project (Game): 5% Due March 29th P5JS Animation Project (Generative Art): 5% Due April 5th Weather App (API & Canvas): 5% Due April 12th
HTML5 Canvas Project (Game) – 5%
Due March 29th
This and all class projects can be the sketch of an idea that you develop in the Final Project. The important thing for this project is to have a working script and a solid proof of concept for further development.
You will be graded on:
- your effort
- your process of creative discovery
- the usability of your game – provide instructions
Your project must have the following:
- a title and author name visible
- well-commented code to make sure you understand what the script is doing at each stage
- in the the <head>, inside HTML comments, you have a statement that includes resources you used to build the game.
- the work is uploaded to the server as an index.html inside a folder called “canvas-game”
Intro to Canvas:
- Canvas Element
- Canvas reference
- start a drawing:beginPath();
- drawing a line:lineTo();
- drawing a circle: arc();
Create a Drawing/Animation with Canvas:
Here is a Canvas clock – from w3schools. What are the steps?
You can, if you want, explore W3schools HTML5 Games Demo to build your own game using Canvas. Try to understand how objects are generated and then animated with speed and gravity properties. Best to start by copying the code or using ChatGPT for an example at playing around with values. Then you can make changes for your own game.
Previous Student Canvas Games
Escape the Room
- Art Games (Daniel Spung): example1, example2
- game: matching values Evan Torres
- geolocation: John Alexander
- game : inventory Daniel Spung
- game: inventory 2 Paul Meiners
- bedbugs-hslocum– Holly Slocum
- canvas story – Erik Messenger
- Web Storage
- Drag and Drop
- Custom Range Sliders
- About requestAnimationFramerate
- sketch.js : finger drawing on canvas
Go over a canvas game example from w3shools.
Play with values, what can you change?