CONCENTRATION-PAIRS GAME

A Dissertation submitted to
Jawaharlal Nehru Technological University, Hyderabad
In partial fulfillment of the requirements for the award of the degree of
BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE AND ENGINEERING
By
D.SRIKANTH REDDY
(11N31A0549)

Under the esteemed guidance of

Mr.M.VAZRALU
(Associate Professor)
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
MALLAREDDY COLLEGE OF ENGINEERING AND
TECHNOLOGYMAISAMMAGUDA, DHULAPALLY,SECUNDERABAD-500040.
2011 - 15.

MALLAREDDY COLLEGE OF ENGINEERING AND

TECHNOLOGYMAISAMMAGUDA, DHULAPALLY,SECUNDERABAD-500040.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that Dissertation entitled CONCENTRATION-PAIRS GAME is a

bonfire work done by D.SRIKANTH REDDY bearing 11N31A0549 under my guidance and
supervision and is submitted to Jawaharlal Nehru Technological University, Hyderabad in
partial fulfillment of requirements for the award of Bachelor Of Technology in Computer
Science and Engineering during the academic year 2014-2015.

Mr.M.VAZRALU

Mr.M.SAIDI REDDY

Assoc. Professor (CSE )

HOD (CSE)

(Internal guide)

EXTERNAL EXAMINER

INDEX

TITLE

PAGENO

Title page
College certificate
Declaration.................................................................... i
Acknowledgement.......................................................... ii
Abstract......................................................................... iii

1. INTRODUCTION ...
1
2. GAME OVERVIEW ... 2
2.1 GAME DESCRIPTION
2.1.1 Environment

2.2 Game Rules

2.3 User Interface
3. GAME DESIGN 7
3.1 Viewing and Objects
3.1.1 Game Scene

4. SOURCE CODE
5. RESULTS ..
6. CONCLUSION

DECLARATION

9
15
18

We hereby declare that the project entitled CONCENTRATION-PAIRS

GAME submitted to Malla Reddy College of Engineering and Technology, affiliated to
Jawaharlal Nehru Technology University, Hyderabad for award of Degree of Bachelor of
Technology in Computer Science and Engineering is a result of original research work done
by us.
It is further declared that the project report or any part thereof has not been
previously submitted to any university for the award of degree of diploma.

D.SRIKANTH REDDY

ACKNOWLEDGEMENT

It plunges us in exhilaration in taking privilege in expressing our heartfelt

gratitude to all those who helped, encouraged and supported us in successful completion of our
project. We express sincere thanks and gratitude to our internal guide Mr.M.VAZRALU, faculty,

Computer Science and Engineering Department, Malla Reddy College of Engineering and
Technology for his encouragement, support and guidance in carrying out the project.
We wish to convey our sincere thanks to Dr.V.S.K. Reddy (principal) Malla Reddy
College of Engineering and Technology and Prof. M. SAIDI REDDY(HOD- Malla Reddy
College of Engineering and Technology) and other teaching and non-teaching staff who directly
or indirectly contributed their assistance in finishing out this project successfully.
We take pride in forwarding the gratitude and wishes to our parents and friends who have
given us moral support and helped us in successful completion of our project.

D.SRIKANTH REDDY

ii

ABSTRACT
The goal of our project is to design a concentration game which works on any
Browser which is JAVA SCRIPT ENABLED. For our Project, we decided to design a game,
where the objective of the game is to identify the identical numbers which are embedded in the
blocks within the specific time. The game is designed in HTML.As a result, we have created a
game that is fun and helps in scope of increasing memory power.

iii

1. INTRODUCTION
Pairs, also known as Concentration, Memory cards, Pexeso etc. are a simple
card game, where player must find two identical cards. This game is great for memory
training and good to kill some time for kids and adults. Concentration is a card game in
which all of the cards are laid face down on a surface and two cards are flipped face up
over each turn. The object of the game is to turn over pairs of matching cards.
Concentration can be played with any number of players or as solitaire and is an

especially good game for young children, though adults may find it challenging and
stimulating as well. The scheme is often used in quiz shows and can be employed as
an educational game.Nevertheless.Our goal is to show developers how to create an easy
game like this with only a few lines of code for many mobile operation systems.

