DEV Community

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

Posted on

[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)

Top comments (0)