DataByte

The Official Machine Learning and Data Science Club of

NITT
FIRST-YEAR INDUCTION

TASK-1

WEB DEVELOPMENT

PROBLEM STATEMENT:

The task is to create a matching game where the player must match pairs of cards
with the same image. The game will have two modes - Basic and Hacker.

Basic Mode:

● The game will have a grid (4 X 4) of cards with the backside facing up.
● The player must flip two cards at a time to reveal their face.
● If the two cards have the same image, they remain face up and score a
point.
● If the two cards do not match, they are turned back over, and gets shuffled
up and the player moves on to the next turn.
● The game ends when all the pairs have been matched.
● Add a timer of 30-60 sec to the game to track the time taken to complete
the game or restrict the number of clicks made to 3 per 8 sec.
● Implement a suitable scoring system based on time and all essential game
features like restart button, etc.
● Implement suitable UI with basic animations for clicks and card display.

Hacker Mode:

1
 ● The game will have a grid of cards with the backside facing up whose
number of rows and columns must be decided by the user (default 6 x 6)
and depending upon the values, place dummy cards (if needed so as to
make proper matching of cards based upon user input and just disappear
these cards upon click) in the grid.
● In addition to the basic mode features, the game will also have power-up
cards with special abilities like

○ Freeze Card: This card freezes the timer for a certain amount of time,
giving the player more time to find matches.

○ Bonus Card: This card gives the player a bonus point or points,
increasing their score.

● The power-up cards will be randomly placed on the board. Once found, the
power-up card's effect will then be activated, and the player will be able to
use it for a limited amount of time, after that, the power-up card will expire,
and the player will have to find another one to use its effect again.
● Implement sound effects for clicks and win.

Brownie points:

● Implement a leaderboard using local storage to save the high scores of

players.
● Implement a feature to choose the difficulty level of the game (easy,
medium, hard) with a corresponding number of cards on the board.
● Use any API of your choice to display random images upon start of the
game.
● Save the state of the game i.e., if the user pauses or closes the window and
opens again, he should be able to continue playing.
● Make the website mobile responsive.

GUIDELINES:

● It is mandatory to complete the basic mode of the task before it can be

considered complete. While the hacker mode is optional, it is
recommended that the mentee implements it if interested.

2
 ● Must build the code in HTML, CSS, vanilla JS only. Strictly no external
libraries such as Bootstrap/ Material UI should be used.
● Plagiarism is strictly forbidden, and any instance of it will result in
disqualification from any Databyte activity.

EVALUATION METRICS:

● The mentee's work will be evaluated based on the implementation of the

basic features suggested and UI/UX, as well as their creativity and
originality.
● If any extra features have been implemented, the mentee will receive
additional brownie points.
● Plagiarism and usage of ChatGPT will not be tolerated and will result in
disqualification from the task.

SUBMISSIONS:

Host the website in any platform, say Github pages and submit the repository link
containing the complete code with a well structured README file explaining in
detail your work and features implemented.

RESOURCES:

HTML basics - Learn web development | MDN

Learn HTML Basics for Beginners in Just 15 Minutes

CSS: Cascading Style Sheets | MDN

JavaScript Tutorial

https://developer.mozilla.org/en-US/docs/Learn/JavaScript

Learn the Basics of Git in Under 10 Minutes