Create Custom Locations in the HTML 5 Worldrace Game

Here’s a quick tip on using the HTML 5 Worldrace game.
(Note: This is the same game logic and steps to edit the path on the Gridlock and Marathon games also.)

Let’s say that you want the game piece to follow a custom path around the world map. Maybe you want it to start in Utah USA, and then go through Rome IT, Sydney AU, Rio BR, Mexico City MX, and finish back in Utah. (Just in case you’re wondering, eLearning Brothers is based in Utah.) View our customized Worldrace Game.


Game Path Logic
Important: First you need to understand that there are 2 different “path logics” that the game can use to create the game path.

Path Type 1: Percent
Basically you set various “path points” around the map. The game will calculate the total distance around the map if it were to follow the points. It will then take that entire path length and divide it by the number of questions that you have. The game piece will then travel an equal distance each time it moves. The game defaults to this path type. So if you have 20 questions the game piece will move a smaller distance each time than if you only had 10 questions. This method makes it easy to change the number of questions but it’s difficult to ensure that a game piece will stop on a specific location.

Path Type 2: Point to Point
This path type allows you to specify exactly where the game piece will stop each time. Put in the x,y coordinates where you want the game piece to stop for each question. The first set of points will be where you start and the last set will be your finishing point and determine where the finish flag is located. You will always have one more set of path points than you have number of questions.

 

Steps to create a custom path:
In our example we want to start in Utah USA and then travel through Italy, Australia, Brazil, Mexico and then finish back in Utah USA. So we’ll need 6 sets of path points. (1st set is where the game piece starts. The last set is where the game pieces moves to after the last questions is answered. It also determines where the finish flag is placed. So for this example we’ll have 5 questions that travel our 6 sets of path points.)

  1. Determine the number of locations you want to stop at. (You should have 1 more set of points than you have # of questions in the game.)
  2. Set the # of questions in your game. (Questions tab / question_count=???) Must have 1 less number of questions than sets of path points.
  3. Determine the x,y coordinates for each of your locations. Download our grid image and place it over a screenshot of the game map or your custom image. (View the image below.)
  4. Type point_to_point as your path_type. (Design tab / path_type=point_to_point)
  5. Set the x,y coordinates in the game. (Design tab / Path Section / path_points=???) Just put in one set of coordinates for each location. IMPORTANT: The last set of points will be where the game piece moves to after the last question is answered. In our example we are using 5 questions with these path points: [80,200], [390,190], [690,400], [250,380], [110,250], [80,200]
  6. You can now save your Design and Questions files and reload the game to test it.

html5_worldrace_grid

 

 

 

 

 

 

This image shows how the grid looks when placed over the world map. Use the grid to help determine the x,y coordinates of your custom locations.

Additional Tips:

  • You can upload your own image into the game background. Put your image (720W x 540H) into the config / images folder. Then put the name of your file here: Design tab / game_background_image=YOUR FILE NAME.
  • Change path_color=#FFFF00 to any color that you’d like to customize the path color.

2 Comments

  1. The grid download link doesn’t work? Any chance that you could send me the document?

    Thanks,
    Elgan

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>