Project Title

Memory Game - Matching Cards

Table of contents

• Getting Started
• prerequisites
• Up and Running
• Directory Structure
• Project Description
• General information
• Screenshots
• Build In
• Frameworks used
• Features
• Inspiration
• Status
• Authors
• License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development purposes. Follow the Prerequisites need to run the code for furthur research.

Prerequisites

Softwares Needed

Download and Install VISUAL STUDIO CODE
https://code.visualstudio.com/download

Need Browser to run or debug our code

• Download and Install GOOGLE CHROME Browser

Knowledge

• Knowledge in HTML, CSS, JAVASCRIPT

Knowledge Base

• HTML TUTORIAL - https://www.w3schools.com/html/
• CSS TUTORIAL - https://www.w3schools.com/css/
• JS TUTORIAL - https://developer.mozilla.org/bm/docs/Web/JavaScript

Up and Running

Run the Game

After Downloading Google chrome --> right click on index.html file in matching cards game folder -> Open with option -> select Google Chrome -> Play the game in the browser.

View project Files

After Downloading Visual Studio Code --> Open Visual Studio Code software -> Open Folder option -> select Matching cards Game folder -> set up your workspace.

Directory structure

Matching Cards Game project folder contains following sub-folders

css/

• css folder contains style.css custom stylesheet written in css.
• Bootstrap - Responsive front-end Framework used.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
• Fontawesome.css is used in this project
https://use.fontawesome.com/releases/v5.7.2/css/all.css

img/

• Contains set of image files used in the project.

js/

• app.js - custom javascript code written in js.

html

• index.html - contains HTML5 content.

Project Description

This Memory Game is based on matching cards game in 4 * 4 grid. It is complete browser-based card matching game is designed and works in different browsers of different scale devices.

General information

• The Card Matching game states
• cards opened by the player
• Two cards getting matched means remains open
• Two cards getting unmatched means cards fliped
• All cards in the deck Matched
• Display Moves, start rating taken by the player
• Reload Button used to reload the entire game
• Display starrating, timetaken, score in final stage

Screenshots

state 1 : cards opened by the player

state 2 : Matching cards possibilities

state 3 : unmatched cards flipped.

state 4 : All cards are matched by the player

state 5 : Display moves and star rating taken by the player

state 6 : Reload the entire game to initial state

state 7 : Final score of player displayed

Build In

VS code Editor Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS Matching card game developed in Visual Studio code software

Frameworks used

Bootstrap Framework Bootstrap is a free and open-source front-end responsive Web developement framework. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and components other components.

Fontawesome Font Awesome is a font and icon toolkit based on CSS and LESS

Features

List of features ready for future development Increse the grid size Add newly designed cards in the deck Adding real time user experience

Inspiration

Project inspiration from Udacity FrontEnd Developer Nanodegree Program.

Status

Project is in progress for new level design and developement for advanced features.

Authors

Ranjith Kumar - [Memory Game] - (https://github.com/webbizleads/Memory-Game)

License

This project is the open source license