ANT maze

[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 1206 times

-
To follow along please download the attached stack and open it in OpenXTalk.

ANT_1.oxtstack.zip

(40.32 KiB) Downloaded 72 times

[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 1204 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 1202 times

[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 1201 times

-
And DRAG it onto your stack:
-

makeBUTTON.png (304.33 KiB) Viewed 1200 times

-
RIGHT-CLICK on your new button and change its name to "HOME":
-

nameBUTTON.png (425.38 KiB) Viewed 1198 times

-
SAVE the stack!

[richmond62]

Make another button in exactly the same way and change its name to "AWAY":
-

awayBUTTON.png (427.09 KiB) Viewed 1197 times

-
SAVE your stack.

[richmond62]

Now: RIGHT-CLICK on the button "AWAY" to open the SCRIPT EDITOR:
-

scriptAWAY.png (176.78 KiB) Viewed 1191 times

-
Now the SCRIPT EDITOR for your button will open:
-

Screenshot 2024-02-13 at 12.23.20.png (139.07 KiB) Viewed 1191 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 1189 times

-

[richmond62]

Click on the APPLY button:
-

applySCRIPT.png (72.56 KiB) Viewed 1187 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 1185 times

[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 1182 times

[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 1179 times

-
And points for LOCATION ACROSS the page start on the left.

[richmond62]

NOW we want to be able to move the image "ANT" with the ARROW keys on our keyboard:
-

[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 1177 times

-
The ARROW keys have easy names:
-

arrowKEYS.png (47.26 KiB) Viewed 1176 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 1174 times

[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 1167 times

-
Then we have to find out which of the ARROW keys has been pushed:
-

arrowZ.png (220.26 KiB) Viewed 1166 times

-
You will see, that at the moment, the SCRIPT for each ARROW key is empty.

[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 1166 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.

[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 1161 times

-
RIGHT CLICK on the graphic "RR" and select the Property Inspector:
-

graphicADJUST_2.png (244.83 KiB) Viewed 1159 times

-
And make sure that 'Opaque' is unselected.

NOW we can edit out CARD SCRIPT so the ANT does NOT go outside the 'fence'.

[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 1153 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'.

[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 1155 times

[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 1152 times

[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 1135 times

-

[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 1132 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 1131 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.

[richmond62]

Here is the stack with the completed CARD SCRIPT.

[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 1124 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.