Fruit Matcher Game: Detailed Code Breakdown and Functionality Analysis

This document presents a comprehensive analysis of the Fruit Matcher game's code, which is built using HTML, CSS, and JavaScript. The `index.html` file structures the game's layout, including a difficulty level selection using a form and a 'New Game' button. The CSS code defines the visual aspects, such as the card appearance, flipping animations, and grid layout. The JavaScript files, including `BrowserInterface.js`, `Card.js`, and `MemoryGame.js`, implement the game logic. `BrowserInterface.js` handles settings, card clicks, and end-game messages. `Card.js` defines the card object, and `MemoryGame.js` manages game initialization, card creation, and player interactions, including matching, revealing, and concealing cards. The code includes functions for handling form submissions, flipping cards, building the grid, and determining game outcomes, providing a detailed breakdown of the game's functionality and structure. The document serves as a valuable resource for understanding the implementation details of the Fruit Matcher game.

Index.Html
Index.html is the building block of the game. This file contains head tag in which Title
“Fruit Matcher” is given alongwith script for javascript and css are mentioned. In body
tag we have table as Difficulty level. Table is inbuilt with form which includes three grid
as Easy, Medium, hard and Don’t do it again which is treated as level of the game and
one button labelled as New Game to start a new game whenever user click on it. At the
end of it, we have division for footer which includes header as “Fruit Matcher” and
image for restart the game.
.css
Attributes of CSS files are:
html {
width:100%;
height:100%;
}
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
Above code maintains the structure of the game. Html code gives the boundary to the
game while body maintains overall padding and between margin of the game layout.

Matching Cards - If you wish to have custom matching images, you can do so by
leveraging the 'matching' class which is added to one of the matching cards. See the
example below.
.back.card-1 {
background-image: url(../images/fruits/apple_1.jpg);
}
Initially hidden pane – This code determines how to card will look to the user before
clicking on it or in initial phase.
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background-color: #fff;
border-radius: 5%;
background-position:50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
Front pane, placed above back – Whenever player clicks on card this code will
implement the look of the card.
.front