2. GAME OVERVIEW

2.1 GAME DESCRIPTION

The object of the game is to turn over pairs of matching cards. Concentration can be
played with any number of players or as solitaire and is an especially good game for young
children, though adults may find it challenging and stimulating as well. The scheme is often used

in quiz shows and can be employed as an educational game.Nevertheless.Our goal is to show

developers how to create an easy game like this with only a few lines of code for many mobile
operation systems.
2.1.1 ENVIRONMENT
This game can be run in any platform i.e. either desktop or mobile (supported) containing
a browser. The required Environments for running for this game are:
CODE EDITOR
BROWSER
CODE EDITOR
First we need a code editor.
There are many around, but the one you choose should support:
1. Syntax highlighting
2. Auto complete
If you are using a code editor already, then make sure it supports JavaScript. Some editors may
require additional plug-in.
Lightweight editors
A lightweight editor may not be as powerful as an IDE, but it is fast and easy.

NotePad++
2

Browser:
All supported browsers should be installed. Current trend is that browsers tend to
support standards and implementations converge, although there are differences.
You need at least: Firefox, Chrome and Internet Explorer.

2.2 Game Rules

Each turn, one card are flipped over. After turning two cards, if the cards do not
match, they are both turned back face down. If the cards match, they are left face up and the
person who made the match receives a point.
With a regular deck of cards, the pair is considered the card with the same color and number (so
the ace of hearts matches the ace of diamonds).
Concentration can be played with regular playing cards or with special themed cards. It can be
played by 1, 2, 3 or 4 people. More than 4 people can be divided into teams.
It's a terrific game for young children to play and can be done with educational sets of cards
(flash cards and the like). The winner is the person with the most pairs, and there may be a tie for
first place.

2.3 User Interface

By now, applications are being developed at rapid pace and it usually comes down to
offering a user-friendly interface to earn customers loyalty. Our game application consists of

tool bar with only two buttons (close and new game) and timer. Main part of our application is a
grid with twenty four cards. The cards are uncovering with a nice 2D effect.
Many of these may be played in combination with one another:

Any Color: A version especially good for young children where matching pairs need
only be of the same rank, not the same color. When playing with jokers, these count double
because they are more difficult to match.

One Flip: Players who make a successful pair win these cards but do not go again until
their next turn.

Zebra: Pairs may only be formed by cards of the same rank, but opposite in color (so 7
of diamonds would match with a 7 of clubs or spades, but not a 7 of hearts)

Two Decks: For a much longer game, shuffle together two 52-card decks and lay them
out in 8 rows of 13 cards (9 rows of 12 cards if using jokers). Pairs must be identical (same
rank and same suit, so the 10 of clubs would have to match the other 10 of clubs).

Two Decks Duel: Duel is a two-player game where the playing field is divided into two
separate parts. Each player shuffle a full 52-card deck and lay it out in 4 rows of 13 cards.
The players cannot access each other's cards. Player one starts, flipping one card face-up,
then player two selects one card from his/her own side. If the pair is a match, cards are
removed, if not, they are flipped back. Pairs must be identical (same rank and same suit, so
the 10 of clubs would have to match the other 10 of clubs). After every turn roles are
exchanged, in this case: player two flips a card and player one answers.

Double Decker Checkerboard: For a slightly easier version of the two-pack game, use
decks with different backs and shuffle them separately. Deal them out in a
checkerboard pattern (red, blue, red, blue, etc.) The different backs help identify the position
in the grid and significantly reduce the possibility of which cards will match.

Fancy: The cards need not be laid out in a strict rectangular grid and many players have
their own special layouts that include circular, triangular, or diamond-shaped formations.
Dealers may select any layout they wish.

Concentration is not limited to playing cards. Many versions of the game that are
designed for children may have different themes. In some computer versions, the cards may
randomly move to increase the difficulty.

Figure 1

Figure 2
6

3. GAME DESIGN

3.1 Viewing and Objects:

The game is a 2D view in general. The objects used in this game 4x4 square
boxes and digits from 1 to 12.

Figure 3

