ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Random from Array</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - https://danzen.com - Canadian New Media Award Winner -->
<!-- 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.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/016/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<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
// FILL 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 = 1000;
const height = 800;
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Random from Array (2016 - updated 2022)
// ************************
// This technique works but we have progressed since this example
// for instance, see here: https://codepen.io/zimjs/pen/BaooqBb
// or the many examples in https://zimjs.com/elearning/quiz.html
// We would probably use ZIM Tile() now - and animate back to start if missed, etc.
// ************************
// Often you want to show unique things but in random order
// Here is a handy technique
// STEPS
// 1. make an Array of your unique things
// 2. use shuffle() to mix up your array
// 3. loop through your shuffled array!
// EXTRA
// 4. make a Label for each thing
// 5. make each label drag and drop using drag()
// 6. make ZIM shapes for each thing
// 7. hide the label and the shape if they match on drop
// 8. snap back to starting point if they do not match move()
// 9. show message when all are matched + restart when closed
// 1. make array
const titlesArray = ["square", "circle", "triangle", "rectangle", "oval"];
// create a container to hold titles made from ZIM Label objects
const titles = new Container()
.pos(300, 130);
makeTitles(); // a makeTitles() function will help our restart
function makeTitles() {
// 2. shuffle array
// here is the command to shuffle the array
// this will modify the array
shuffle(titlesArray);
// zog(titlesArray); // uncomment to look at results in the dev console
// 3. loop through array
// make a label for each shape and add it to the titles container
let label;
loop(titlesArray, function(title, i) {
// 4. make ZIM Label with following parameters (more options in doc)
// labelText, fontSize, font, textColor, textRollColor, shadowColor
label = new Label(title, 40, "Courier", "#DDD", "#FFF")
.centerReg(titles)
.expand() // makes it easier to grab (see docs for more)
.loc(null, i * 100)
label.startX = label.x; // for snapping
label.startY = label.y;
});
}
// 5. drag the labels with drag()
// will drag individual items (docs shows more settings)
titles.drag();
// 6. make ZIM shapes for each
// create an object to store shape references
const s = {};
s.circle = new Circle(40, "#acd241");
s.square = new Rectangle(70, 70, "#888");
s.square.centerReg({add:false});
s.rectangle = new Rectangle(90, 50, "#50c4b7");
s.rectangle.centerReg({add:false});
s.triangle = new Triangle(80, 80, 80, "#e472c4");
s.oval = new Circle(30, "#f58e25");
s.oval.scaleX = 1.5;
// create a container for the shapes
const shapes = new Container()
.pos(700, 130)
.bot(); // put shapes under titles
makeShapes(); // we use this again when we restart
function makeShapes() {
// shuffle the array again and add shapes to stage
shuffle(titlesArray);
loop(titlesArray, function(title, i) {
const shape = s[title]; // access the associated shape (dynamic targeting)
shape.title = title; // store this for the drop check
shape.loc(null, i * 100, shapes);
});
}
// 7. check the shape matching on drop with hitTestReg()
titles.on("pressup", function(e) {
const title = e.target; // store which title was dropped
// S.getObjectUnderPoint() but is tricky because containers shifted
// instead we will loop through each shape and check if it is hitting
const status = loop(shapes, function(shape, i) {
if (shape.hitTestBounds(title)) { // shape hits title
if (title.text == shape.title) { // shape matches title
title.removeFrom();
shape.removeFrom();
S.update(); // play a sound ;-) or add some points!
if (shapes.numChildren == 0) { // shapes are all gone
message.show();
}
return "hitting"; // exits loop and puts "hitting" in status
}
}
});
// 8. if nothing matches then move title back to start position
// see why we stored the start positions ;-)
if (status != "hitting") title.animate({x:title.startX, y:title.startY}, .7);
});
// 9. create message with Pane() // more options available in docs
// this creates the pane and we use the show() method to show it
const message = new Pane("Amazing Skills!");
message.on("close", function() {
makeTitles(); // this is why we made functions ;-)
makeShapes();
S.update();
});
const docItems = "Frame,Container,Circle,Rectangle,Triangle,Label,Pane,drag,hitTestReg,hitTestBounds,move,animate,loop,pos,bot,removeFrom,centerReg,expand,shuffle,loop,zog";
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // 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>