{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
background-color: #e12d00;
border-radius: 5%;
background-image: url(../images/card.svg);
background-position:50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
Hide back of pane during swap – When player clicks on the card, and it doesn’t
matches it will regain its original position, this code help in retrieving the original position
nof the card.
.front, .back {
width:100%;
height:100%;
display: block;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
Flip speed goes here- Speed of flipping is determined by the code mentioned below.
.flipper {
width:90%;
height:90%;
margin:0% auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
top:5%;
bottom:5%;
}
Flip the pane when clicked – When player click card, it flips it. Below code of CSS
helps in maintain ning the flipping of code.
.flip-container.clicked .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container.clicked .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}

JavaScript File
It includes three JavaScript files namely
1- BrowserInterface.js – Every javascript file contains functions which has some
functionality. Below line of code tells the function about how long a non matching
card will be displayed once clicked.
Var nonMatchingCardTime = 1000;
Handle settings form submission – When a game terminates, this function helps to
handle the form submission. It helps to set up the original platform once the game ends
or terminates.
var reset = document.getElementById('memory--settings-reset');
var handleSettingsSubmission = function (event) {
event.preventDefault();
var selectWidget = document.getElementById("memory--settings-grid").valueOf();
var grid = selectWidget.options[selectWidget.selectedIndex].value;
var gridValues = grid.split('x');
var cards = $.initialize(Number(gridValues[0]), Number(gridValues[1]));
if (cards) {
document.getElementById('memory--settings-modal').classList.remove('show');
document.getElementById('memory--end-game-modal').classList.remove('show');
document.getElementById('memory--end-game-message').innerText = "";

Handle clicking on card – This function tells what will happen when a player clicks on
any card. If every pair matches, it will update you with the message.
var handleFlipCard = function (event) {
event.preventDefault();
var status = $.play(this.index);
console.log(status);
if (status.code != 0 ) {
this.classList.toggle('clicked');
}
if (status.code == 3 ) {
setTimeout(function () {
var childNodes = document.getElementById('memory--cards').childNodes;
childNodes[status.args[0]].classList.remove('clicked');
childNodes[status.args[1]].classList.remove('clicked');
}.bind(status), nonMatchingCardTime);
}
else if (status.code == 4) {
var score = parseInt((($.attempts - $.mistakes) / $.attempts) * 100, 10);
var message = getEndGameMessage(score);
document.getElementById('memory--end-game-message').textContent = message;
document.getElementById('memory--end-game-score').textContent =
'Score: ' + score + ' / 100';

document.getElementById("memory--end-game-modal").classList.toggle('show');
}
};
var getEndGameMessage = function(score) {
var message = "";
if (score == 100) {
message = "Amazing job!"
}
else if (score >= 70 ) {
message = "Great job!"
}
else if (score >= 50) {
message = "Great job!"
}
else {
message = "You can do better.";
}
return message;
}
Build grid of cards – This functions maintains the layout of the cards by handling grids of
column and rows.
var buildLayout = function (cards, rows, columns) {
if (!cards.length) {

return;
}
var memoryCards = document.getElementById("memory--cards");
var index = 0;
var cardMaxWidth = document.getElementById('memory--app-container').offsetWidth /
columns;
var cardHeightForMaxWidth = cardMaxWidth * (3 / 4);
var cardMaxHeight = document.getElementById('memory--app-container').offsetHeight /
rows;
var cardWidthForMaxHeight = cardMaxHeight * (4 / 3);
Clean up. Remove all child nodes and card clicking event listeners.
while (memoryCards.firstChild) {
memoryCards.firstChild.removeEventListener('click', handleFlipCard);
memoryCards.removeChild(memoryCards.firstChild);
}
for (var i = 0; i < rows; i++) {
for (var j = 0; j < columns; j++) {
Use cloneNode(true) otherwise only one node is appended
memoryCards.appendChild(buildCardNode(index, cards[index],

(100 / columns) + "%", (100 / rows) + "%"));
index++;
}
}
Build single card – Below function helps you to create a single card which is applied to
every other card of the grid.
var buildCardNode = function (index, card, width, height) {
var flipContainer = document.createElement("li");
var flipper = document.createElement("div");
var front = document.createElement("a");
var back = document.createElement("a");
flipContainer.index = index;
flipContainer.style.width = width;
flipContainer.style.height = height;
flipContainer.classList.add("flip-container");
if (card.isRevealed) {
flipContainer.classList.add("clicked");
}
flipper.classList.add("flipper");
front.classList.add("front");
front.setAttribute("href", "#");
back.classList.add("back");
back.classList.add("card-" + card.value);

if (card.isMatchingCard) {
back.classList.add("matching");
}
back.setAttribute("href", "#");
flipper.appendChild(front);
flipper.appendChild(back);
flipContainer.appendChild(flipper);
flipContainer.addEventListener('click', handleFlipCard);
return flipContainer;
};
2- Card.js
In this javascript file, it sets the value of every value as default. It act as a helper
class for MemoryGame.js javascript file.
MemoryGame.Card = function(value, isMatchingCard) {
this.value = value;
this.isRevealed = false;
if (isMatchingCard) {
this.isMatchingCard = true;
}
this.reveal = function() {
this.isRevealed = true;
}

3- MemoryGame.js- This file includes Modifying default settings to start a new
game. Both parameters need integers greater than one, and at least one them
needs to be an even number.
initialize : function(rows, columns) {
var validOptions = true;
Validate arguments
if (!(typeof columns === 'number' && (columns % 1) === 0 && columns > 1) ||
!(typeof rows === 'number' && (rows % 1) === 0) && rows > 1) {
validOptions = false;
throw {
name: "invalidInteger",
message: "Both rows and columns need to be integers greater than 1."
};
}
if ((columns * rows) % 2 !== 0) {
validOptions = false;
throw {
name: "oddNumber",
message: "Either rows or columns needs to be an even number."
};
}
Create an array of sorted cards which return Reference to self-object.
createCards: function() {
var cards = [];
var count = 0;
var maxValue = (this.settings.columns * this.settings.rows) / 2;
while (count < maxValue) {