var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 1280;
var height = 800;
var color = light; // or any HTML color such as "violet" or "#333333"
var outerColor = grey;
// So that we can reuse this - all items will be called shapes (not bugs)
// we will want to randomly pick shapes each time from four different sets
// so store them in four different arrays
// images are in the vertical order of solution and horizontal order of solution
var images1 = [
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/libelle/libelle-rechts.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/libelle/libelle-boven.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/libelle/libelle-links.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/libelle/libelle-beneden.png"
];
var images2 = [
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/spin/spin-rechts.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/spin/spin-boven.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/spin/spin-links.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/spin/spin-beneden.png"
];
var images3 = [
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/bij/bij-rechts.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/bij/bij-boven.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/bij/bij-links.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/bij/bij-beneden.png"
];
var images4 = [
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/beestje/beestje-rechts.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/beestje/beestje-boven.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/beestje/beestje-links.png",
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/beestje/beestje-beneden.png"
];
// combine the arrays into an assets array
var assets = [
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/richting-tabel-mini.png",
{
id: "bravo",
src:
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/audio/bravo.mp3"
},
{
id: "dathebjegoedgedaan",
src:
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/audio/dathebjegoedgedaan.mp3"
}
]
.concat(images1)
.concat(images2)
.concat(images3)
.concat(images4);
var frame = new Frame(
scaling,
width,
height,
color,
outerColor,
assets,
null,
new ProgressBar()
);
frame.on("ready", function () {
zog("ready from ZIM Frame");
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
new Label({
text: "Plaats diertje op de correct: kijk naar de kleur en stippen!",
color: black
}).pos(260, 80);
var grid = asset(
"https://raw.githubusercontent.com/karelrosseel/evadeherdt/master/richting/richting-tabel-mini.png"
)
.centerReg()
.sha("rgba(0,0,0,.3)", 10, 10, 20);
// // used to measure size of existing picture grid
// new Guide({percent:false});
// new Guide({percent:false, vertical:false})
// centerReg the rectangle so we can snap to it later in the center
// cannot be clear for hitTest - but can be faint or if desired could put under grid asset
var gridTile = new Tile(
new Rectangle(135, 88, faint).centerReg(),
4,
4,
2,
2
).loc(632, 277); //.place()
// we will have an array of 4 shapes that we update with new bitmaps each time
// so lets get a matching set of 4 arrays that hold the image strings for each type
var images = [images1, images2, images3, images4];
// here is the array where we will hold the actual shape objects
// these will be containers that will hold a one of the four shapes for its types
var shapes = [];
loop(4, function () {
var shape = new Container();
shapes.push(shape); // add the container to the array
});
// whenever we need to we will put bug images into these shape containers
function makeShapes() {
loop(shapes, function (shape, i) {
// get the shape container and the index
shape.removeAllChildren();
var imageOptions = images[i]; // which strings to choose from
shape.row = i; // this records the proper row index number
shape.col = rand(imageOptions.length - 1); // 0-3 this records the proper column index number
var chosenShape = imageOptions[shape.col]; // get the file for that number
asset(chosenShape).sca(0.57).addTo(shape); // add the image of that file to the container
shape.centerReg({ add: false }).expand(80, 0, 0, 40);
shape.mouseChildren = false; // make sure to drag the container not the image we will put inside later
});
// now that we have recorded which col and row we can shuffle the shapes
shuffle(shapes);
}
makeShapes();
// make sure the run the shuffled shapes in order with a series
var shapeTile = new Tile({
obj: series(shapes),
cols: 2,
rows: 2,
spacingV: 55,
spacingH: 100,
clone: false // otherwise does not clone col and row values
})
.loc(100, 310)
.sha("rgba(0,0,0,.2)", 8, 8, 10)
.drag();
shapeTile.loop(function (shape) {
shape.startX = shape.x;
shape.startY = shape.y;
});
var emitter = new Emitter({
width: 500,
height: 170,
obj: new Circle([10, 20], ["red", "yellow", "lime", "blue"]),
horizontal: true,
shrink: false,
force: { min: 5, max: 8 },
angle: { min: -90 - 20, max: -90 + 20 },
startPaused: true
}).center();
STYLE = { close: true, closeColor: white };
var win = new Pane(
800,
200,
"Joepie, juf Eva is blij, allemaal correct!",
green,
white
);
STYLE = {};
var shapeCount = 0;
shapeTile.on("pressup", function (e) {
var shape = e.target;
var answer = gridTile.loop(function (square, i) {
if (square.hitTestReg(shape)) {
// is the reg of the shape on the square
return square;
}
}); // zim loop returns true so can't just see if answer is true - need to test it is a rect
if (answer.type == "Rectangle") {
if (shape.col == answer.tileCol && shape.row == answer.tileRow) {
shape.mouseEnabled = false;
shapeCount++;
shape.loc(answer);
frame.asset("bravo").play(); //({volume:.3, loop:-1});
stage.update();
if (shapeCount == 4) {
timeout(1000, function () {
emitter.spurt(50);
frame.asset("dathebjegoedgedaan").play();
win.show();
});
}
} else {
shape.animate({ x: shape.startX, y: shape.startY }, 800, "backOut");
}
} else {
shape.animate({ x: shape.startX, y: shape.startY }, 800, "backOut");
}
});
// or some such ending!
win.on("close", function () {
shapeTile.loop(function (shape) {
shape.mouseEnabled = true;
shape.animate({ x: -300, y: shape.startY }, 800);
timeout(1500, function () {
shape.animate({ x: shape.startX }, 800, "backOut");
});
});
timeout(800, function () {
shapeCount = 0;
makeShapes();
});
});
stage.update(); // this is needed to show any changes
}); // end of ready
