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
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.
ANT_1.oxtstack.zip
(40.32 KiB) Downloaded 72 times

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
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
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
chooseBUTTON.png (38.23 KiB) Viewed 1199 times
-
And DRAG it onto your stack:
-
makeBUTTON.png
makeBUTTON.png (304.33 KiB) Viewed 1198 times
-
RIGHT-CLICK on your new button and change its name to "HOME":
-
nameBUTTON.png
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
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
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
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
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
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
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
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
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
Screenshot 2024-02-13 at 10.53.34.png (33.42 KiB) Viewed 1175 times
-
The ARROW keys have easy names:
-
arrowKEYS.png
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
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
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
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
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. 8-)

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
graphicADJUST_1.png (205 KiB) Viewed 1159 times
-
RIGHT CLICK on the graphic "RR" and select the Property Inspector:
-
graphicADJUST_2.png
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
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
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
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
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
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
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
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.