Who Doesn't Love a Petting Zoo?

Okay, so it may not be a traditional petting zoo, it's actually a memory card game with adorable animals, and we all love adorable animals. I do admit, I am biased here because the animals in the cards are either my own or pets of friends. What makes it a petting zoo? Well I just edited the cursor to a hand while the user is hovering over the animal cards to give the effect of "petting".

I knew I wanted to create a game of some sort as my first project. I threw around the idea of making a tamagotchi giga pet-like application, but the memory game took the cake, mainly because I got to incorporate my animals into it while learning a few new-to-me concepts. I am happy with my decision as this was such a fun challenge to tackle for my first project.

What I learned

A card game always has to have a built-in shuffle feature otherwise the game would be too easy! The best way I found to do this? Randomizing arrays! This was a key concept I learned that really helped my game to be successful.

const randomize = () => {
const cardData = cards;
cardData.sort(() => Math.random() - 0.5);
return cardData;
}

I found method chaining to be the most efficient way to achieve this goal (for this purpose). As you can see in my code snippet above, I used a customized array.sort() method and math.random function to accomplish this. Since the sort function looks for either negative or positive numbers in order to determine whether to move the item in the array or not, I used math.random() and subtracted 0.5 as a baseline so we'll randomly get negative and positive numbers, which in turn randomly shuffles the items in the array.

Utilizing Event Listeners

For a game to be interactive, event listeners are a must. This project only required 3 event listeners but I doubled the expectations to increase interactivity. I coupled event listeners with alerts to start, restart or pause the game.

Starts Game

const startBtn = document.getElementById("start-btn");
startBtn.addEventListener("click", () => {
cardGenerator();
startTimer();
});

Restarts Game

const resetBtn = document.getElementById("restart-btn");
resetBtn.addEventListener("click", refreshPage);

function refreshPage() {
if (confirm("Are you sure you want to restart the game?")) {
reloadCards();
}
}

Pauses Game

const pauseBtn = document.getElementById("pause-btn");
pauseBtn.addEventListener("click", pauseGame);

function pauseGame() {
alert("Press Ok to Resume Game");
}

JSON Document Database - Stretch Goal

Originally when I wrote my program, I did not utilize db.json. I had just created my card data as an array within my index.js file. I felt eager to reach the stretch goal so I decided to take on the challenge. I did so by creating my card data in db.json and used a fetch request to access the data. So my code went from this:

In index.js
const getData = () => [ // without curly brace, it automatically returns
{imgSrc: "images/kit.jpeg", name: "Kit"},
{imgSrc: "images/Pixel.jpeg", name: "Pixel"},
{imgSrc: "images/Salvador.jpeg", name: "Salvador"},
{imgSrc: "images/Tongo.jpeg", name: "Tongo"},
{imgSrc: "images/Voltaire 8.jpeg", name: "Voltaire"},
{imgSrc: "images/Zion.jpeg", name: "Zion"},
{imgSrc: "images/Yadda.jpg", name: "Yadda"},
{imgSrc: "images/Jenny.jpg", name: "Jenny"},
{imgSrc: "images/kit.jpeg", name: "Kit"},
{imgSrc: "images/Pixel.jpeg", name: "Pixel"},
{imgSrc: "images/Salvador.jpeg", name: "Salvador"},
{imgSrc: "images/Tongo.jpeg", name: "Tongo"},
{imgSrc: "images/Voltaire 8.jpeg", name: "Voltaire"},
{imgSrc: "images/Zion.jpeg", name: "Zion"},
{imgSrc: "images/Yadda.jpg", name: "Yadda"},
{imgSrc: "images/Jenny.jpg", name: "Jenny"}
];

To this:

In db.json
{
"cards": [
{
"id": 1,
"name": "Jenny",
"imageSrc": "images/Jenny.jpg"
},
{
"id": 2,
"name": "Pixel",
"imageSrc": "images/Pixel.jpeg"
},
{
"id": 3,
"name": "Kit",
"imageSrc": "images/kit.jpeg"
},
{
"id": 4,
"name": "Salvador",
"imageSrc": "images/Salvador.jpeg"
},
{
"id": 5,
"name": "Tongo",
"imageSrc": "images/Tongo.jpeg"
},
{
"id": 6,
"name": "Voltaire",
"imageSrc": "images/Voltaire 8.jpeg"
},
{
"id": 7,
"name": "Zion",
"imageSrc": "images/Zion.jpeg"
},
{
"id": 8,
"name": "Yadda",
"imageSrc": "images/Yadda.jpg"
},
{
"id": 1,
"name": "Jenny",
"imageSrc": "images/Jenny.jpg"
},
{
"id": 2,
"name": "Pixel",
"imageSrc": "images/Pixel.jpeg"
},
{
"id": 3,
"name": "Kit",
"imageSrc": "images/kit.jpeg"
},
{
"id": 4,
"name": "Salvador",
"imageSrc": "images/Salvador.jpeg"
},
{
"id": 5,
"name": "Tongo",
"imageSrc": "images/Tongo.jpeg"
},
{
"id": 6,
"name": "Voltaire",
"imageSrc": "images/Voltaire 8.jpeg"
},
{
"id": 7,
"name": "Zion",
"imageSrc": "images/Zion.jpeg"
},
{
"id": 8,
"name": "Yadda",
"imageSrc": "images/Yadda.jpg"
}
]
}


Reformatting my code this way allowed me to use the skills I learned to transmit data in a web application. After this project, I will always take the stretch goals on as a challenge. It allowed me to test my knowledge and to apply what I have learned already while learning some new concepts. Here's to the first of many projects! Thanks for joining me on this journey.

Feel free to check my project out on Github!