The Memory Card Game is a simple web-based game where players flip over cards to find matching pairs. The game is built using HTML, CSS, and JavaScript, with the card data sourced from a JSON file. The objective of the game is to match all pairs of cards with the highest score.
Responsive Design: The game grid adapts to desktop and laptop screen sizes, making it playable on desktop. Dynamic Card Loading: Card images and names are loaded from a JSON file, allowing for easy updates and customization. Score Tracking: The game keeps track of the player's score, awarding points for matching pairs and reducing points for not matching pairs. Restart Functionality: Players can restart the game at any time, with the cards reshuffled and the score reset. Winning Animation: Sparkles and animations are triggered when the player successfully matches all pairs.
- The game consists of a grid of cards placed face down.
- Players can flip over two cards at a time.
- If the cards match, they remain face up.
- If the cards do not match, they are flipped back over.
- The game continues until all pairs are matched.
- The player's score increases with each card flipped and when a match is found and decreases otherwise.
ESLint is a static code analysis tool for identifying and fixing problems in JavaScript code. It helps developers follow consistent coding styles, catch errors early, and improve code quality.
To use ESLint in your project, follow these steps:
Open your terminal and navigate to your project folder.
Run the following command to install ESLint:
npm init -y
npm install eslint --save-dev
npx eslint --init
npx eslint <filename.js>
To lint an entire project:
npx eslint .
npx eslint . --fix
To run Stylelint, you need to install it and configure it first. Here's how you can get started:
npm install --save-dev stylelint stylelint-config-standard 2. Configure Stylelint Create a .stylelintrc.json file in the root of your project with a configuration like this: { "extends": "stylelint-config-standard", "rules": { "indentation": 2, "string-quotes": "single" } } npx stylelint "/*.css" npx stylelint "/*.css" --fix
To run Jest, you'll first need to set it up in your project. Here’s a step-by-step guide: npm install --save-dev jest Add a Test Script: In your package.json file, add a test script that uses Jest: "scripts": { "test": "jest" }
Changed various things like code duplication, dead codes, formatting, indentation errors etc.
Changed few code snippets so that it is easy to understand the game logic and read code.
This project is an extension of our original Memory Game, transforming it from a static web application into a multi-tiered client-server architecture. The game now includes features such as player authentication, score tracking, and a leaderboard system.
https://github.com/priyagangwar/Memory-Game
https://priyagangwar.github.io/Memory-Game/
- Player name input before game start
- Score tracking and storage
- Top 10 leaderboard
- Client-server communication via RESTful API
- Database integration for persistent storage
- Frontend: HTML, CSS, JavaScript
- Backend: Node.js with Express.js
- Database: MongoDB
- Testing: Jest, Supertest
-
Clone the repository:git clone https://github.com/priyagangwar/Memory-Game.git cd Memory-Game
-
Install dependencies: cd server npm install cd ../client npm install
-
Set up MongoDB:
- Install MongoDB if not already installed
- Start MongoDB service
-
Start the server: cd server npm start
-
Open the client:
- Open
index.htmlin a web browser
To run the test suite: cd server npm test
- POST /api/scores: Save a new score
- GET /api/leaderboard: Retrieve top 10 scores