Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

  • Be the first to comment

  • Be the first to like this


  1. 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, cookies1 IntroductionFacebook WebShooter can be played directly in the browser (for the best ex-perience we recommend Google Chrome, Internet Explorer 9). In order to playthe game the player must first login to Facebook. However, if the player has noFacebook account or chooses not to login he can still play the game. Defaulttargets will appear instead of pictures of his Facebook friends. The goal of the game is to hit as many targets as possible in the givenammount of time. Every target has an associated score. The player can see thecurrent score and the timer in the lower part of the screen. The game finisheswhen all targets have been hit, or when the time has run out. For every secondleft in the timer the player’s final score increases. When the game finishes, theplayer is asked to enter his/her name and if its final score is among the top 5scores his/her name will be added in the Hall of Fame section. The game was built entirely using orientated-object Javascript, XHTML andCSS.2 Project StructureThe 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 FacebookIn order to play the game and retrieve the profile pictures the player must loginto Facebook. However, users don’t need to fill a registration form or remember
  2. 2. 2 Facebook WebShooteranother username and password to use for palaying the game. As long as theuser is signed into Facebook, he/she is automatically signed into the game aswell.3.1 Open AuthenticationFacebook Platform uses OAuth 2.0 for authorization and authorization. In orderto do this we used the open source JavaScript SDK. The JavaScript SDK firstrequires to get an App ID, then load the JavaScript SDK into the page andinitialize 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, secondFacebook authenticates the website, lastly, the user explicitly authorizes thegame to access their information. This ensures that the user knows exactly whatdata they are disclosing to the game. If the user clicks Allow, it will give thegame access to the requested information(friend’s profile picture). If the userclicks, Don’t Allow the dialog will close and no information will be availableto the game, and the default targets will be displayed. Loading the JavaScriptSDK:<html> <head> <title>Facebook Shooter</title> </head> <body> <div id="fb-root"></div> <script src=""></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=""></script> <script> FB.init({ appId:’YOUR_APP_ID’, cookie:true,
  3. 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 gamewebpage) the game starts automatically with the friends profile photos, if not,default targets will be displayed.3.2 Retrieving Profile PicturesIf the user is loged in to Facebook the targets will be respresented by the profilepicture of his Facebook friends. All the functions for retrieving profile picturescan 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 facebookpictures are used.myself.getPictures = function(){FB.api(’/me/friends/’, {fields: "picture"}, function(response){if ( != 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([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. 4 Facebook WebShootermyself.parent.addPicture("images/target.png", "picture" + i, 10 * i);}myself.parent.start();} The checkPosition() function is responsible for handling the position of thepictures. If the current horizontal position is bigger than the parent width thepicture starts moving left, if the vertical position of the picture bigger than theparent’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 StorageThe top five scores are stored locally in the Hall of Fame table. When successfullyfinishing the game the user is asked to enter his/her name, and if his/her finalscore is bigger than the top five scores his/her name and score will be added inthe Hall of Fame table. The top five scores are stored locally in the browser using
  5. 5. Facebook WebShooter 5cookies. All the function used for storing and handling cookies can be found inscoreManager.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 thescores and names Arrays. If there are, the loadScores() functions will load thecookies 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 thecheckScore() function compares the current score with the existing ones, andif the score is among the top five the insertScore() function will add the scoreon 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. 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.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]);}}