Babies love mazes.

[richmond62]

This week I had some seven year olds working out instructions to navigate a person through a maze:
-

Model.jpg (440.6 KiB) Viewed 7603 times

-
Here a small girl who was as keen as mustard is doing great stuff.

[richmond62]

Now, what would be really great fun would be to do this sort of thing in OXT Lite.

So, let's get started:
-

m1.jpg (115.83 KiB) Viewed 7602 times

-
We can make a new stack that is 1000 pixels wide and 700 pixels high, and call it "Maze", and remember to save it.

[richmond62]

Now, as you can see from the photograph we need to make a 12 by 12 grid of square, so we should select a square vector from the tools palette:
-

m2.png (189.09 KiB) Viewed 7602 times

-
and place it on your stack, and set its size to 50 by 50 pixels:
-

m3.png (357.76 KiB) Viewed 7602 times

-
set its name to "xx"

This will be your TEMPLATE to make your grid.

Next to it place a button.

[richmond62]

Put some code into you button to make your grid:

Code: Select all

on mouseUp
   put 1 into CYCLE1
   repeat until CYCLE1 > 12
      put 1 into CYCLE2
      repeat until CYCLE2 > 12
         clone graphic "xx"
         set the name of the last graphic to ("SQUARE" & CYCLE1 & "," & CYCLE2)
         set the location of the last graphic to (50 + (CYCLE1 *50)), (50 + (CYCLE2 * 50))
         add 1 to CYCLE2
      end repeat
      add 1 to CYCLE1
   end repeat
end mouseUp

Study this code to see how it goes through 2 cycles to generate 144 squares, name the sequentially, and position them on the stack.

Then click on the button to run the code:
-

m5.png (475.49 KiB) Viewed 7599 times

-
Remember to save your work.

[richmond62]

Now you need to make some blocks (you can see those in the photograph).

Select the round rectangle graphic in the tools palette:
-

m6.png (165.2 KiB) Viewed 7598 times

-
And set it on your stack, set its size to 44 by 44 pixels, and call it "zz".
-

m7.png (67.1 KiB) Viewed 7598 times

[richmond62]

If you look at the photograph you will see yellow, red, green and blue blocks, so let's make some a bit like that.

We can duplicate our round rectangle using the drop-down menu:
-

m8.png (538.03 KiB) Viewed 7599 times

-
Do that 3 time so you have 4 round rectangles:
-

m9.png (99.1 KiB) Viewed 7598 times

-
Then colour them:
-

m10.png (269.84 KiB) Viewed 7596 times

-
Remember to save your work.

[richmond62]

Now you can make as many blocks of any of those 4 colours as you need, and arrange them over the grid:
-

m11.png (159.92 KiB) Viewed 7595 times

-
And build up your maze.
-

m12.png (146.09 KiB) Viewed 7593 times

[richmond62]

Now select ALL the 'blocks'.

Do this by pressing on the SHIFT bottun on your keyboard as you select each block with your mouse.

(Be very careful NOT to select any squares from the underlying grid.)
-

m13.png (211.09 KiB) Viewed 7592 times

-
Make all those blocks into a group using the drop-down menu:
-

m14.png (451.23 KiB) Viewed 7592 times

-
Name that group "walls".
-

m15.png (262.14 KiB) Viewed 7592 times

-
Remember to save your work.

[richmond62]

Now IMPORT this image into your stack:
-

man.png (1.14 KiB) Viewed 7592 times

-
Use the drop-down menu:
-

m16.png (518.46 KiB) Viewed 7592 times

-
Rename the imported image to 'man':
-

m17.png (88.35 KiB) Viewed 7591 times

-
Remember to save your work.

[richmond62]

Now it is time to start computer programming.

Select a field from the tools palette:
-

m18.png (139.77 KiB) Viewed 7589 times

-
And set it on your stack, and name it "f1":
-

m19.png (156.47 KiB) Viewed 7588 times

-
Give it a vertical scrollbar:
-

m20.png (121 KiB) Viewed 7587 times

[richmond62]

Move your 'man' to the START of your maze:
-

m21.png (109.31 KiB) Viewed 7586 times

-
Unselect '3D' for your field (this makes the field a lot easier to see):
-

m22.png (133.28 KiB) Viewed 7585 times

-
Make your field very nearly the same height as your stack:
-

m23.png (146.95 KiB) Viewed 7585 times

-
Remember to save your work.

[richmond62]

Now your user can start entering their code:
-

m24.png (414.99 KiB) Viewed 7583 times

-

m25.png (21.73 KiB) Viewed 7582 times

-
But as you can see it will be hard to see onscreen, so:
-

m26.png (102.26 KiB) Viewed 7581 times

-
set the fontSize of field "f1" to size 18 and BOLD.

[richmond62]

HOWEVER, we need to tell the computer how to interpret what is written in field "f1", so:
-

m27.png (177.3 KiB) Viewed 7580 times

-
Select a button from the tools palette

Set it on the stack and name it 'ACTION':
-

m28.png (115.66 KiB) Viewed 7579 times

-
Make its fontSize a bit bigger and BOLD so it is easier to see:
-

