BADGE 4
BACKCreate slots with triggers.
For Badge 4, we will make a series of slots across the bottom.
Each slot will have a trigger to test when a ball is in a slot.
This is in preparation for Badge 5 where we test to see if the ball has fallen in the right slot.
If it has not, then we will shoot the ball out of the slot.
When all the balls are in the right slots, we will go to the last badge, Badge 6, for a conclusion.
30 a) BELOW the makeBalls function, make a new section called // ~~~~~~~ SLOTS.
30 b) Make a variable called walls and assign a new Container() with stageW,stageH as parameters. Chain on an addTo() method with stage,0 as parameters so the walls will be placed behind everything else on the stage.
30 c) Make a variable called slots and assign a new Container() with stageW,stageH as parameters. Chain on an addTo() method with stage. This will hold slot rectangles to detect the balls.
30 d) Prepare variables for constructing the walls and slots:
- Make a variable called wallThickness and assign it a value of 10
- Make a variable called bottomThickness and assign it a value of 30
- Make a variable called wallLength and assign it a value of 100
- Make a variable called spacing and assign it a value of (stageW-wallThickness)/letters.length
- This last calculation is the spacing between wall centers. Note: there is one more wall than slots so we subtract that width.
ZIM Learn References
31. Make a loop() passing it parameters of letters, makeSlot.
The first parameter is the letters array that we will loop through as we want to make a slot for each letter.
The second parameter is the function to call each time we loop.
Now define the function below using the function keyword, the name of the function (makeSlot())
and collect parameters we will call letter, i.
The loop function will pass us each letter as we loop - and the second parameter will tell us which loop number (iteration) we are on (0,1,2,etc.).
HIGHLIGHT MORE ANSWER
32. Make a variable (var) called body and assign the results of the makeRectangle() method of physics.
Put the object first (physics) then the dot (.) followed by the method name (makeRectangle()) and pass a configuration object with the following properties:
- width:wallThickness
- height:wallLength
- dynamic:false
- This last property is because we do not want the walls to move.
We now want to tile the bodies (at their centers) in the x direction based on the spacing we calculated above.
So we will start at half the wall thickness. We then move the spacing times (*) the loop number (i).
- Set the x property of the body to wallThickness/2 + i*spacing.
- Set the y property of the body to stageH-wallLength/2-bottomThickness as we have a bottom wall too.
ZIM Learn References
33. Make a variable called rect and assign a new Rectangle() with parameters of
wallThickness, wallLength, frame.white.
Chain on a centerReg() method with a parameter of walls.
Note: we add the wall to the walls Container.
Use the addMap() method of physics to map the rect to the body (body is the first parameter and rect the second).
HIGHLIGHT ANSWER
Here we will make ZIM Rectangle() objects as triggers that will be used in hitTests with the balls.
These are positioned inside the slots and each rectangle is given a letter property for easy comparison during the hitTest phase.
[EDIT] We could use the letter property to test the correct slot - but later we compare the child number instead.
The color of the triggers will be frame.clear which is really just "rgba(0,0,0,0)".
34 a) Make a variable called trigger and assign a new Rectangle().
Pass spacing-wallThickness-60, wallLength-40, frame.clear as parameters.
Chain on the centerReg() with a parameter of slots.
Also chain on the pos() method with the following parameters:
- wallThickness/2 + spacing/2 + i*spacing
- stageH-wallLength/2-bottomThickness
34 b) Assign the letter to a letter property of the trigger. Put the object first (trigger) and dot (.) the property (letter) and then assign (=) letter. Remember that we are in a loop through the letters and are given the letter each loop.
HIGHLIGHT MORE ANSWER
We have a slight problem. We need to make one last wall for our slot.
So we will call the makeSlot() function one more time
but we do not want to make a trigger.
So what we will do is send "" in as the value for the letter.
And we will use an if(){} to test
for an empty letter and if it is empty, we will not make a trigger.
35. AFTER the makeSlot function, call makeSlot() and pass it parameters of "", 11.
INSIDE the makeSlot function BEFORE the var trigger, create a conditional if(){}.
Inside the ( ) test to see if letter == "".
Inside the { } put the return; command.
If we have just one statement inside the { } then we can remove the { }.
return means leave the function. The ZIM loop()
calls a function each loop. So return means leave this function and go to the next loop function.
It acts like a continue in a traditional for(){}.
So that is fine here. If you need a break to stop the loop completely, then return a value.
ZIM loop knows that if a value is returned, it will exit the loop - and return the value that you return as a bonus!
This can be handy as we can then test the return value of a ZIM loop for any information we want to know from within the loop.
HIGHLIGHT MORE ANSWER
36. AFTER the last makeSlot() call, make a variable called bottomBody
and assign the results of the makeRectangle() method of physics.
This will be our physics bottom wall for the slots.
Pass in a configuration object with the following properties:
- width:stageW
- height:bottomThickness
- dynamic:false
37. Make a variable called bottom and assign a new Rectangle() for the bottom wall.
Pass parameters of stageW, bottomThickness, frame.white.
Chain on the appropriate methods to center the registration in the walls
and position the rectangle at bottomBody.x, bottomBody.y.
CLAIM YOUR BADGE
Good work - are you getting the hang of it? We are now ready to go to the next section to make the balls pop - but claim your badge first!
HIGHLIGHT ANSWER
(SHOW YOUR TEACHER)
