DEV Community

☪️♓🅰️♏⛎🇿🇼Mutezva
☪️♓🅰️♏⛎🇿🇼Mutezva

Posted on

3 3

[React Number Memory game with Mongodb Realm]

Overview of My Submission

What is the Memory game

  • The memory game is a pairing game that contains a pair of similar objects. In the game i am using a pair of numbers between one and eight.
  • The user selects 2 cards one at a time, the idea is to select matching numbers whenever 2 cards are picked. If the cards are similar they remain open otherwise they close after 500ms and the selection process carries on until all cards are matched correctly.
  • This particular is a 4 by 4 board game with pairs of numbers between one and eight inclusive.

MongoDb Atlas and Realm

  • MongoDb atlas and Realm makes it easy to make a simple connection to a backend without hosting your own server and the best news is that these services have a free tier.
  • Realm provides the use of functions and has a function editor that assist you to get started. The functions created will be used in the frontend to get the data.
  • The database was created using another MongoDB atlas service known as MongoDb Compass.
  • here is a sample code of the realm function used in the React Frontend application
exports = function(arg){

    let collection = context.services
                    .get("mongodb-atlas") 
                    .db("memoryGame")
                    .collection("memory");

  return collection.find({});
};
Enter fullscreen mode Exit fullscreen mode

Submission Category # (Action Star)

Link to Code

[Github repository] # (https://github.com/ChamuMutezva/memory-game-2021)
[Live preview link] # (https://memory-game-chamu-2021.netlify.app/)

Additional Resources / Info

[Mongodb Jumpstart videos] # (https://www.youtube.com/watch?v=RGfFpQF0NpE&list=PL4RCxklHWZ9v2lcat4oEVGQhZg6r4IQGV)

[Mongodb University - interactive learning] # (https://university.mongodb.com/mercury/M001/2021_December_14/chapter/Chapter_1_What_is_MongoDB_/lesson/5f5c03c704e9ff039e32729b/lecture)

[Shuffle array] # (http://stackoverflow.com/a/2450976)
[Inspiration of code drawn from] # (https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle)

function shuffle(array) {
    let currentIndex = array.length,
      temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (currentIndex !== 0) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };
Enter fullscreen mode Exit fullscreen mode

Screenshots

[Game image 1] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start1.png)

[Game image 2] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start2.png)

[Game image 3] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start3.png)

[Game image 4] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/endgame.png)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay