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 4245 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 4244 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 4244 times

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

m3.png (357.76 KiB) Viewed 4244 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 4241 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 4240 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 4240 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 4241 times

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

m9.png (99.1 KiB) Viewed 4240 times

-
Then colour them:
-

m10.png (269.84 KiB) Viewed 4238 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 4237 times

-
And build up your maze.
-

m12.png (146.09 KiB) Viewed 4235 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 4234 times

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

m14.png (451.23 KiB) Viewed 4234 times

-
Name that group "walls".
-

m15.png (262.14 KiB) Viewed 4234 times

-
Remember to save your work.

[richmond62]

Now IMPORT this image into your stack:
-

man.png (1.14 KiB) Viewed 4234 times

-
Use the drop-down menu:
-

m16.png (518.46 KiB) Viewed 4234 times

-
Rename the imported image to 'man':
-

m17.png (88.35 KiB) Viewed 4233 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 4231 times

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

m19.png (156.47 KiB) Viewed 4230 times

-
Give it a vertical scrollbar:
-

m20.png (121 KiB) Viewed 4229 times

[richmond62]

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

m21.png (109.31 KiB) Viewed 4228 times

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

m22.png (133.28 KiB) Viewed 4227 times

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

m23.png (146.95 KiB) Viewed 4227 times

-
Remember to save your work.

[richmond62]

Now your user can start entering their code:
-

m24.png (414.99 KiB) Viewed 4225 times

-

m25.png (21.73 KiB) Viewed 4224 times

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

m26.png (102.26 KiB) Viewed 4223 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 4222 times

-
Select a button from the tools palette

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

m28.png (115.66 KiB) Viewed 4221 times

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

m29.png (129.31 KiB) Viewed 4221 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 4219 times

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

m31.png (129.75 KiB) Viewed 4218 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 4214 times

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

m33.png (131.69 KiB) Viewed 4212 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 4210 times

-
Remember to save your work.

[richmond62]

Open the scriptEditor of your ACTION button:
-

m35.png (77.78 KiB) Viewed 4208 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 4207 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 4206 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 4203 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 4200 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 4107 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 4106 times

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