Sivaraman has been tasked with selecting juniors for an online game. But he is too lazy to filter out all the applicants and wants to develop a game to determine how worthy the juniors are.
Sivaraman‘s friend Sneha the Greatest, likes colors and patterns a lot and suggests a game that can help him test a person’s problem solving skills.
Given a 5x5 grid made with tiles of 6 different colors, the goal is to try and make this 3x3 grid in its center. Out of the 25 tiles, one will be empty which can be swapped with any of the four adjacent tiles.
To find out who is better at doing this, Sivaraman also wants you to make a scoring system that will show how much time it takes you to do the task. To make sure that someone doesn't memorize the moves, he wants you to randomize both the 3x3 and outside tiles of the 5x5 Grid for each game.
Click here to watch a demo of a simpler version of the game.
- Make a 5x5 grid with 6 distinct colors and 24 tiles (one grid has to be empty to allow the tiles to move).
- Generate a random 3x3 grid for each game.
- Implement scoring (based on the number of moves taken) and a timer.
- Include a reset button to start a new game.
- Include sounds in the game (for example, victory music after game completion).
- Create difficulty modes (for example, easy mode can have a 3x3 inner grid and 5x5 outer grid and normal mode can have a 4x4 inner grid and 6x6 outer grid) [NOTE: Ensure that both the grids are always square.]
- Using local storage, store and display the name and score of the player with the highest score.
- Use media queries to make the page responsive on mobile.
- Make the game multiplayer where two people can play with the same initial board and reach the same solution.
- Player who completes with the least number of moves wins the game.
- Display the least number of moves after the game ends and maintain a separate high score for two player games.
- Implement difficulty modes with varying grid sizes for multiplayer games.
NOTE: Normal mode is necessary to complete the task. Hacker mode is highly encouraged
You’ll need to learn basic HTML, CSS and JavaScript for this task. The main concept required for this task is DOM Manipulation.
Check out the resources provided in the dashboard to help you along the way.
You are not allowed to use any frameworks, like jQuery, Angular, Bootstrap, or React. The code must be in Vanilla JS only. You also don’t require a backend, and you shouldn’t need to make one.
13th June 2021 | 11:59pm
Good luck and happy coding!