COMPUTER GRAPHICS PROJECT [GAME
DESIGN]
BRAINCADE (MEMORY GAME)
PAPER NAME – PROJECT-V
PAPER CODE – PR591
TOPIC – GAME DESIGN
GROUP MEMBERS –
1. BISAL ROY(136)
2. SANJIB PAUL(161)
3. SHIU MAHATO(180)
4. SUBHANKAR CHAKRABORTY(182)
5. DEBARPITA DEB(183)
6. DEBODYUTI MANDAL(192)
7. ANIK CHAKRABORTY(193)
8. SRIJITA DHAR(197)
9. ARPAN CHAKRABORTY(198)
INTRODUCTION
For our Computer Graphics project of 3rd Year (5th Semester), we designed a game which
is a snazzy, well-designed, and feature-packed memory game. We are using the concept of
HTML, CSS and Java script to implement this memory game. Here, we have build a
complete browser-based card matching game (also known as Concentration) which requires,
an updated and latest browsers with working internet connection for downloading required
libraries, to run this project.
MOTIVATION
We’ve got a classic memory game named Braincade to play in Curious World today. So just
how do memory games help an individual to develop their skills? Everyone has played some
kind of memory game at some point. Whether that’s spot the difference, simple pairing
games using playing cards, or even doing a crossword. They all require the players to use
their memory to complete the game. And in doing so, users are developing their key skills.
Playing memory games can improve other brain functions, such as attention, concentration,
and focus. Memory games give space to critical thinking and that helps children nurture their
attention, imagination to detail as well as develop important cognitive skills that will aid their
future development. Memory games can improve visual recognition and discrimination. This
will lead to an acceleration in distinguishing images from one and another.
Though memory games are a short-term boost, players have to plan their moves as they go.
From revealing a card to plotting their next move, children can learn the importance of
thinking ahead and plotting their next choice.
Process / Flow
Creating the structure of Gameboard
The structure of the gameboard is achieved with HTML and CSS. It’s something like a grid.
The parent div is the deck containing all cards. The cards are created as an unordered list and
styled to look like the image below using flexbox.
Handling how a click on a card would display the
card icon
It looks like the icons are behind the card and it flips to show the icon when it’s clicked. If
you examine the styles for each card you’ll get a better understanding of what exactly is
happening. When closed, card background color is black and the font size is zero and when
opened background color changes to blue and font size increases.
Now, we have a deck of cards. We need to ensure that on each click of a card the card
displays its icon. To achieve this for loops will be best to use case here and a list of our
cards is needed – That’s why we have used an array.
// Initialize Memory Game
let init = ()=> {
let cards = shuffle(symbols);
$[Link]();
match = 0;
moves = 0;
$[Link]('0');
$[Link]('fa-star-o').addClass('fa-star');
for (let i = 0; i < [Link]; i++) {
$[Link]($('<li class="card"><i class="fa fa-' + cards[i] + '
"></i></li>'))
}
addClkListener();
$(".clock").text("0:00");
};
1. Shuffling Cards
Cards are to be shuffled on load or restart
There’s really no game if cards can’t shuffle. In this project, a function to shuffle an array
was already provided from here. This is known as Fisher-Yates (aka Knuth) Shuffle. With
this function, we should be able to shuffle our cards on the game board:
let shuffle = (array)=> {
let index = [Link], temp, randomIndex;
while (0 !== index) {
randomIndex = [Link]([Link]() * index);
index -= 1;
temp = array[index];
array[index] = array[randomIndex];
array[randomIndex] = temp;
}
return array;
}
2. Matching Cards
Handling matched and unmatched cards
For this part, we need to make each card unique. Since icons on each cards are different, We
have given each card object a type property that corresponds to the icon of the card to
distinguish each card.
if ([Link] > 1) {
if (card === opened[0]) {
$[Link]('.open').addClass('match animated infinite rubberBan
d');
setTimeout(()=> {
$[Link]('.match').removeClass('open show animated infinite
rubberBand');
}, 800);
match++;
} else {
$[Link]('.open').addClass('notmatch animated infinite wobble
');
setTimeout(()=> {
$[Link]('.open').removeClass('animated infinite wo
bble');
}, 800 / 1.5);
setTimeout(()=> {
$[Link]('.open').removeClass('open show notmatch animated
infinite wobble');
}, 800);
}
opened = [];
moves++;
setRating(moves);
$[Link](moves);
The card Open function runs on every click of a card. The function adds the selected cards
to an opened Cards array which we can use to know which cards are opened. An if-else
statement runs when two cards are selected and checks to see if cards match or don’t match.
The key to identifying different cards is the type attribute added to each card. A player flips
one card over to reveal its underlying symbol. The player then turns over a second card,
trying to find the corresponding card with the same symbol. If the cards match, both cards
stay flipped over. If the cards do not match, both cards are returned to their initial hidden
state.
3. Moves
Game should display the current number of
moves a user has made
We can achieve this with a move variable that counts a move on selecting two cards.
moves++;
setRating(moves);
$[Link](moves);
4. Star Rating
The game should display a star rating (from 1–3)
that reflects the player’s performance based on
number of moves made
You should provide star icons in your score panel for this feature. From the requirement
above the star rating is dependent on the number of moves made, we have passed the move
variable to setRating function to accommodate handling of the star rating.
let setRating =(moves)=> {
let score = 3;
if(moves <= 10) {
$[Link](3).removeClass('fa-star').addClass('fa-star-o');
score = 3;
} else if (moves > 10 && moves <= 14) {
$[Link](2).removeClass('fa-star').addClass('fa-star-o');
score = 2;
} else if (moves > 14) {
$[Link](1).removeClass('fa-star').addClass('fa-star-o');
score = 1;
}
return { score };
};
Here, We have used if else statements to create a range depending on number of moves that
will give some of the stars a style of visibility.
5. The Timer
When the player starts a game, a displayed timer
should also start. Once the player wins the game,
the timer stops.
We can create a timer using JS with the code below. This will be sufficient and will be
displayed in the score panel just above the game board:
let gameTimer = () => {
let startTime = new Date().getTime();
// Update the timer every second
timer = setInterval(() => {
let now = new Date().getTime();
// Find the time elapsed between now and start
let elapsed = now - startTime;
// Calculate minutes and seconds
let minutes = [Link]((elapsed % (1000 * 60 * 60)) / (1000 * 6
0));
let seconds = [Link]((elapsed % (1000 * 60)) / 1000);
// Add starting 0 if seconds < 10
if (seconds < 10) {
seconds = "0" + seconds;
}
let currentTime = minutes + ':' + seconds;
// Update clock on game screen and modal
$(".clock").text(currentTime);
}, 750);
};
6. Restart button
A restart button should allow the player reset the
game board, the timer, and the star rating
Some of this requirements have already been fulfilled, but I’ll show what the code looks like.
The restart icon should also be available in your score panel.
$[Link]('click', ()=> {
swal({
allowEscapeKey: false,
allowOutsideClick: false,
title: 'Are you sure?',
text: "Your progress will be Lost!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#02ccba',
cancelButtonColor: '#f95c3c',
confirmButtonText: 'Yes, Restart Game!'
}).then((isConfirm)=> {
if (isConfirm) {
clicks = 0;
clearInterval(timer);
init();
}
})
});
Above is a snippet of what the restart button looks like in HTML. On click of the restart
button startGame function runs.
7. Win the game
The game ends once all the cards have been correctly matched so for that purpose we have
written a if block where the condition is if all the 8 cards have been matched then the
endgame function will be called.
// End Memory Game if all cards matched
if (match === 8) {
setRating(moves);
let score = setRating(moves).score;
setTimeout(()=> {
endGame(moves, score);
}, 500);
}
8. A Congratulations Modal
A congratulations modal should appear when
user wins and ask the player if they want to play
again, Modal should show: How much time it took,
and star rating
This is the rounding up section of this project. What’s the point if you’re playing a game and
you win but you don’t even know when you do. Logically, you’ll know you’ve won when all
your cards are matched. To proceed, we need to alert the player when all cards are matched.
This alert will be in form of a modal that shows the time spent, the rating and . To get this
done, we need to add a modal in our html file, then style the modal with css and hide it. We
will us JS to make the modal visible.
// End The Memory Game
// Open Popup for showing required details
// On configuaration, show default view
let endGame = (moves, score) => {
let msg = score == 1 ? score + ' Star' :score +' Stars';
swal({
allowEscapeKey: false,
allowOutsideClick: false,
title: 'Congratulations! You Won!',
text: 'With ' + moves + ' Moves and ' + msg + '\n Woooooo!',
type: 'success',
confirmButtonColor: '#02ccba',
confirmButtonText: 'Play again!'
}).then((isConfirm)=> {
if (isConfirm) {
clicks = 0;
clearInterval(timer);
init();
}
})
}
The endGame function checks to see if all cards are matched, if they are matched then it
stops the timer. gets number of moves, star rating and time spent. and displays on the
congratulation modal. There are also some functions that close the modal and reset the game
on clicking the close icon and play again button provided in the modal.
Conclusion
I am so glad we’ve reached this point. This project helped me to recollect all I’ve learnt from
the numerous basics /fundamentals of Javascript courses I’ve taken. I enjoyed working on
this project and I’d love if you try your hands on it too. And if you followed through: