Creating the frogger game in less of 10 minutes

I'll show how to create a Frogger game in livecode in less of 10 minutes.
Frogger is a very old game, where a frog try tro cross a highway trying to avoid cars.
This guid will create a very simple version, but it will cover many topics of game programming... and in less of 10 minutes!
Are you ready? GO!
Create a new Mainstack, this is the window of our game.
Put inside the window these elements:

• Start button
  
• a green circle, named frog
• a pink rectangle named car1. 
• a big dark green rectangle namer arrival.
• put the arrival label on the dark rectangle

 This should be the result:

Now in the card put his code, it's the code to move the frog with arrow keyboard:

on arrowkey puls
   if the giostat of me is "attivo" then
      switch puls
         case "up"
            move graphic "frog" relative 0,-30         
            break         
         case "down"
            move graphic "frog" relative 0,30         
            break
         case "left"
            move graphic "frog" relative -30,0
            break               
         case "right"
            move graphic "frog" relative 30,0
            break         
      end switch
      if intersect(graphic "frog",graphic "arrival") then
         set the giostat of this card to "stopped"
         answer "You win!"
      end if      
   end if
end arrowkey



This is half of the work, now we have to work with cars.
If the window lwidht is 400 pixels, then this is the code to put inside the car, it will set the starting poit, move from left to right and gagain put it on the left of the screen (on and on until the game end):

on iniziagioco
   set the percorso of me to true
   controint
   gioco
end iniziagioco

on moveStopped
   put the percorso of me into temp
   set the percorso of me to not temp
   if the giostat of this card is "attivo" then
      send gioco to me in 0.1 millisec
   end if   
end moveStopped

on gioco   
   put the percorso of me into temp
   if temp then
      move me relative 400,0 in 3 sec without waiting
      else
         move me relative -400,0 in 1 millisec without waiting
      end if
end gioco

on controint
   if intersect(graphic "frog", me) then
      set the giostat of this card to "stopped"
      stop moving me         
      answer "Aaaaah! The frog died!"
   end if   
   if the giostat of this card is "attivo" then
      send controint to me in 0.1 sec
   end if      
end controint




Let's explain the code.
Iniziagioco is the message to start the game, once activate the car will move from left to righ for 400 pixels. Reached the end of the screen will teleport a the left and start again. This loop will continue until the custom property giostat will become "stopped". Custom property are very handy because are easy to inspect and the can be seen everywhere in program.
Controint is a loop message, cycled every 0.1 seconds, to chech if the car is under a car.
The messages gioco and movestopped are to move the car. We want to put 6 cars, so we use the move without waiting form, this way all cars move independently. MoveStopped is automatically launched by livecode when a grapic stop to move.
Now copy and paste the car 5 times, this way we have 6 cars on the screen. Change the name to car2, car3, car4, car5 and car6. Change the size of the cars as you like. Now in the code of the last 3 cars change the 400 in -400 and viceversa, so these cars will move from right to left.
The final result will be like this:

And now this iis the code of the start button:

on mouseUp
   set the loc of graphic "frog" to 200,300
   set the giostat of this card to "attivo"
   repeat with i=1 to 3
      set the left of graphic ("car" & i) to the left of this card
   end repeat
   repeat with i=4 to 6
      set the right of graphic ("car" & i) to the right of this card
   end repeat
   repeat with i=1 to 6
      send "iniziagioco" to graphic ("car" & i)
   end repeat
end mouseUp



FINISHED! Less of 10 minutes!
As you can see the start button to the work to correct position the carsm of the frog and it send starting signal at the cars.
This is a very simple example, but you can improve it these ways:

• substitute livecode graphic with images or animations
• changing speeds or random speed of cars, valuing cars dimensions
• random cars
• move works on any curve, you can create random or complex highways
• you can add timer and scores

Free to post comments