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 430 times

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

ANT_1.oxtstack.zip

(40.32 KiB) Downloaded 24 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 428 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 426 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 425 times

-
And DRAG it onto your stack:
-

makeBUTTON.png (304.33 KiB) Viewed 424 times

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

nameBUTTON.png (425.38 KiB) Viewed 422 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 421 times

-
SAVE your stack.

[richmond62]

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

scriptAWAY.png (176.78 KiB) Viewed 415 times

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

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

-

[richmond62]

Click on the APPLY button:
-

applySCRIPT.png (72.56 KiB) Viewed 411 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 409 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 406 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 403 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 401 times

-
The ARROW keys have easy names:
-

arrowKEYS.png (47.26 KiB) Viewed 400 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 398 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 391 times

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

arrowZ.png (220.26 KiB) Viewed 390 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 390 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 385 times

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

graphicADJUST_2.png (244.83 KiB) Viewed 383 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 377 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 379 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 376 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 359 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 356 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 355 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 348 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.