Giter Club home page Giter Club logo

vinod2rahul-ms2-memorygame's Introduction

Milestone project-2: User- Interactive Front-end - Code Institute.

This is a simple Memory Game, where the player can click on cards to match the colours.

As the cards don’t match, it’s not a pair, so It turns them back over. The two cards match it’s a pair! It keeps the cards and can play again.

The player can reset the game at any point of time- It's a single-player game. Language version English.

Start Playing

image

User stories

Must have:

  • As a user, I wish it should be simple with easy navigation. image

Should have:

  • As a user I'd like to read Instructions about how to play the game . image

Must have:

  • As a user I want to reset the game at any point of time. image

UX

Strategy

My goal in the design was to make it as easy as possible, So that player can quickly start the game. ## Scope The Colours should be dynamic, So the player doesn't have the chance to remember the colours.

Structure

I wanted the player to be able to quickly understand "How to play".

Skeleton

image

Technologies

  • HTML
  • CSS
  • JavaScript

Deployment

This game is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://vinod2rahul.github.io/MS2-MemoryGame into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

Testing

Browsers

The site was tested in the following browsers to ensure the site is compatible and responsive.

  • Chrome
  • Mozilla
  • Safari
  • Opera
  • Internet Explorer

Different Devices:

The site was tested in the following devices to ensure the site is compatible and responsive.

Manual Testing:

  • Clicking on the button where the "Reset" is to test if the game always reset during the game.
  • Clicking on all cards to test if they flip.
  • Clicking on all the cards fast to test if more than 2 cards can stay flipped at the same time.
  • Testing if "YOU WIN!" message will pop up by matching all the cards.
  • Testing that all content is visible and responsive on different screen sizes.

Upcoming Features To Implement:

I would like to add some more features like adding the username, multiple scores, share your score & many more. For the future I will be adding some difficulty levels through JavaScript to increase the difficulty of the game.

Credits

All content and code in this game were written by me.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.