### WORKSHOP

make Games Puzzles Apps Art and more with CODE

## Workshops for the modern, simplified world of coding!

- Make a Browser or Mobile Puzzle, Game, etc. with just one page of text
- New HTML Canvas for Wondrous Free-form Interactive Features
- Code the Canvas with ZIM using the Popular and Powerful JavaScript
- ZIM designed for all ~ Absolute Beginner to Absolute Professional
- Tutorials, Workshops and Lessons prepared by ZIM Founder, Dan Zen
- Canadian New Media Awards Programmer and Educator of the Year

ZIM is a free JavaScript framework for making Interactive Media on the HTML Canvas with easy shapes, drag and drop, hit tests, components like buttons, sliders, dials and more powered by the robust CreateJS.

- The Canvas is an HTML tag introduced in HTML 5
- The Canvas is a picture (bitmap) that we can change with code (computer programming)
- JavaScript gives us basic commands to draw on and update the Canvas
- The CreateJS Library gives us the EaselJS module for working on Canvas

- In HTML and JavaScript we have a Document Object Model (DOM) to access tags within tags
- Similarly, EaselJS gives us a Bitmap Object Model (BOM) with a stage to view things on the Canvas
- The BOM allows us to nest containers and make shapes, images and text, etc.
- EaselJS also gives us events to capture interaction

- ZIM works with CreateJS to bring us even more functionality often with one line of code

-     circle.drag(), circle.animate(), circle.hitTestRect(rectangle), etc.

- ZIM also provides a set of components for features you make

-     zim.Button(), zim.Label(), zim.Slider(), zim.Dial(), etc.

- ZIM also sets up a framework in which we can work - ZIM makes the Canvas and Stage

MORE BACKGROUND

| Make a game to stop circles from hitting one another as they grow. The player sees colored circles growing randomly on the stage. They have to click the circles to make them smaller. If the circles touch they stop growing. If all the circles have stopped growing then the game is over. The score is how long the player has played.

You will need a computer of any sort like a PC or Mac. A text editor preferably with syntax coloring (Atom, NotePad++, Sublime, Brackets, DreamWeaver, etc.). And any modern browser such as Firefox, Chrome, IE, Edge or Safari. Requirements have never been so freely available!
GOAL
The goal of the workshop is to teach the core elements of the topic, including:

- Shapes (with random colors)
- Tiling (looping)
- Timers (intervals)
- Animation
- HitTests
- Interaction (click / mousedown)
- Sound
- Scoring (text fields)
- Toggle Buttons

STEPS
Here are a few TIPS when taking the workshop:

1. Keep your font big so you can see punctuation better.
2. Nest your code properly - indent any block of code between { }
3. Get things working before building the next bit of code.
4. Ask your instructor if there are problems - others have them too!

1. Download the workshop ZIP FILE. The file contains:
   - A game folder to put your code - includes an assets folder
   - A resources/docs folder with ZIM Docs (here are online DOCS)
   - A resources/libraries folder with ZIM and CreateJS
   - A resources/site folder with images for the steps page
   - A resources/zim folder with templates - matches ZIM ZIP from ZIM site
   - This steps.html page to get you set up for this workshop
   - NOTE: see the ZIM Site for up to date ZIM versions and templates
2. Copy (not move) the fit.html page from the zim folder to the game folder.
3. Rename the fit.html page to game.html - this is where we will work.
4. Open the page in a text editor like Atom, NotePad++, Brackets, Sublime, etc.
5. To open, right click and chose open with... or open the file through the editor.
6. Change the title of the page to "ZIM Game Workshop".
7. Note in the template where we say "// put your code here".
8. The code underneath is a sample button - have a look.
9. Open the file in a browser see the button - okay, we are done with the button.
10. Go back to the code (keep editor and browser open) and delete the button.
11. For practice, make a new zim.Circle(), center it on the stage and set it to drag.
    var circle = new zim.Circle(60, "orange");
    circle.center(stage);
    circle.drag();
    // or on one line with chaining:
    var circle = new zim.Circle(60, "orange").center(stage).drag();
12. Follow the teacher as they go through the workshop with you to make:
    1. TILED CIRCLES
    2. INTERACTION FOR CIRCLES
    3. GAME ANIMATION
    4. HIT TESTS
    5. LOADED SOUNDS
    6. GAME ENDING
    7. MUTE BUTTON
13. Have a look at the RESOURCES below to help you code after this workshop.
14. Ask if there is a full or advanced example relating to the workshop.

RESOURCES

- ZIM: https://zimjs.com
- ZIM DOCS: https://zimjs.com/docs
- ZIM LEARN: https://zimjs.com/learn
- ZIM SKOOL: https://zimjs.com/skool
- ZIM KIDS: https://zimjs.com/kids
- WHAT IZ?: https://zimjs.com/whatiz
- ZIM CAPTURE: https://zimjs.com/capture
- ZIM BITS: https://zimjs.com/bits
- ZIM NEWS: https://zimjs.com/news
- ZIM Updates: https://zimjs.com/updates

- Support: https://zimjs.com/slack
- CodePen: https://codepen.io/zimjs
- Facebook: https://facebook.com/zimjs
- Twitter: https://twitter.com/zimlearn
- CreateJS: http://createjs.com
- JavaScript: https://developer.mozilla.org
- Sheridan: http://imm.sheridanc.on.ca