This is how you can quickly make a maze game. I have included all the handouts as attachments at the bottom of this page and referenced in the text where needed. The goal here is to learn LiveCode by doing. As you can see, the commands are easily understood once you understand the basics of objects, events and messages/message handlers. If you have not read the Basics, you should do that now.
Examples of Mazes:
Minefield - Move the submarine through the minefield collecting the RED mines but avoiding the gray ones
Bombs - Go to the finish, this has multiple levels and surprises
Sample_Mazes and Games - for some example images of mazes that other students have come up with
There are 3 Parts to this page:
B. Extras - Making your maze more exciting
A. Creating the Maze
Making a maze is easy if you do it the right way. You can draw each line separately and have an "intersect" command check each one for a collision. But it is easier to create one "image area" and put the lines in there. Then you only have to check for a collision once for the entire image.
There are 2 ways of doing this:
1. Drawing your maze - Use either 1a or 1b
Note: You should start out by making a simple maze with only 4 or 5 walls and get it working. Then try each of the segments of code below to see how they work and get practice with LiveCode. After you feel comfortable with coding and see what all you can do, then plan, design and build your own fantastic maze. Have fun!
1a. Maze #1 - Creating the Maze using Groups (this is the better way)
This method uses the graphic tools (Vectors) to draw the lines. Then you Group them together and give it a name. This makes it easier because you only need 1 intersect statement to check.
To make a maze, draw your lines using the Graphics tools
Use a bigger line thickness
and start drawing lines to make your maze
After you have drawn all the lines for your maze, you need to select them all and "Group" them. With your cursor in the upper left of the maze, hold down the left-mouse button and drag it to the bottom right of your maze. You should see all the lines being selected as you do it.
Then click on the "Group" icon on the LiveCode Edit bar. It will change to "Ungroup" and open the inspector so you can give the group a better name
Make sure that you give it a name (like "maze")
1b. Maze #2 - Creating the Maze using Image Areas
This uses Image Areas and the Bitmaps (Image Tools).
To make a maze, you need to create an 'image area' for your lines (walls). Double-click on the "image Area" tool on the tool palette, then stretch the image area on your card to fill the card. Then draw your maze using the bitmap tools from the bottom of the 'Tools Palette'.
Use these tools to draw your lines:
Choose a thicker line thickness:
Draw your lines making sure that the image area is selected. You can check it:
2. Adding Code to your Maze
Now we will add the code to the
Card Script to move your player (graphic "box") that we did in the previous lesson. If you do not have the code get it from here:
Moving The Box
Detecting Collisions with the Walls
Add the intersect code to detect collisions of the player with the wall (the "intersect" command) and decide what to do. (On the 'Card Script', you should have the following code:
LC_MovingCodeWithIntersect. You may want to change the intersect code to do something different - see below)
What do you do when the "Player" collides (or intersects) with the wall?
- You can send it back to the beginning of the maze to start over:
if intersect( <object1> <"name1"> , <object2> <"name2"> , "opaque pixels") then
set the loc of <object1> <"name1"> to 50, 50
end if
(where you substitute the type and name of the objects that are involved)
for example:
If you Grouped your lines (1a above):
if intersect( button "myBox" , group "maze" , "opaque pixels") then
set the loc of button "myBox" to 50,50
or if you made your maze with the Image Area (1b above)
if intersect( button "myBox" , image "maze" , "opaque pixels") then
set the loc of button "myBox" to 50,50
note: I just put 50,50 as an example.
To find the real start of your maze:
click on the "Browse" tool and move your player (object1) to the start of your maze.
open up its PI (Property Inspector), click on "Size and Position', and see what its location is
use those numbers in the commands above
---------------------------------------
You can have the background change colors when you hit the wall
if intersect( button "myBox" , image "maze" , 255 ) then
set the backcolor of the card "mycard" to blue <--- the maze turns blue when you hit the wall
else
set the backcolor of the card "mycard" to white <--- the maze turns white when you move away
end if
-------------------------------------------
- You can just move it back away from the wall - Solution #1. This is a little
harder because when it hits a wall, we have to move it back to its last (previous) position. So we have to remember (save) the last position before we move. We use a local variable to save the last location. After we move, we check if it hit (intersect) the maze wall and if true, we move it back to its last position. (add the code in red to your 'player moving' code that should already be there)
add this code (the code in red) after you check for the arrowkey that was pressed:
on mouseUp
local lastLocation
put the loc of button "box" into lastLocation
if x is "up" then
set the top of the button "box" to the top of the button "box" - 10 <--- you subtracted 10 to go up
if the top of the button "box" < the top of the card "mycard" then
set the top of the button "box" to the top of the card "mycard"
end if
end if
if x is "down" then
...
end if
if intersect ( button "box" , image "maze" , "opaque pixels" ) then
set the loc of button "box" to lastPosition
end if
- You can just move it back away from the wall - Solution #2. This is a little harder because when it hits a wall, we have to move it backwards in the opposite direction that it was going. So everywhere that we move it, we have to check if it hit the wall and move it backwards. (add the code in red to your 'player moving' code that should already be there):
if x is "up" then
set the top of the button "box" to the top of the button "box" - 10 <--- you subtracted 10 to go up
if the top of the button "box" < the top of the card "mycard" then
set the top of the button "box" to the top of the card "mycard"
end if
if intersect( button "myBox" , image "maze" , "opaque pixels") then
set the top of the button "box" to the top of the button "box" + 10 <--- add back the 10
end if
end if
if x is "down" then
set the top of the button "box" to the top of the button "box" + 10 <--- you added 10 to go down
if the bottom of the button "box" > the bottom of the card "mycard" then
set the bottom of the button "box" to the bottom of the card "mycard"
end if
if intersect( button "myBox" , image "maze" , "opaque pixels") then
set the top of the button "box" to the top of the button "box" - 10 <---subtract the 10 you added
end if
end if
(Now do the same for left and right)
- You can just move it back away from the wall - Solution #3. Here is another way to do it:
create a handler called “moveBack” on the card
on moveBack
if x is "up" then
set the top of the button "box" to the top of the button "box" + 10
end if
if x is "down" then
set the top of the button "box" to the top of the button "box" - 10
end if
if x is "right" then
set the right of the button "box" to the right of the button "box" + 10
end if
if x is "right" then
set the right of the button "box" to the right of the button "box" - 10
end if
end moveBack
and in all the intersect commands, add the line:
moveBack
B. Adding Extras
1. Adding a Finish Line and Message "You Made IT !!"
Add a button called "Finish Line", put it at the end of your maze and put the following code on your card
in the arrowkey handler (before the "end arrowkey")
if intersect ( button "box" , button "Finish Line" ) then
answer "You Made IT "
end if
You can make it invisible if you want - (uncheck "visible" in the property Inspector of the button).
2. Adding a Timer - Counting up the seconds- You can add a timer on the card to count up the number of seconds it takes the player to get thru the maze:
Add a text field on the card called "Timer"
Add a button called "Start" and put the following code on this button
on mouseUp
put 0 into field "Timer"
updateTimer
end mouseUp
Add the following code on your card after your "arrowkey" code (after the "end arrowkey" line):
on updateTimer
add 1 to field "Timer"
send "updateTimer" to me in 1 sec
end updateTimer
Note: The timer will keep going. Code needs added to stop it from updating itself every sec/
3. Adding a CountDown Timer - Counting down from a set time Add a text field on the card called "Timer"
Add a button called "Start" and put the following code on it
Add the following code on your card after your "arrowkey" code (after the "end arrowkey" line
on updateTimer subtract 1 from field "Timer"
if field "Timer" >= 0 then
send "updateTimer" to me in 1 sec
else
answer "Game Over" 4. Adding Objects to Collect or Avoid - - You can add objects (diamonds, stars, etc) to pick up for bonus points or objects (bombs, enemies, etc) to avoid. When your player hits one, make the object disappear and either add points to the score or make your player disappear:
if intersect( button "myBox" , image "maze" , "opaque pixels") then
set the visible of graphic "diamond" to true
end if
5. Adding a Finish Line - - You can add a Finish Line (an object) at the end of the maze that is not visible. When your player makes it to the end and touches that invisible object, you can pop up a dialog box that says the "You won" or automatically go to another card (the next level).
if intersect( button "myBox" , button "end" , "opaque pixels") then
Answer "You Won"
end if
or
if intersect( button "myBox" , image "maze" , "opaque pixels") then
go to card "card2"
end if
6. Adding a Background Image -
You can add a background image. If your maze is too plain, you can add a background to it - either a pattern or even a photo. Adding a Background Image
7. Other Ideas - - You can do many more things to make your maze interesting, fun, challenging or more difficult. There is no limit to your imagination Have objects pop-up at random places in the maze, that the player has to avoid. Have objects walking around the maze or chasing the player. Be creative. Get ideas as you look at other pages on this website
%EF%B9%96height=300&width=400.png)
