To Do This Week:
Play with Canvas, think about your Game Project
Class
Intro to Canvas:
Canvas Element
Javascript Drawing and Animation
drawing a circle: arc();
Timing Events | SetTimeout, SetInterval
Create a Drawing/Animation with Canvas
Copy into a new file the source code from this starter file: canvas face. With your pod, change the JavaScript to create your own face animation. See below for some examples from past students.
previous: Mini-projects Fall2018 | Mini-projects Spring 2018 | Mini-projects Spring 2019
HTML5 Games:
Student Projects:
- Art Games (Daniel Spung): example1, example2
- hstassens15
- pmeiners14
- ggomez14
- Find Fern – Anna Hixon
- Three Card Monty – Chuck Mitchell
- Snow Drifter – Sam Van Luik
- game: matching values Evan Torres
- geolocation: John Alexander
- game : inventory Daniel Spung
- game: inventory 2 Paul Meiners
- bedbugs-hslocum– Holly Slocum
- jquery collage 1
- jquery collage 2
Other Resources:
HTML5 Game Project
DUE April 3rd
This project is intended to loosen you up with creative applications of JavaScript. Using techniques for dynamic animation using the canvas element, you are to follow your own intuition and creative ideas. Don’t worry about something polished or even practical. The idea is to push your current knowledge of JavaScript towards building interesting interactive objects. The crazier your approach, the better. You will be graded on your effort and your process of discovery.
Canvas Games
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 for an example at playing around with values. Then you can make changes for your own game.
Previous Student Canvas Games
Escape the Room
Trip Switch
Cube Game
Space Jam
About reguestAnimateFrame