1. Facebook WebShooter
Constantin Lucian Galea and Lidia Pomirleanu
Faculty of Computer Science, Iasi
Abstract. Facebook WebShooter is a game that can be played directly
within the browser. The targets (each worth a certain number of target
points and triggering a specific event) will have the image representations
of the player’s friends on Facebook. The player’s accumulated score will
be stored locally.
Keywords: first person shooter, object-oriented JavaScript, event-listeners,
HTTP requests, cookies
1 Introduction
Facebook WebShooter can be played directly in the browser (for the best ex-
perience we recommend Google Chrome, Internet Explorer 9). In order to play
the game the player must first login to Facebook. However, if the player has no
Facebook account or chooses not to login he can still play the game. Default
targets will appear instead of pictures of his Facebook friends.
The goal of the game is to hit as many targets as possible in the given
ammount of time. Every target has an associated score. The player can see the
current score and the timer in the lower part of the screen. The game finishes
when all targets have been hit, or when the time has run out. For every second
left in the timer the player’s final score increases. When the game finishes, the
player is asked to enter his/her name and if its final score is among the top 5
scores his/her name will be added in the Hall of Fame section.
The game was built entirely using orientated-object Javascript, XHTML and
CSS.
2 Project Structure
The structure of the project consists of:
TargetImage class - wrapper for the Facebook friend pictures.
Parent class - adds the Facebook pictures, handles the mouse click events.
TopScores class - handles and displys the top scores.
3 Facebook
In order to play the game and retrieve the profile pictures the player must login
to Facebook. However, users don’t need to fill a registration form or remember
2. 2 Facebook WebShooter
another username and password to use for palaying the game. As long as the
user is signed into Facebook, he/she is automatically signed into the game as
well.
3.1 Open Authentication
Facebook Platform uses OAuth 2.0 for authorization and authorization. In order
to do this we used the open source JavaScript SDK. The JavaScript SDK first
requires to get an App ID, then load the JavaScript SDK into the page and
initialize it with the appId, add finally add the Login Button to the page.
When the user logs into the site Facebook first authenticates the user, second
Facebook authenticates the website, lastly, the user explicitly authorizes the
game to access their information. This ensures that the user knows exactly what
data they are disclosing to the game. If the user clicks Allow, it will give the
game access to the requested information(friend’s profile picture). If the user
clicks, Don’t Allow the dialog will close and no information will be available
to the game, and the default targets will be displayed. Loading the JavaScript
SDK:
<html>
<head>
<title>Facebook Shooter</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:’YOUR_APP_ID’, cookie:true,
status:true, xfbml:true
});
</script>
</body>
</html>
Adding the LoginButton:
<html>
<head>
<title>Facebook Shooter</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:’YOUR_APP_ID’, cookie:true,
3. Facebook WebShooter 3
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
</body>
</html>
If the user is already logged to Facebook (he logged before accessing the game
webpage) the game starts automatically with the friends profile photos, if not,
default targets will be displayed.
3.2 Retrieving Profile Pictures
If the user is loged in to Facebook the targets will be respresented by the profile
picture of his Facebook friends. All the functions for retrieving profile pictures
can be found in facebook.js (getPictures(), parsePictures(), addLocalPictures()).
The pictures are retrieved using Facebook Javascript JDK. If the response is un-
defined the local default targets are used, otherwise a number of profile facebook
pictures are used.
myself.getPictures = function()
{
FB.api(’/me/friends/’, {fields: "picture"}, function(response)
{
if (response.data != undefined) myself.parsePictures(response);
else myself.addLocalPictures();
});
}
The parsePictures() function parses the JSON response received from Face-
book:
myself.parsePictures = function(response)
{
for (var i = 0; i < myself.numberPictures; i++)
{
myself.parent.addPicture(response.data[i].picture, "picture" + i, 10 * i);
}
myself.parent.start();
}
The addLocalPictures() function adds the pictures to the game container:
myself.addLocalPictures = function()
{
for (var i = 0; i < myself.numberPictures; i++)
{
4. 4 Facebook WebShooter
myself.parent.addPicture("images/target.png", "picture" + i, 10 * i);
}
myself.parent.start();
}
The checkPosition() function is responsible for handling the position of the
pictures. If the current horizontal position is bigger than the parent width the
picture starts moving left, if the vertical position of the picture bigger than the
parent’s height the picture starts moving down.
myself.checkPosition = function()
{
if (myself.x + myself.xModifier + myself.widthValue > myself.maximumX )
{
myself.xModifier = - Math.round(Math.random() * 11);
while (myself.xModifier == 0) myself.xModifier = - Math.round(Math.random() * 11);
return;
}
if (myself.x + myself.xModifier < 0)
{
myself.xModifier = Math.round(Math.random() * 11);
while (myself.xModifier == 0) myself.xModifier = Math.round(Math.random() * 11);
return;
}
if (myself.y + myself.yModifier + myself.heightValue > myself.mamimumY)
{
myself.yModifier = - Math.round(Math.random() * 11);
while (myself.yModifier == 0) myself.yModifier = - Math.round(Math.random() * 11);
return;
}
if (myself.y + myself.yModifier < 0)
{
myself.yModifier = Math.round(Math.random() * 11);
while (myself.yModifier == 0) myself.yModifier = Math.round(Math.random() * 11);
return;
}
}
4 Local Score Storage
The top five scores are stored locally in the Hall of Fame table. When successfully
finishing the game the user is asked to enter his/her name, and if his/her final
score is bigger than the top five scores his/her name and score will be added in
the Hall of Fame table. The top five scores are stored locally in the browser using
5. Facebook WebShooter 5
cookies. All the function used for storing and handling cookies can be found in
scoreManager.js in the js folder (the methods are loadScores(), checkScores(),
insert(), saveScores())
If there are no cookies saved, default entries are created and interted in the
scores and names Arrays. If there are, the loadScores() functions will load the
cookies in the Hall of Fame table in decreasing order.
The loadScores() function:
myself.loadScores = function()
{
for (var i = 1; i <= 5; i++)
{
var score, name;
if ($.cookie("player" + i) == null)
{
score = 0;
name = "player" + 1;
}
else
{
score = parseInt($.cookie("player" + i).split("%%%")[1], 10);
name = $.cookie("player" + i).split("%%%")[0];
}
myself.scores.push(score);
myself.names.push(name);
}
myself.checkScore();
}
When the user successfully ends the game and enters his/her name the
checkScore() function compares the current score with the existing ones, and
if the score is among the top five the insertScore() function will add the score
on the appropriate possition in the Hall of Fame table.
The checkScore() function:
myself.checkScore = function()
{
if (myself.score >= myself.scores[0])
{
myself.insert(0);
return;
}
for (var i = 0; i < 4; i++)
{
if (myself.scores[i] > myself.score && myself.scores[i + 1] <= myself.score)
6. 6 Facebook WebShooter
{
myself.insert(i + 1);
return;
}
}
}
The insertScore() function:
myself.insert = function(position)
{
for (var i = 4; i > position; i--)
{
myself.scores[i] = myself.scores[i - 1];
myself.names[i] = myself.names[i - 1];
}
myself.scores[position] = myself.score;
myself.names[position] = myself.name;
myself.saveScores();
}
Finally, the saveScores() function creates and stores the new cookie:
myself.saveScores = function()
{
for (var i = 0; i < 5; i++)
{
$.cookie("player" + (i + 1), myself.names[i] + "%%%" + myself.scores[i]);
}
}
