START
HIDECopy and paste this code into a new text file on your computer - save as code.html and view in Browser
minimal<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- ZIM is free to use. You can donate to help improve ZIM at https://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/03/zim.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script>
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// "fit" sets canvas and stage to dimensions and scales to fit inside window size
// "outside" sets canvas and stage to dimensions and scales to fit outside window size
// "full" sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
const scaling = "fit"; // this will resize to fit inside the screen dimensions
const width = 1024;
const height = 768;
const color = light; // ZIM colors like green, blue, pink, faint, clear, etc.
const outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use
const frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", () => { // ES6 Arrow Function - like function(){}
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
const stage = frame.stage;
let stageW = frame.width;
let stageH = frame.height;
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://zimjs.com/bits.html for 64 Interactive Media techniques
// *** NOTE: ZIM Cat defaults to time in seconds
// All previous versions, examples, videos, etc. have time in milliseconds
// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
// There will be a warning in the conslole if your animation is not moving ;-)
// put your code here (you can delete this sample code)
// with chaining - can also assign to a variable for later access
new Circle(100, pink)
.center()
.drag();
// without chaining
// const circle = new Circle(100, pink);
// circle.center();
// circle.drag();
stage.update(); // this is needed to show any changes
}); // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>
Or copy this minimal template with reduced comments - the Eric Noh template!
maximal<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>
<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/03/zim.js"></script>
<script>
// https://zimjs.com - JavaScript Canvas Framework - Code Creativity!
const frame = new Frame("fit", 1024, 768, light, dark);
frame.on("ready", () => {
const stage = frame.stage;
let stageW = frame.width;
let stageH = frame.height;
// put your code here
stage.update();
});
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
TEMPLATES
HIDEOr download the ZIM ZIP for more templates described at ZIM FRAME
Visit ZIM SHIM to use ZIM right in Adobe Animate with CreateJS tech!
CDN
HIDEThe ZIM CDN (Content Delivery Network) holds links to code files stored on the cloud with CloudFlare
HELP
HIDEZIM LEARN has tutorials and the DOCS are interlinked with ZIM BITS
ZIM TIPS and ZIM BUBBLING have the latest to earn ZIM BADGES!
CODE ZERO shows starter videos and SHERIDAN has PostGrad learning
SLACK and DISCORD community and support and GIT HUB code repository
TOOLS
HIDEMinify with DISTILL get stats with WONDER and files with ASSET LIST
ZIM ZAP lets you share code and ZIM LAB is an online editor!
Type code in an EDITOR with optional TYPESCRIPT Typings!
Make Mobile apps with PWAs - and Native Apps with CAPACITOR!
Try ZIM MVC Model View Controller - or NPM Node Package Manager for ZIM!
Use ADOBE ANIMATE for custom shapes and TEXTURE PACKER for Sprites!
CREATEJS powers ZIM and both use JAVASCRIPT
LIBRARIES
HIDEZIM SOCKET for Multiuser and ZIM GAME with Leader and ISOMETRIC Boards
ZIM TEN PHYSICS with integrated Physics!
ZIM PHYSICS for Box2D with SOUP of course!
ZIM THREE for 3D with MODELS in ThreeJS
ZIM PIZZAZZ for BACKINGS, ICONS, PATTERNS and PATHS
ZIM BASE provides easy database queries!
ORGANIZATION
HIDE// ZIM is organized in sections:
// FRAME, DISPLAY, METHODS, CONTROLS, CODE, WRAP, META
// Let's have a brief look at each...
// see https://zimjs.com/docs.html all the details!
// ---------------------------------
// FRAME - the framework class that makes and scales the canvas and stage
// scaling, width, height, color, outerColor, assets, path, etc.
var frame = new Frame("fit", 1024, 768, light, dark, ["pic.png", "sound.mp3"], "assets/");
frame.on("ready", function() {
var stage = frame.stage;
var pic = asset("pic.png").center();
asset("sound.mp3").play();
stage.update();
}); // end ready
// ---------------------------------
// DISPLAY - classes for objects viewed on the stage like shapes and components
var circle = new Circle(100, red); // also Rectangle, Triangle and Blob
var button = new Button(200, 100, "GO!");
// etc. and dozens more like Label, Slider, Dial, Tabs, ColorPicker...
// ---------------------------------
// METHODS - methods for the display objects above
circle.center(); // adds to and centers button on stage
circle.drag(); // allows the circle to be dragged and dropped
circle.animate(obj:{alpha:0}, 5000); // fades out circle over 5 seconds
// etc. and dozens more - also see PRINCIPLES sections below...
// ---------------------------------
// CONTROLS - classes that affect Display objects
new MotionController(stage, circle); // circle moves to mouse press
new Pages(stage, {page:home}, {page:help}); // handle pages and swiping
new Layout(stage,[{object:header},{object:content},{object:footer}]);
// responsive design with many more options (like css flex table)
// etc. including Parallax, Scroller, Guide, Grid, Emitter, SoundWave...
// ---------------------------------
// CODE - non-Canvas code convienence functions
var array = [red, yellow, green, blue];
var color = shuffle(array)[0]; // shuffles array and picks first color
var color = array[rand(array.length-1)]; // gets random element
// etc. many more including browser functions and asynchronus calls
// ---------------------------------
// WRAP - a dozen three-letter global functions starting with z
zog("hello world"); // short for console.log();
zid("tagID"); // short for document.getElementById();
// etc. including selectors similar to $() in jQuery
// ---------------------------------
// META - a few classes and functions operating on zim
DISTILL = true;
distill(); // writes to console all the commands used to reduce code
zimify(createjsObj); // adds zim Methods to native createjs display objects
wonder.count("wow"); // once set up records different types of stats
// ---------------------------------
The docs have all the details and changes are found at
https://zimjs.com/updates.html
Please also see the TRICKS section below!
TREATS
HIDE
// Here are some handy things that ZIM provides to make coding easier
// In the later examples, we list a few handy things CreateJS and JavaScript provide
// ---------------------------------
// CONFIGURATION OBJECTS
// Introduced in ZIM DUO so referred to as the ZIM DUO technique
// Classes, methods and functions accept parameters (often dozens)
// These are values only and the order matches an expected order as defined in the docs
// Many parameters have default values but order must be kept
// So if you want to only set the seventh parameter to false then you need six placeholder null values
circle.drag(null, null, null, null, null, null, false);
// This is really unmanageable at times so ZIM also accepts a configuration object as a single parameter
// The configuration object has properties that match the parameter names as set out in the docs
// The order in which we provide the properties does not matter:
circle.drag({onTop:false});
circle.drag({onTop:false, slide:true});
// Note: when there are only a few parameters, the ZIM DUO technique might not be available (see docs)
// Note: this is an alternative to having a short list of parameters and then setting properties after
// Advanced note: this technique is accomplished with zob() and you can use it in your own code
// ---------------------------------
// CHAINING
// Chainable methods let you place one method after the other in the same statement
// It is a technique to avoid repeating the object
// Traditionally we would have multiple statements - and these still work:
var circle = new Circle();
circle.center();
circle.x -= 100; // move it to the left
circle.drag();
// Chainable methods return the object they are placed on
// Below, the Circle object is created and then centered
// the center() method returns the Circle object which then has its drag() set
// the drag() method returns the Circle object which is then assigned to the var circle
var circle = new Circle().center().mov(-100).drag();
// Often we stack the methods (this allows us to comment out parts too)
// Note: watch you only put the semi-colon on your last line
var circle = new Circle()
.center()
.mov(-100)
.drag();
// You cannot assign an object to a variable if you chain a property on the end:
var circle = new Circle().center().alpha = .5; // would put .5 into var circle
// So ZIM provides a set of short chainable methods (like mov() in the example above):
loc(x, y, container)
pos(x, y, right, bottom, container)
mov(relativeX, relativeY)
alp(alpha)
rot(rotation)
siz(width, height, only)
ske(skewX, skewY)
reg(regX, regY)
sca(scale, scaleY)
// ---------------------------------
// STYLE
// STYLE can be used to set any parameter on a DisplayObject.
// For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, etc.
// These are applied at the time the objects are made.
// They are cascading with each level overriding the previous level:
//
// 1. GENERAL: any style can be specified in general
// corner:30 will make all corners default to 30
// 2. TYPE: styles for object type can be set to override the general styles
// Button:{corner:0} will make all button corners default to 0
// 3. GROUP: styles for a group can be set to override the type styles
// homePage:{corner:20} will make all objects of that group default to 20
// 4. OBJECT: styles applied as parameters to the object override all other styles
// new Button({corner:40}) will make this button have a corner of 40
STYLE = {
corner:20,
backgroundColor:pink,
type:{
Button:{width:{min:100, max:500}, corner:0, centerReg:true, move:{y:series([-150, -50, 50, 150])}},
Dial:{add:true, x:800, y:600, backgroundColor:red, scale:2, outline:true},
Pane:{corner:ignore, color:white, draggable:true, width:300, label:"HI!"},
ProgressBar:{add:true, x:200, y:600, barType:"rectangle", transform:true},
Tabs:{add:true, x:100, y:100}
},
group:{
homePage:{corner:30}
}
}
new Button(); // will have a corner of 0 and be pink
new Button({group:"homePage"}); // will have a corner of 30 and be pink
new Button({corner:10, group:"homePage"}); // will have a corner of 10 and be pink
new Button({corner:"ignore"}) // will have a corner of its default 20 and be pink
new Button({style:false}).pos(700,100); // will have original default styles
new Dial(); // will be red and scaled twice as big and have an outline
new Tabs(); // will have a corner of 20 and selection will be pink
var p = new ProgressBar({corner:15}); // will be a bar with transform tools, corner 15
p.percent = 25;
new Pane().show(); // will ignore corner 30 and use its original 20 - it will say HI! in white and be draggable
// ---------------------------------
// LOOPS
// A traditional for loop in JavaScript looks like this:
for (var i=0; i<10, i++) {
zog(i);
}
// ZIM provides a simpler and more feature rich loop:
loop(10, function(i) {
zog(i);
});
// often we loop through an array, an object or a zim Container
// ZIM loop provides an additional context sensitive first parameter:
var array = [red, green, yellow, blue];
loop(array, function(color) { // the index number is now the second parameter
zog(color);
});
// Note: to continue in a loop use return - to exit the loop return a value
// See the docs for more features and examples (note, there are TWO listings for ZIM loop)
// ---------------------------------
// TIMEOUT AND INTERVAL
// A traditional time out and interval in JavaScript looks like this:
setTimeout(function(){zog("once after a second");}, 1000);
setInterval(function(){zog("repeat after a second");}, 1000);
// These do not use a requestAnimationFrame so they can take resources when app is minimized
// and contrary to event listener format, the function comes first which obscures the time
// ZIM provides a timeout and interval to adjust these and adds more features
// such as a total number for the interval, run immediately, pause(), time, count, etc. see docs
timeout(1000, function(){zog("once after a second"););
interval(1000, function(){zog("repeat after a second"););
// ---------------------------------
// ZIM VEE VALUE
// Introduced in ZIM VEE (5) as a way to pass in dynamic parameters
// For instance, ZIM Emitter emits particles and we may want to emit a variety of particles
// We might want to pass in a range of decay times, etc.
// We could pass in a random number for the decay time but then it would always use that decay time
// So, a global function called zik() was created to PICK from a ZIM VEE value
// The ZIM VEE value can be the following:
// 1. an Array of values to pick from - eg. [red, green, blue]
// 2. a series - eg. series(red, green, blue) to run in order
// 3. a Function that returns a value - eg. function(){return Date.now();}
// 4. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required
// 5. any combination of the above - eg. [red, function(){x>100?[green, blue]:yellow}] zik is recursive
// 6. a single value such as a Number, String, Rectangle(), etc. this just passes through unchanged
// The docs will indicate when a ZIM VEE value can be used as a parameter
// For instance, here is a ZIM interval that changes the interval time as it runs:
interval({min:200, max:800}, dropBombs); // bombs will fall at different rates between 200ms and 800ms
interval([1000, 2000], dropBombs); // bombs will fall at either 1000 or 2000 ms
// ---------------------------------
// EXTENDING ZIM
// Of course, the many treats of ZIM are really the DISPLAY classes, METHODS and CONTROLS
// The DISPLAY classes extend CreateJS classes (see the CreateJS panel below)
// And you can extend the ZIM classes in a similar way with extend()
// This is a helper method that wraps up the tricky JavaScript 5 process of extending classes
// extend() is based on the CreateJS extend() method with a few changes:
var Collection = function() {
// the super constructor must be run
this.super_constructor();
// custom properties and methods, etc.
}
extend(Collection, Container); // Collection will be a Container
// see the docs for more options
// ---------------------------------
// JAVASCRIPT FUNCTIONS
// In JavaScript we can define (declare) and call (run) a function like so:
function greet() {zog("hello");}
greet();
// In JavaScript, a function is also first-class object
// So we can store a function object in a variable (just like storing a Number object in a variable):
var greet = function(){zog("hello");}; // a function literal or an anonymous function assigned to a var
greet(); // run the function - will log "hello" in the console
// We can also pass a function object as a parameter to be run later
timeout(1000, function(){circle.removeFrom(); stage.update();});
// We have passed the function object as the second parameter to the timeout() method
// Alternatively, we could declare a function and pass that in as a parameter:
function remove() {
circle.removeFrom();
stage.update();
}
timeout(1000, remove);
// Note: that we do not call the remove function in the timeout() but rather refer to it
// This second way is longer so we often use the first way with the anonymous function
// We can also store a function as a property of an object
// All the ZIM functions (aside from the global short functions) are stored in an object called zim
// As such, we call this zim object the zim "namespace"
rand(10,20); // returns a random integer between and including 10 and 20 (more options available)
mobile(); // returns if the app is mobile and if so which type
Circle(); // is the Circle class (in JavaScript, a class is a function)
// ---------------------------------
// EVENTS
// CreateJS provides an on() method to add events and an off() method to remove events
// These replace the traditional addEventListener() and removeEventListener() methods in JavaScript
// The immediate benefit is that they are shorter!
// They work the same way but have a few conveniences:
var circle = new Circle().center();
var score = 0;
circle.on("click", function() {
score++;
});
// We can automatically remove the event once it runs once:
circle.on("click", function() {
score++;
}, null, true); // the fourth parameter set to true makes the event run once
// Note: above we use the anonymous function as the second parameter
// We could declare the function and use the function reference instead:
function addScore() {
score++;
}
circle.on("click", addScore);
// As mentioned, this is longer so we tend to use the anonymous function
// ---------------------------------
// EVENT OBJECT
// The event functions receive an event object with extra information
// Imagine that we have a zim Container called monsters with 100 monster objects inside
monsters.on("click", function(e) { // e is the event object
e.target.removeFrom();
// e.target is whatever monster caused the event so one monster will be removed
// e.currentTarget is a reference to the object the event was put on - so in this case, monsters
stage.update();
});
// Note: ZIM drag() uses the event object to drag an object in a container:
monsters.drag(); // would drag which ever monster inside monsters is pressed
monsters.drag({currentTarget:true}); // would drag all the monsters
// Here we use the event object to find out which key is pressed:
frame.on("keydown", function(e) {
zog(e.keyCode); // will tell you the code of the key
if (e.keyCode == 32) {zog("spacebar");}
});
// ---------------------------------
// MODULES
// ZIM and CreateJS use the module pattern to give a "namespace" object
// The module pattern allows you to use the same namespace across scripts
// This allows you to use only the modules you need and combine these in any order
// ZIM was initially provided as modules (code, display, methods, controls, frame, etc.)
// but this was discontinued in favor of ZIM DISTILL (see below)
// You can use the module pattern in your code
// Perhaps you want to store code for each page of your app in separate files
// you would then import each page at the top of your main HTML page:
<script src="page1.js"></script>
<script src="page2.js"></script>
// Here is what the module pattern would look like:
// this is inside page1.js:
var app = function(app) {
app.makePage1 = function() {
zog("page1");
};
// etc.
return app; // return the object with its properties to the outside
} (app || {}); // the app namespace object if it exists OR an object literal if it does not
// this is inside page2.js:
var app = function(app) {
app.makePage2 = function() {
zog("page2");
};
// etc.
return app; // return the object with its properties to the outside
} (app || {}); // the app namespace object if it exists OR an object literal if it does not
// then in your main HTML page you can call the remote functions:
app.makePage1();
app.makePage2();
CREATEJS
HIDE// CreateJS is an open source library of JavaScript modules for the HTML Canvas // https://createjs.com // CreateJS (specifically EaselJS) gives us the stage, basic display classes and events // These generally follow the structure and names found in Adobe Flash // The Display classes are Bitmap, Shape, Container, Text, Sprite and MovieClip // CreateJS also has SoundJS, PreloadJS and TweenJS modules // that are used by ZIM Frame loadAssets() and the move() and animate() methods // EXAMPLES // To use CreateJS classes, use the createjs namespace: var container = new createjs.Container(); stage.addChild(container); // you cannot use any of the dozens of ZIM METHODS // for instance, you cannot use container.center(); // nor can you use container.drag(); etc. because these are ZIM // you can use a ZIM METHOD as a zim function: zim.center(container, stage); zim.drag(container); // or you can zimify a CreateJS object: zimify(container); // then you can use ZIM METHODS // BETTER SOLUTION // The above is annoying so in ZIM 4TH, we made a major change: // ZIM extends all the basic CreateJS display classes // The ZIM classes are pretty well the same as the CreateJS classes // except they have all the ZIM METHODS // and they have width and height parameters and properties // The Sprite class in ZIM is also modified to match ZIM animations var container = new Container(); container.center(); container.drag(); // DON'T FORGET // because ZIM classes extend CreateJS classes // they also have all of the original CreateJS methods and properties // the ZIM docs mention these but you will need to go to CreateJS // to read about their details https://www.createjs.com/docs/easeljs/ // CreateJS METHODS: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. // CreateJS PROPERTIES: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. // CreateJS EVENTS: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover
PRINCIPLES
HIDE// ZIM is Object Oriented - see the ZIM Learn Tutorials for full definition videos
// CLASS and OBJECT
// A class is a template from which an object is made using the new keyword
var rect = new Rectangle(); // Rectangle is the class, rect holds the object
// METHODS
// A method does something to an object or lets the object do something (verb)
// We use the dot syntax . to say that a method belongs to an object
rect.addTo(); // adds the rect to the stage
rect.drag(); // lets the rect be dragged
// (a method is a function that belongs to an object)
// PROPERTIES
// A property describes the object or is something the object has (adjective)
// We use the dot syntax . to say that a property belongs to an object
rect.color = red; // sets the color of the rect to red
zog(rect.alpha); // gets the transparency of the rect
rect.x = 20; // positions the rect to 20 pixels
// (a property is a variable that belongs to an object)
// EVENTS
// An event is when something happens like a click, a load, a resize, etc.
// We use the on() method to capture these and run a function
rect.on("mousedown", function(e) { // using a function literal as second parameter
rect.rotation += 90; // add 90 degrees to the rect rotation
// e is an optional event parameter that collects extra information
// such as e.target which gives what caused the event
// this is useful for events on containers of multiple objects
});
// ZIM is filled with Classes, Objects, Methods, Properties and Events
// The documentation has a section detailing each of these
// You can make your own as well - see the ZIM Learn Tutorials about this
PROGRAMMING
HIDE// ZIM and CreateJS are programmed in JavaScript
// So you are programming in JavaScript when you code in ZIM
// JavaScript has all the traditional programming basics
// See the ZIM Learn Tutorials What IZ section for detailed videos
// Here are some very quick definitions:
// SYNTAX
// When coding you have to use certain characters in certain places
// If you get this wrong, there is often an error shown in the console (F12)
// You can only use words that are language keywords or that have been defined correctly
// OPERATORS
// operators (often one character) are part of the coding languages
// arithmatic: + - * / %
// assignment: =
// comparison: == < > <= >= !
// ; ends a statement, etc.
// PRIMATIVES
"string"; // a String is a collection of letters, like a word or words
7; // a Number needs no quotes and is... a number
true; // a Boolean true or false
// these are also wrapped in JavaScript objects but don't worry about that
// EXPRESSIONS
// An expression is anything that evaluates to an object
// 10 + 10
// "hello " + name // + is concatenation here (append)
// STATEMENTS
// A statement ends in a semi-colon;
// It is a combination of operators and expressions
var x = speed + 10;
// These are usually on one line each but they do not have to be
var y = 20; var z = "30"; // two statements on the same line
// Sometimes we leave off the ; which still works if the statement is on its own line
// and if JavaScript is in a non-strict mode (default)
// BRACKETS
// Brackets always have matching pairs
// {} are used to hold a block of code that will be usually be done in order (or an object literal)
// [] are an Array literal
// () are used for order of operation and for parameters
// When we nest brackets often we indent to help us keep track
// VARIABLES
// A variable is used to hold or refer to an object (the object can change)
// It is like a container with a label (name or identifier)
// Here we use the keyword var to declare a variable with an identifier x
// We then assign the variable x the number 7 using the assignment operator:
var x;
x = 7;
var y = 9; // or we usually declare and assign in one statement
// CONDITIONALS
// A conditional tests to compare the value of an expression
// Here we use the if else keywords round brackets and curly brackets
// to make a conditional expression
// We use the comparison operator == to test if x is equal to 7
// We run the first block of code if the x == 7 Boolean expression is true
// We run the second block of code if the x == 7 Boolean expression is false
// These blocks of code could have many statements:
if (x == 7) {
//do this;
} else {
//do this;
}
// FUNCTIONS
// A function declares a block of code to be run any time the function is called
// Here we declare a function with an identifier of test
// We collect a parameter (like a variable) called n
// and we define a block of code that does a conditional test on n
// If the test is true we return true and otherwise we return false
// return is a keyword that makes the function end and send back a value
// We can make functions without parameters
// We can make functions that do not return a value
// It depends on what we want the function to do
// Finally, we execute or run the function by using the identifier and ()
// Note, here we are passing the value of x into the function
// This means that we will be testing whatever x is
// x happens to be 7 from above so we have 7 * 5 = 35 which is less than 50
// So test(x) would have a value of Boolean false
function test(n) {
// we indent the block of code to make it easier to read
// as we start nesting code, indenting is very important
if (n * 5 > 50) {return true;}
return false;
}
test(x);
// We can call this function anywhere in the code as many times as we want
// We can even call the function before we define it
// JavaScript will "hoist" the declarations and definitions to the top automatically
// LOOPS
// A loop repeats a block of code while a condition is true
// Here we loop starting with a variable i having a value of 0
// We keep looping as long as i is less than 10
// Each time we finish a loop we add one to the value of i
// The i++ is a short form for i = i + 1
// Each time we loop we do what is in the block of code
// So we would execute (call) the function makeMonster ten times:
for (var i=0; i<10; i++) {
// note that we indent the block of code
makeMonster();
}
// ARRAYS
// An Array is a list of variables each with an index that increases from zero
var a = [red, green, blue, yellow];
a[0]; // refers to the first element in the array red
zog(a[1]); // displays green in the console window
a[0] = "pink"; // assigns "pink" to first element of the array
// You can nest arrays too
var b = [["a","b","c"],["d","e","f"]];
zog(b[0][1]); // b
// OBJECTS
// An object literal is a collection of properties each with a value that we access via identifier
var o = {name:"Dan Zen", occupation:"Inventor"}
o["name"]; // has a value of "Dan Zen"
o.name; // is the same thing and has a value of "Dan Zen"
o["occupation"] = "Professor"; // replaces "Inventor" with "Professor"
o.occupation = "Inventor"; // puts "Inventor" back into occupation