ws-201501–Olympics Race

Media Files

📦 Media File Download (8.52 MB)

Project Submission

+ Submit Assignment

Deadline: over 3 years ago.

Your submissions


Cover photo

*WorldSkills 2015 Test Project, Submitted by Marcelo Strehl - BR.

You may read the PDF version of the Test Project: WSC2015_TP17_ClientSideB_actual.pdf

Marking Scheme Excel File (It includes all test projects, please find only related aspects.)

In August 2016, the city of Rio de Janeiro in Brazil will host the Summer Olympic and Paralympic Games. This will be the first time ever Brazil will host the games, and it is a great honor to all the Brazilian people to be able to welcome the world once again, following the legacy of the FIFA World Cup back in 2014.
To celebrate this great event, you have decided to create an open source game that allows a player to control an Olympic Flame carrier in a cross-country journey towards the lighting up the Olympic Cauldron in Rio.

In this game, the runner follows a predefined path while dodging obstacles and passing by famous landmarks in Brazil.
A designer has prepared the user interface of the game, and now your job is to develop the front-end gameplay, including animation, game controls, and user interaction.


Your task is to add animations, controls, and interactivity to the game – making sure that an exciting user experience is available to the user when they play the game. You have the freedom to implement animations and affects you find appropriate to the design, but your solution must meet the following requirements:

  1. A welcome screen is presented when the game is opened, with a modal overlay containing a brief set of instructions and the “Start” button.
  2. Once the user clicks the button to start the game, the runner character must start running towards the right side of the screen, on the way to the Olympic Cauldron. The runner character must be animated to represent the running action (i.e. body movement). Some images of the movement are available in media/runner directory for your reference.
  3. The running court has three lanes and the runner can use the three lanes during the run up to the Olympic Cauldron:
    • a) Consider lanes 1, 2 and 3 where lane 1 is the upper most lane, 2 is the middle lane and 3 is the bottom lane.
    • b) The user can use the keyboard directional arrows to make the runner switch lanes. Up key moves the runner to the lane above. Down key moves the runner to the lane below.
    • c) The runner must not run outside any of the three lanes
    • d) For distance and perspective purposes, when the runner is on lane 3, the size of the runner character must be bigger than when he is running on lanes 1 and 2. When the runner is running on lane 1, the runner character must be smaller than when he is running on lanes 2 and 3.
  4. When an obstacle is on the way, the runner can jump when the user presses the “Space bar” to dodge the obstacles. The movement of the jump must be animated in a different way of the running movement to improve the usability of the game (opening the legs). A jump can be made only with the runner on the ground (i.e. a runner can’t jump while in the air).
  5. In every game, there must be at least 5 obstacles on the way, placed randomly along the running court. There must be at least one obstacle on each court lane.
  6. The runner can dodge an obstacle by either jumping over it or simply switching lanes. The game will end if the runner hits an obstacle, followed by a message saying “Game Over!” and a “Restart” button to start a new game.
  7. The run from the beginning of the court to the Olympic Cauldron must be from 9 to 12.00 seconds long.
  8. During the run, the runner will pass by famous landmarks of Brazil. Whenever the runner passes by one plate, an animation needs to be created to show the landmark image and the name of the landmark on the signs alongside the court. The names of the landmarks, in the order that they appear:
    • a) Amazon Rainforest – Manaus – AM
    • b) Lacerda Elevator – Salvador – BA
    • c) Iguaçu Falls – Foz do Iguaçu – PR
    • d) Cable-Stayed Bridge – São Paulo – SP
    • e) Christ the Redeemer – Rio de Janeiro – RJ
  9. The images of the landmarks and their respective names is showed in the media files provided to you identify the locations. When the application start this images and names must be hidden and just appear with an animation when the runner cross the respective plate. Use different kind of animation to present each landmark.
  10. The Olympic Cauldron image, their sign and the name Olympic Games – Rio 2016 still visible during all the game.
  11. The runner must climb the hill to get to the Olympic Cauldron following the lanes court. The runner must stop when reaching the top, nearby the cauldron (in the white place beside the cauldron), and fire must light up the cauldron, followed by a message “Welcome to Rio 2016 – Olympic Games” presented on the screen along with the “Restart” button, which starts a new game.
  12. Your application need to run without JavaScript errors showed in console of the browser.

Submission guideline

You must include all media and content provided to you. The page for you to build upon is available under the “media” directory. You can modify the files provided to guarantee the correct functionality of the application. You can use JQuery and JQuery UI if you find necessary.
Save the files of your application in directory on the server called "XXClientSideB", where XX is your country code.