Page 1 of 2
ANT maze
Posted: Tue Feb 13, 2024 8:59 am
by richmond62
This is a way to learn how to move objects round the screen by making a maze game.
We will start with a stack that looks like this, but contains no code:
-
- Screenshot 2024-02-13 at 11.03.23.png (163.4 KiB) Viewed 1204 times
-
To follow along please download the attached stack and open it in OpenXTalk.
Re: ANT maze
Posted: Tue Feb 13, 2024 9:10 am
by richmond62
Once you have downloaded the
zipped OXT file, unzipped it, and opened it in OXT, Please have a look at it and you should see these things:
-
- Screenshot 2024-02-13 at 11.09.06.png (189.52 KiB) Viewed 1202 times
-
The image "ANT" is the picture we are going to move around the screen.
The graphic "RR" is a sort of fence to make sure the image "ANT" does not go somewhere we don't want it to.
-
RIGHT-CLICK on the image "ANT" and see that it is LOCATED at 400,300:
-
- Screenshot 2024-02-13 at 11.12.38.png (230.61 KiB) Viewed 1200 times
Re: ANT maze
Posted: Tue Feb 13, 2024 9:15 am
by richmond62
The FIRST thing we are going to do is make a BUTTON to be able to make the image "ANT" return to its 'Home' at location 400,300 in case we lose it.
On the
Tools palette click to select a button:
-
- chooseBUTTON.png (38.23 KiB) Viewed 1199 times
-
And DRAG it onto your stack:
-
- makeBUTTON.png (304.33 KiB) Viewed 1198 times
-
RIGHT-CLICK on your new button and change its name to "HOME":
-
- nameBUTTON.png (425.38 KiB) Viewed 1196 times
-
SAVE the stack!
Re: ANT maze
Posted: Tue Feb 13, 2024 9:28 am
by richmond62
Make another button in exactly the same way and change its name to "AWAY":
-
- awayBUTTON.png (427.09 KiB) Viewed 1195 times
-
SAVE your stack.
Re: ANT maze
Posted: Tue Feb 13, 2024 10:26 am
by richmond62
Now: RIGHT-CLICK on the button "AWAY" to open the SCRIPT EDITOR:
-
- scriptAWAY.png (176.78 KiB) Viewed 1189 times
-
Now the SCRIPT EDITOR for your button will open:
-
- Screenshot 2024-02-13 at 12.23.20.png (139.07 KiB) Viewed 1189 times
-
and type this SCRIPT into the SCRIPT EDITOR:
Code: Select all
on mouseUp
move image "ANT" to 40,40
end mouseUp
-
- Screenshot 2024-02-13 at 12.27.36.png (70.16 KiB) Viewed 1187 times
-
Re: ANT maze
Posted: Tue Feb 13, 2024 10:31 am
by richmond62
Click on the APPLY button:
-
- applySCRIPT.png (72.56 KiB) Viewed 1185 times
-
CLOSE the SCRIPT EDITOR.
SAVE your stack.
-
Now, when you CLICK on the button "AWAY" the image "ANT" should MOVE like this:
-
- move_1.png (75.48 KiB) Viewed 1183 times
Re: ANT maze
Posted: Tue Feb 13, 2024 10:41 am
by richmond62
Now it is time for you to do something by yourself: You need to write a SCRIPT in the "HOME" button to return the image "ANT" to 400,300:
-
- homeSCRIPT.png (140.85 KiB) Viewed 1180 times
Re: ANT maze
Posted: Tue Feb 13, 2024 11:05 am
by richmond62
An important thing you need to know is that points for
LOCATION Up and
Down the page start with 0 at the top:
-
- Screenshot 2024-02-13 at 13.03.42.png (57.53 KiB) Viewed 1177 times
-
And points for
LOCATION ACROSS the page start on the left.
Re: ANT maze
Posted: Tue Feb 13, 2024 11:19 am
by richmond62
NOW we want to be able to move the image "ANT" with the ARROW keys on our keyboard:
-
Re: ANT maze
Posted: Tue Feb 13, 2024 11:19 am
by richmond62
NOW we want to be able to move the image "ANT" with the
ARROW keys on our keyboard:
-
- Screenshot 2024-02-13 at 10.53.34.png (33.42 KiB) Viewed 1175 times
-
The
ARROW keys have easy names:
-
- arrowKEYS.png (47.26 KiB) Viewed 1174 times
-
So that we DO NOT have to use BUTTONS we have to put the script for the
ARROW keys into the scriptEDITOR of the CARD:
-
- cardSCRIPT_1.png (369.6 KiB) Viewed 1172 times
Re: ANT maze
Posted: Tue Feb 13, 2024 11:28 am
by richmond62
The FIRST thing we have to do is find out the LOCATION of the image "ANT":
-
- Screenshot 2024-02-13 at 13.46.46.png (107.58 KiB) Viewed 1165 times
-
Then we have to find out which of the
ARROW keys has been pushed:
-
- arrowZ.png (220.26 KiB) Viewed 1164 times
-
You will see, that at the moment, the SCRIPT for each
ARROW key is empty.
Re: ANT maze
Posted: Tue Feb 13, 2024 11:37 am
by richmond62
I have decided to make each move of the image "ANT" 20 points (you can, for course, change this amount if you want to):
-
- arrowZZZ.png (265.86 KiB) Viewed 1164 times
-
Code: Select all
on arrowKey ARKEY
put the item 1 of the location of image "ANT" into HORIZONTAL_POSITION
put the item 2 of the location image "ANT" into VERTICAL_POSITION
put VERTICAL_POSITION
------
If ARKEY is "Up" then
put (VERTICAL_POSITION - 20) into VERTICAL_POSITION
move image "ANT" to HORIZONTAL_POSITION, VERTICAL_POSITION
end if
------
If ARKEY is "Down" then
put (VERTICAL_POSITION + 20) into VERTICAL_POSITION
move image "ANT" to HORIZONTAL_POSITION, VERTICAL_POSITION
end if
------
If ARKEY is "Left" then
put (HORIZONTAL_POSITION - 20) into HORIZONTAL_POSITION
move image "ANT" to HORIZONTAL_POSITION, VERTICAL_POSITION
end if
------
If ARKEY is "Right" then
put (HORIZONTAL_POSITION + 20) into HORIZONTAL_POSITION
move image "ANT" to HORIZONTAL_POSITION, VERTICAL_POSITION
end if
end arrowKey
Now have some fun pressing the
ARROW keys and seeing what happens to the ANT.
If you are NOT careful the ANT will disappear OFF the OXT card.
You can always use the "HOME" button to bring it back again.
Re: ANT maze
Posted: Tue Feb 13, 2024 12:03 pm
by richmond62
The way we are going to make sure that our ANT does not get lost is by using
INTERSECT.
The FIRST thing we have to is make sure our 'fence', the graphic "RR" is
transparent:
-
- graphicADJUST_1.png (205 KiB) Viewed 1159 times
-
RIGHT CLICK on the graphic "RR" and select the Property Inspector:
-
- graphicADJUST_2.png (244.83 KiB) Viewed 1157 times
-
And make sure that 'Opaque' is unselected.
NOW we can edit out CARD SCRIPT so the ANT does NOT go outside the 'fence'.
Re: ANT maze
Posted: Tue Feb 13, 2024 12:17 pm
by richmond62
NOW we can edit out CARD SCRIPT so the ANT does NOT go outside the 'fence'.
-
- Screenshot 2024-02-13 at 14.34.00.png (85.31 KiB) Viewed 1151 times
-
You can now edit the CARD SCRIPT for the other 3 ARROW keys.
The PROBLEM about this method is that the ANT gets stuck on the 'fence'.
Re: ANT maze
Posted: Tue Feb 13, 2024 12:30 pm
by richmond62
One of the ways to make sure the ANT does NOT get stuck on the 'fence' is to make it 'bounce back' when it hits the 'fence':
-
- bounce.png (68.35 KiB) Viewed 1153 times
Re: ANT maze
Posted: Tue Feb 13, 2024 12:41 pm
by richmond62
Please make sure you are comfortable with the scripts and how they work, as, in PART 2 of this exercise we will be extending our work to make a full game where, using the ARROW Keys we can navigate an ANT through a Maze:
-
- mazePREVIEW.png (268.18 KiB) Viewed 1150 times
Re: ANT maze
Posted: Tue Feb 13, 2024 2:00 pm
by richmond62
By changing the order of where the INTERSECT scripts go in the CARD SCRIPT it is possible to STOP the ANT from sitting on the 'fence';
-
- Screenshot 2024-02-13 at 15.58.17.png (87.03 KiB) Viewed 1133 times
-
Re: ANT maze
Posted: Tue Feb 13, 2024 2:13 pm
by richmond62
The graphic "RR" has been replaced with an imported PNG image called "maze", so the CARD SCRIPT has to be adjusted to take that into account:
-
- Screenshot 2024-02-13 at 16.10.40.png (246.97 KiB) Viewed 1130 times
-
You can see how the script has been adjusted for the 'Up' ARROW Key:
-
- Screenshot 2024-02-13 at 16.11.02.png (452.85 KiB) Viewed 1129 times
-
You can write the scripts for the other 3 ARROW Keys.
You should also notice that I have set the "bounce" to 20 so that what happens is the ANT is returned to its starting position.
Re: ANT maze
Posted: Tue Feb 13, 2024 2:21 pm
by richmond62
Here is the stack with the completed CARD SCRIPT.
Re: ANT maze
Posted: Tue Feb 13, 2024 2:30 pm
by richmond62
Now we can introduce a target image and a signalling image that we have completed the Ant maze:
-
- Screenshot 2024-02-13 at 16.31.55.png (748.39 KiB) Viewed 1122 times
-
When the ANT hits the Target the signalling image is shown.
Use INTERSECT in the CARD SCRIPT to let the computer know when the ANT hits the green target.