The player has given a time limit, with in that time limit the player needs to finish the
game. if player fails to match the pairs then he will be given an option of exit and restart. Initially
the player needs to select a block, there certain number will be displayed and the number will be
vanished. Likewise player needs to select another blocks. The player has to remember the
position of the numbers. Then player needs to form a pair of similar numbers. If player provides
correct input then the similar numbers will be displayed, Likewise player needs to search the pair
of similar numbers with in the given time limit.

7
3.1.1. GAME SCENE
The game scene is made of only one scene in our game. This scene has two layers,
first which creates all cards and second which shows time.

Figure 4

4. SOURCE CODE
STYLE.CSS

/* CSS Document */
#memory_board{
background:GREEN;
border: green 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
#memory_board > div{
background:url(../images/checkerd.jpg) no-repeat;
border:1px solid #000;
width:71px;height:71px;float:left;
margin:10px;
9
padding:20px;
font-size:64px;
cursor:pointer;

text-align:center;
}
MEMORYBOARD.JS

// JavaScript Document

var memory_array = ['1','1','2','2','3','3','4','4','5','5','6','6','7','7','8','8','9','9','10','10','11','11','12','12'];

var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
var max_time = 50;
var cinterval;

Array.prototype.memory_tile_shuffle = function()
{
var i = this.length, j, temp;
while(--i > 0)
{
j = Math.floor(Math.random() * (i+1));
temp = this[j];this[j] = this[i];
10
this[i] = temp;
}
}

function countdown_timer(){
// decrease timer
max_time--;
document.getElementById('countdown').innerHTML = max_time;
if(max_time == 0)
{
alert("TIME UP Game Over");
clearInterval(cinterval);
document.getElementById('memory_board').innerHTML = "";
newBoard();
location.reload();
}

}
// 1,000 means 1 second.
cinterval = setInterval('countdown_timer()', 1000);

function newBoard()
{

11
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();

for(var i = 0; i < memory_array.length; i++)

{
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]
+'\')"></div>'
}
document.getElementById('memory_board').innerHTML = output;
}

function memoryFlipTile(tile,val)
{
if(tile.innerHTML == "" && memory_values.length < 2)
{
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0)
{
memory_values.push(val);
memory_tile_ids.push(tile.id)
}
else if(memory_values.length == 1)
{memory_values.push(val);
12
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1])
{

tiles_flipped +=2;
memory_values = [];
memory_tile_ids = [];
if(tiles_flipped == memory_array.length)
{
alert("Good Job. Play Again.");
document.getElementById('memory_board').innerHTML =
"";
newBoard();
}

}
else
{
function flip2Back()
{var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background='url(images/checkerd.jpg) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(images/checkerd.jpg) no-repeat';
13
tile_2.innerHTML = "";
memory_values = [];
memory_tile_ids = [];

}
setTimeout(flip2Back, 700);
}
}
}
}

INDEX.HTML

<html>
<head>
<title>Memory Game</title>
<link href="css/style.css" rel="stylesheet"
type="text/css">
<script type="text/javascript"
src="javascript/memoryboard.js"></script></head>
<body bgcolor="#FFE4C4"><div id="memory_board"></div><script>newBoard();</script>
<script>countdown_timer();</script><p><H1><font
color="#EA4A5A"><CENTER>YOUR
GAME
WILL
END
IN
<span
id="countdown">50</span>
SECONDS.</CENTER></font></H1></p> </body> </html>

14

5. RESULTS

Figure 5

15

Figure 6

16

Figure 7

17

6. CONCLUSION
This game is great for memory training and good to kill some time for kids and
adults. Concentration is a card game in which all of the cards are laid face down on a surface
and two cards are flipped face up over each turn. The object of the game is to turn over pairs of
matching cards. Concentration can be played with any number of players or as solitaire and is an
especially good game for young children, though adults may find it challenging and stimulating
as well. The scheme is often used in quiz shows and can be employed as an educational
game.Nevertheless.Our goal is to show developers how to create an easy game like this with
only a few lines of code for many mobile operation systems .Now you know how to create your
own Puzzle game, which can be easily adapted to your requirements by only changing the
images or number of cards.

18