Giter Club home page Giter Club logo

gofishexpress's Introduction

🎣 Full-Stack Matching Game: Go Fish 🎣

Preview

  • Full-stack Web App using Passport.js, Express.js, Node.js, and MongoDB
  • Some dependencies used: EJS, Body-Parser
  • CRUD functionality: Create ("post"), Read ("get"), Update ("put"), and Delete ("delete")

Goal:

  • Make a 10 card memory game - users are able to select two cards and check if they are a match. If they are a match, they stay flipped. If not, they flip back over. Game is done when all cards are matched and flipped over. Example in references.

Approach:

  • "Selected" CSS class for clicked on cards (with guard clause to shortcircuit double clicks on same card to prevent counter from increasing)
  • Click counter to determine if 2 cards are selected, then...
  • CheckMatch function
  • If matching, add "Matched" class, and set onclick to null (prevents further onclicks)
  • Use setTimeout(function(){}, time) to hide non-matching cards (timed to flip before user clicks third card, while enough time to memorize revealed image)
  • Fisher–Yates/Knuth Shuffle to randomize cards

Installation

  1. Clone repo
  2. run npm install

Usage

  1. Open terminal
  2. Change directory to 21-savage-demo folder
  3. Run node server.js
  4. In Browser, navigate to localhost:5000

References:

gofishexpress's People

Watchers

James Cloos avatar Johann Folta avatar

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.