Giter Club home page Giter Club logo

memory-game-deniale's Introduction

Memory Game App

๐Ÿง  Memory Game with Multiple Difficulty Levels and Themes ๐ŸŽฎ

Challenge your memory with this fun Memory Game! Choose from three different levels of difficulty and two exciting themes to keep the game interesting. Can you match all the cards and become a Memory Master? Let's find out!

Memory Game Screenshot

Table of Contents

Features

  • Three levels of difficulty: Easy, Medium, and Hard.
  • Two themes: Superheroes and Programming.
  • A simple yet challenging game for all ages.
  • Fun animations and sound effects to enhance the gaming experience.
  • Track and display your best scores.

Installation

To run this project locally, you'll need to have Node.js and npm (Node Package Manager) installed. Follow these steps:

  1. Clone the repository:

    git clone https://github.com/denizozerdogan/memory-game-deniale.git
    
  2. Navigate to the project directory

     cd memory-game-deniale
    
  3. Install the dependencies for the backend

    cd /backend
    npm install
    
  4. Start the backend server

    npm run start:dev
    
  5. Install the dependencies for the frontend

    cd /frontend
    npm install
    
  6. Start the frontend development server

    npm start
    
  7. Open your web browser and access the game at:

    http://localhost:5173
    

How to Play

  • ๐Ÿ‘‰ Enter your name on the landing page and upload your avatar, then click on the button to start the game.
  • ๐Ÿ‘‰ Select your preferred difficulty level (Easy, Medium, or Hard) and theme (Superheroes or Programming) on the game's home page. The default difficulty is easy and theme is superheroes.
  • ๐Ÿ‘‰ The game will automatically restart upon changing the above settings.
  • ๐Ÿ‘‰ Memorize the card positions and match them by clicking on two cards at a time.
  • ๐Ÿ‘‰ Enjoy the game and have fun challenging your memory!

Acknowledgments

Special thanks to the open-source community and the following libraries and frameworks used in this project:

By Deniz Ozerdogan and Alejandra Naranjo.

๐Ÿš€ Happy Gaming! ๐Ÿš€

memory-game-deniale's People

Contributors

denizozerdogan avatar alens678 avatar github-classroom[bot] avatar

Forkers

denizozerdogan

memory-game-deniale's Issues

US1: AS A USER I WANT TO SEE AN INTRO SO THAT I COULD BE MOTIVATED TO PLAY

ACCEPTANCE CRITERIA:

When starting the user can see an animated image during 2 seconds

After 2'' image dessapears

##Tasks

US1T1. search image
US1T2. hero component with animation
US1T3. after 2'' a button start should appear

##Acceptance Criteria

US1AC1.When starting the user can see an animated image during 2 seconds
US1AC2.After 2'' image dessapears

AS A DEVELOPER I WANT TO DEFINE THE ARQUITECTURE OF THE APPLICATION AND SET THE DEVELOPMENT ENVIRONMENT SO THAT WE CAN START WITH THE REST OF STORIES

###Front-end Scaffolding

install vite
install vitest, jsdom, @testing-library
install dependencies: usequery,...
create folders, components and first tests
set data folder with test data

###Back-end scaffolding

install nest and generate game resources
connect mongo
test services y controllers
test database

###Acceptance Criteria

starter tests for all frontend components work correctly
starter tests for all backend components work correctly

US5: AS A USER I WANT TO FLIP TWO CARDS AND COMPARE EACH OTHER SO THAT I CAN COMPLETE A CARDS PAIR GUESSED

Acceptance Criteria

us5ac1: As a user i can see the card board display in the screen, then I can click any card and I will see the image behind the card.
us5ac2: I can see the card board displayed in the screen, then I can click any card and I will see the image behind the card.
us5ac3: I can click a second card then I will be update the pairs clicked value
us5ac4: After second card revealed both will turn down again if not paired.
us5ac5: After second card revealed both cards will remain visible and the pair guessed value increased.
us5ac6: I can play while there were unvealed cards.

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.