Module Client
Module Client
Contents
1. MODULE_CLIENT.docx
2. MODULE_CLIENT_MEDIA.zip
Introduction
People love to play challenging games which require the player's effort to think. Games will be
more challenging if there are numbers involved. Nevertheless, a multiplayer game can be more
fun if people play it together.
With the support of current sophisticated technology, we can make a game that can be played
in a web browser so people can play it across devices. You need to make this game run
correctly in the latest version of Google Chrome or Mozilla Firefox.
This is a 5 hours module in which you will need to create the initial layout of the game and the
game functionality using Javascript. You are required to make the game work perfectly in
modern browsers without any error.
1. Game title
2. 10x8 hexagon blocks
3. Both players names
4. Both players scores
5. Current hexagon
6. New game button
7. Leaderboard
8. Sort Functionality
Game functionalities
1. Show the game icon as a favicon.
2. Welcome screen should show when the page is loaded.
3. Game instruction should appear besides the welcome screen.
4. The game instruction should appear in an animated way.
5. Player 1 can choose to compete with Player 2 or Bot.
6. Player 1 can start the game by clicking the start button.
7. If the user chooses to compete with Player 2, Player 1 must input the Player 1’s
name and Player 2’s name.
8. If the user chooses to compete with Bot, Player 1 doesn’t need to input bot’s name.
9. Players 1 can choose a level in the welcome screen (easy, medium, hard).
10. The “Play Game” button should be disabled if the user hasn't filled in their name and
hasn’t chosen a level.
11. The game board consists of a 10x8 hexagon block.
12. Disabled hexagon will appear in the random hexagon with grayish-color:
a. 4 disabled hexagon for easy level
b. 6 disabled hexagon for medium level
c. 8 disabled hexagon for hard level
13. Player 1's color is red and the other is blue.
14. Red takes the first turn. Blue takes turns with red. Player 1 or 2 by clicking an empty
hexagon and bot by automatically filling an empty hexagon.
15. Each turn, a hexagon with a random number (1-20) can be used by either player to
be placed in one of the empty hexagons.
16. The current turn hexagon should be displayed on the screen to tell the player what
color and number of the hexagon that they will put.
17. When the player hover one of the empty hexagons, there will be a placeholder of the
current hexagon depending on the current hexagon color and number.
18. When an empty hexagon is chosen by players, it will be filled with the current turn
hexagon.
19. Player can take over the opponent's hexagons if the player placed their hexagon in
an adjacent opponent’s hexagon with a higher value hexagon than the opponent's
hexagon.
20. Taken over hexagon color will change based on which player’s turn.
21. When a player places a new hexagon adjacent to an identical color hexagon, the
adjacent hexagon will be added up by 1 number.
22. When an empty hexagon is hovered by a player or bot, display moves animation
which show what will happen to the adjacent hexagon by showing color changing
animation or add up 1 animation.
23. Bot should imitate human moves by showing 3 steps before its actual step for at
least 1 second. Show any moves animation if a step should show animation.
24. The score will be calculated by sum of every identical color hexagon that has been
placed by players.
25. Disabled hexagons can not be hovered or clicked.
26. Play the sound effect given in the media files when the player is placing a new
hexagon.
27. The current score of the red and blue player should be shown on the screen.
28. When there is no empty hexagon left, the game is over.
29. When the game is over, show a popup to display the name, score of the winner, and
the restart button.
30. Score will be saved and displayed in the leaderboard and see the details of the player’s
game by clicking the details button.
31. Scores data should persist in the browser.
32. Players can sort the leaderboard by the winner score or by the date in descending
order.
33. The game should be working correctly in Google Chrome and Mozilla Firefox by
opening the index.html file directly.
34. The game should work without JavaScript errors and messages shown in the browser
console