m29.png (129.31 KiB) Viewed 7579 times

-
In this button we are going to write the code to interpret what is written in field "f1".

[richmond62]

If you look closely at what the child has been writing on the table you will see that there are ONLY 3 possible COMMANDS:

FORWARD followed by a number

TURN RIGHT

TURN LEFT

In OpenXTalk positions on a stack are numbered from the Top-Left hand corner like this:
-

m30.png (91.5 KiB) Viewed 7577 times

-
So, as our 'man' progresses UP the screen the number showing his vertical position will get smaller.
-

m31.png (129.75 KiB) Viewed 7576 times

[richmond62]

Here is the stack at this stage in the lesson.

[richmond62]

Before we start reading our input code to move the image "man" around we really need a 'reset' button in case things go wrong.

If we examine the image "man" we will find its start position is 150, 650:
-

m32.png (115.72 KiB) Viewed 7572 times

-
So, let's add a Reset button:
-

m33.png (131.69 KiB) Viewed 7570 times

-
And write some code inside the button to send the image "man" back to the START of the maze:

Code: Select all

on mouseUp
   set the location of image "man" to 150, 650
end mouseUp

-

m34.png (53.55 KiB) Viewed 7568 times

-
Remember to save your work.

[richmond62]

Open the scriptEditor of your ACTION button:
-

m35.png (77.78 KiB) Viewed 7566 times

-
The first thing the computer needs to know is the location of the image "man", and which we just found out is 150, 650:
-

m36.png (132.44 KiB) Viewed 7565 times

-
Now we need to set up a repeat loop that reads each line of our field "f1" and acts on any instructions it finds there:
-

m37.png (176.98 KiB) Viewed 7564 times

-
You will see that each time the repeat loop repeats FieldLine's value increases by 1.

[richmond62]

Now inside the repeat loop we have to find out if the line that is being examined contains either a

FORWARD

or a

TURN command.

And if it is a FORWARD command the number of forward movements required,

And if it is TURN command if it is a RIGHT or a LEFT TURN .

------------------------------
The first thing we do is set the itemDelimiter to SPACE:
-

m38.png (237.89 KiB) Viewed 7561 times

-
Then we have to find out what the first part of the relevant line consists of: FORWARD or TURN:
-

m39.png (178.18 KiB) Viewed 7558 times

-

Code: Select all

on mouseUp
   put 150 into LR -- I am using 'LR' to mean the Left-Right location of the 'man'
   
   put 650 into UD -- I am using 'UD' to mean the Up-Down location of the man
   
   put 1 into FieldLine
   repeat until line FieldLine of field "f1" is empty
      set the itemDelimiter to " " --this is so we can separate 'Forward' from a number, and 'Turn' from 'Right' or 'Left'
      put item 1 of line FieldLine of field "f1" into KOMMAND1
      if KOMMAND1 contains "FORWARD" then
         
      else --what follows assumes as KOMMAND1 does NOT contain "FORWARD" it contains "TURN"
         
      end if
      add 1 to FieldLine
   end repeat
end mouseUp

[richmond62]

Now we can input the code for 'TURN':

Code: Select all

 else --what follows assumes as KOMMAND1 does NOT contain "FORWARD" it contains "TURN"
         put item 2 of line FieldLine of field "f1" into KOMMAND2
         if KOMMAND2 contains "RIGHT" then
            switch DIREXION
               case "U"
                  put "R" into DIREXION
                  break
               case "R"
                  put "D" into DIREXION
                  break
               case "D"
                  put "L" into DIREXION
                  break
               case "L"
                  put "U" into DIREXION
                  break
            end switch
         else --what follows assumes as KOMMAND2 does NOT contain "RIGHT" it contains "LEFT"
            switch DIREXION
               case "U"
                  put "L" into DIREXION
                  break
               case "L"
                  put "D" into DIREXION
                  break
               case "D"
                  put "R" into DIREXION
                  break
               case "R" 
                  put "U" into DIREXION
            end switch
         end if

Obviously we can use 'DIREXION' to tell us HOW to move the 'man' image.

Here you can see the code in context (you will also see that the code for FORWARD is not yet in place):
-

m40.png (231.87 KiB) Viewed 7465 times

[richmond62]

Now we can input the code for MOVEMENT:

Code: Select all

 if KOMMAND1 contains "FORWARD" then
         put item 2 of line FieldLine of field "f1" into JUMPS
         put item 2 of line FieldLine of field "f1"
         put 1 into HOPS
         repeat until HOPS > JUMPS
         ------
         --This is where we check in which direction our man is meant to be moving and act appropriately
         switch DIREXION
         case "U"
         subtract 50 from UD
         break
         case "R"
         add 50 to LR
         break
         case "D"
         add 50 to UD
         break
         case "L"
         subtract 50 from LR
         break
         end switch
         move image "man" to LR, UD
         ------
         add 1 to HOPS
         end repeat
         --------

Here you can see it in conext:
-

m41.png (233.22 KiB) Viewed 7464 times

-
Please also note that the START position of the man has been altered to start outwith the maze.