AJAY KUMAR GARG ENGINEERING
COLLEGE
INFORMATION TECHNOLOGY
DEPARTMENT
YEAR:2022-23
Report
TITLE OF PROJECT
MEMORY MATCHING GAME
MINI PROJECT OR INTRENSHIP ASSESSMENT
KCS-554
NAME:
HARSH YADAV
(2000270110044)
DIVANSHU MANCHANDA
(2000270110036)
BHANU PRATAP SINGH
(2000270110031)
GUIDE NAME:
MR. SUMIT SHARMA
ACKNOWLEDGEMENT
A project can never become a success with efforts of only one
individual. It requires a group of people to complete a project at
its best. And it’s my friends, my teacher and my family member
who have helped me to complete my project.
The present work is just an effort to throw some light on
“Memory Game project”. The work would not have been
possible to come to the present shape without the guidance,
supervision and help of my project guide, Mr. Sumit Sharma Sir.
So, I’d like to thank him.
MR. SUMIT SHARMA
SIGNATURE
ABSTRACT
The Memory Game Project is all about demonstrating your mastery of JavaScript. You’ll
build a complete browser-based card matching game (also known as Concentration). But
this isn’t just any memory game! It’s a well-designed, feature-packed memory game!
How the Game Works
The game board consists of sixteen "cards" arranged in a grid. The deck is made up of
eight different pairs of cards, each with different symbols on one side. The cards are
arranged randomly on the grid with the symbol face down. The gameplay rules are very
simple: flip over two hidden cards at a time to locate the ones that match!
Each turn:
• The 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 flipped face down.
The game ends once all cards have been correctly matched.
Development Strategy
It's very important that I’ve plan my project before I start writing any code. Break my
project down into small pieces of work and plan out my approach to each one. It's much
easier to debug and fix an issue if I've only made a small change. It becomes much more
difficult if I wait longer to test my code.
Chapter-1, INTRODUCTION
In the fast growing field of software engineering and development and even more rapidly
growing sector of Web Application development the future is hard to predict. I’m working with
the browser-based application, as my Minor Project is a credit subject and as part of my degree
I choose this type of work for doing better with development cycle, development period,
graphics, coding, adopting new technology, designing.
In general web application project is a project focusing on the creation of an application which
is independent of device operating system. Web applications are usually coded in browsersupported language such as JavaScript and HTML as these languages rely on the browser to
render the program executable. Some of the applications are dynamic, requiring server-side
processing. Others are completely static with no processing required t the server.
What Will I Build?
The Memory Game Project is all about demonstrating my practice of JavaScript. I’ll build a complete
browser-based card matching game (also known as Concentration). But this isn’t
just any memory game! It’s a snazzy, well-designed, feature-packed memory game!
How the Game Works
The game board consists of sixteen "cards" arranged in a
grid. The deck is made up of eight different pairs of cards,
each with different symbols on one side. The cards are
arranged randomly on the grid with the symbol face down.
The gameplay rules are very simple: flip over two hidden
cards at a time to locate the ones that match!
Each turn:
•
•
•
•
The 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 flipped face down.
The game ends once all cards have been correctly matched.
In project, the product is a browser-based game. But and here comes the point: A game is much
more than just its software. It has to provide content to become enjoyable. Just like a web
server: without content the server is useless, and the quality cannot be measured. This has an
important effect on the game project as a whole. The software part of the project is not the only
one, and it must be considered in connection to all other parts: The environment of the game,
the design theme, characters/icons, game plays, the artwork, and so on.
Game Functionality
The real-life game, players flip over cards to locate the pairs that match The goal is to recreate
this effect in your project. There are a couple of interactions that you'll need to handle:
•
•
•
•
Flipping cards
What happens when cards match
What happens when cards do not match
When the game finishes
So, let’s get started working to develop a Memory Game!
Chapter-2, PROJECT SPECIFICATION
2.1 Overview of Web App.
There is a lot of confusion created by the use of terms like web-based, internet-based and cloudbased when referring to applications. Web-based applications actually encompass all the
applications that communicate with the user via HTTP. This includes light applications like
Flash games, online calculators, calendars and so on, as well as more intensive applications such
as web-based word processors and spreadsheet applications.
2.2 Technologies used
Web applications are usually coded in browser-supported language such as JavaScript and
HTML as these languages rely on the browser to render the program executable. Some of the
applications are dynamic, requiring server-side processing. Others are completely static with no
processing required t the server.
Fig: Web Application Structure
▪
HTML5:
HTML is the standard markup language for creating Web pages.
- HTML stands for Hyper Text Markup Language
-HTML describes the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
-HTML elements are represented by tags
-HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
-Browsers do not display the HTML tags, but use them to render the content of the page.
▪
CSS:
-CSS stands for Cascading Style Sheets.
-CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
-CSS saves a lot of work. It can control the layout of multiple web pages all at once.
-External stylesheets are stored in CSS files.
▪
JavaScript:
JavaScript is a cross-platform, object-oriented scripting language used to make webpages
interactive (e.g. having complex animations, clickable buttons, popup menus, etc.). There
are also more advanced server side versions of JavaScript such as Node.Js which allow us
to add more functionality to a website than simply downloading files (such as real-time
collaboration between multiple computers). Inside a host environment (for example, a web
browser), JavaScript can be connected to the objects of its environment to provide
programmatic control over them.
▪
Bootstrap:
Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and
easier web development. It uses HTML, CSS and JavaScript.
Why Bootstrap?
-Mobile first approach − Bootstrap 3, framework consists of Mobile first styles
throughout the entire library instead them of in separate files.
-Browser Support − It is supported by all popular browsers.
-Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
-Easy to get started − With just the knowledge of HTML and CSS anyone can get started
with Bootstrap. Also the Bootstrap official site has a good documentation.
2.3 Tool Used
✓
✓
✓
✓
✓
Atom Code Editor.
Bracket Code Editor (If not familiar with Atom).
Version Control Platform (GitHub).
Browser install in PC like Google Chrome or Mozilla Firefox.
Internet connectivity to Live the game on GitHub server.
Chapter-3, PROJECT DETAIL
3.1 Development Strategy
It's very important that we plan our project before we start writing any code. Break our project
down into small pieces of work and plan out our approach to each one. It's much easier to debug
and fix an issue if we've only made a small change. It becomes much more difficult if we wait
longer to test our code.
Feel free to implement your own design workflow, but if anyone get stuck -- here are some
quick tips to get him/her up and running!
1.
Start by building a grid of cards. After all, the rest of your game's functionality depends
on this grid.
-How many total pairs of cards would we have?
-Which data structure can we use to store card symbols? How would we iterate (i.e., loop)
over this data structure?
-Think about how we can create, say, an unordered list (i.e., bulleted list) in HTML from
this structure. Recall some of the tools and methods we've learned to manipulate the DOM
• createElement()
• querySelector()
• getElementbyId()
• getElementsByClassName()
• appendChild()
• Document
Fig: Game Board with Cards
-Are your cards randomly placed onto the grid?
-Figure out the HTML needed to represent a card. Remember, you have to represent two
sides of the card, and the symbols are faced down
-How can you use CSS properties like transform or opacity to represent the sides
of a card?
Memory game USE Case Diagram
C 2. Add the functionality to handle clicks. This should reveal the "hidden" side of each card.
Clicking on the first card should turn it over, show the symbol, and remain turned over. Clicking
on a different card must also turn it over and show the symbol.
-Which event(s) are we listening for?
-How can that event affect CSS? Hint: what about a new CSS class?
3. Work on the matching logic. How does our game "know" if a player guesses correctly or
incorrectly?
-Think about how we can temporarily store the first opened card somewhere. After all, this
card needs to be compared to the next card turned over.
-How can we prevent the user from selecting the same card twice?
-If the two cards match, they stay turned over
-If the two cards do not match, they turn back
4. Create the winning condition. How does our game “know” if a player has won?
-our user should see a modal when the game ends
-What information can this modal show?
5. Implement additional functionality:
-Move counter. The game should display the number of moves the player has made.
-Timer (hint: how does setTimeout() come into play here?). This timer should start when
the player starts a game, and end when the player wins the game.
-Star rating. The player should begin with a certain number of stars displayed on the
screen. The number of moves made during the game should visually decrease this star
rating.
-Reset button. This should allow the player to reset the entire grid as well as all the above.
3.2 Creating Game Board
The whole structure of this game is highly responsive and as it is device independent this game
is adjust it’s size in different type of screen or aspect ratio.
To make game board basic structure I use HTML and CSS. No need to use unnecessary tags, it
makes more complicated to design the actual product. Make sure that we used sensible class or
ID names for CSS. Use the below meta tag and properties to make our design responsive.
SS:1 Use of <meta> tag for responsive design
3.3
Whenever start coding in html, always set header section first. Below
codes demonstrate how to set <header> and <meta> tags and their
properties.
In <meta> tag, by-default we set “initial-scale=1.0”
They are viewport meta tags, and is most applicable on mobile
browsers.
“width=device-width”
This means, we are telling to the browser “my website adapts to your
device width”.
“initial-scale”
This defines the scale of the website, This parameter sets the initial
zoom level, which means 1 CSS pixel is equal to 1 viewport pixel.
This parameter help when we're changing orientation, or preventing
default zooming. Without this parameter, responsive site won't work.
maximum-scale
Maximum-scale defines the maximum zoom. When we access
the website, top priority is maximum-scale=1, and it won’t
allow the user to zoom.
minimum-scale
Minimum-scale defines the minimum zoom. This works the same as
above, but it defines the minimum scale. This is useful, when
maximum-scale is large, and we want to set minimum- scale.
user-scalable
User-scalable assigned to 1.0 means the website is allowing the user
to zoom in or zoom out. But if we assign it to user-scalable=no, it
means the website is not allowing the user to zoom in or zoom out.
SS:2 <meta> & <header> tag code
Add CSS properties for deck. In this project, I have design this on a space theme, so the deck
colour I set to orange-yellow. For this the background is set to a linear-gradient where colour is
et according to the rgb property. Here, orange is set to 0% and yellow is set to 100%.
Now set the property for deck according the requirement to game. Here, I set “transform:
rotateY(0);”, “background: yellow;”, “cursor: default;” etc. Set the properties for card class
and for card open class also.
Use Case Diagram for Game Admin:-
Now creating score panel by setting its css property like “text-align, width, margins, display and
display the content” properties.
The timer & restart properties only
need their appearing properties
like padding and margins from
both the sides, colour and text
properties. The css codes are given
on right hand side, we can also
change these properties according
to the game design and
requirement.
Some times we don’t need to add
padding on both the sides.
3.4 POP-UP
When the game is
over, a pop-up will
appears on screen.
We can customize
the
pop-up
according to our
designing strategy,
it is up to us. Popup
plays
an
important role in
this project.
Every time the player ends the game this pop-up show him/ her their “a congratulation”
message and their score & time on screen. In this pop-up a button is placed whose functionality
is to bring the player back to the game for a new match.
Chapter-4, Start With JavaScript
4.1 Display the card on Page
Fig: Showing cards on game board
Now, what if when the game is end?
Whenever the game will end a popup is appear on screen, which shows score and time taken to
complete the game. And it also has a “Restart” button, by clicking on that button the game is
restart.
But the button also perform a special task i.e., it will reset the game card randomly and then
reset the game so that every time the player get randomly shuffle cards on game board.
To perform the reset functionality we need a function called “shuffle()” and a card generator
function called “generateCards()”. The below code will help to code for shuffle and generate the
card on game board.
4.2 Reset the Game
To Reset the card we have a reset
option on the top of the game
board. Its function is to reset the
card location every time when
click.
These functions help us to set the
working of the different elements
used in our project.
Reset option
4.3 A POP-UP
With the help of JavaScript we
can do anything like generating
Pop-Ups, Designing, Animate
the objects on webpage, and
many more.
Here, by this coding we are
going to create a popup comes
in functionality when the game
is End. We use showResults()
function for this.
4.4 Final Output
This is how our final product is look like. You can change the background according to you.
Here, I use a gif background rather than a single colour background. You can also change the
game board colour and card colour by making change in CSS files. If you have good CSS
knowledge then you don’t have to worry about the changes. Just go through this project and the
coding section you’ll find the known properties of CSS.
Summary of the Project
set up the event listener for a card. If a card is clicked:
•
•
•
•
•
•
•
display the card's symbol (put this functionality in another function that you call from this
one)
add the card to a *list* of "open" cards (put this functionality in another function that you
call from this one)
if the list already has another card, check to see if the two cards match
if the cards do match, lock the cards in the open position (put this functionality in another
function that you call from this one)
if the cards do not match, remove the cards from the list and hide the card's symbol (put this
functionality in another function that you call from this one)
increment the move counter and display it on the page (put this functionality in another
function that you call from this one)
if all cards have matched, display a message with the final score (put this functionality in
another function that you call from this one)
CONCLUSION
Working on the project was good experience. I understand the importance of Planning and
designing. The project has performed all the basic features, which are required to make the project
alive. I have tried to design a browser game, which can be used by the users to entertain
themselves. It also help those students who are new in frontend web development and searching
for projects to implement their knowledge and skills.
Bibliography or References
1. www.youtube.com
2. https://en.wikipedia.org/wiki/Matching_game
3. https://www.w3schools.com/
4. https://www.google.com/