js/pirates.js

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 function Pirates() {
  11     "use strict";
  12
  13     var pirates_msg2pi;
  14     var pirates_msg2p;
  15     var pirates_msg2si;
  16     var pirates_msg2s;
  17     var sounds = {};
  18     var data;
  19     var timership;
  20     var accel;
  21     var curTransform;
  22     var dragging;
  23     var dragobj;
  24     var grabX;
  25     var grabY;
  26     var grabLeft;
  27     var grabTop;
  28
  29     /* need position and time to calculate acceleration */
  30     function accelData(x, y, t) {
  31         this.x = x;
  32         this.y = y;
  33         this.t = t;
  34     }
  35
  36     /* acceleration calculator object for draggable pirate */
  37     function acceleration() {
  38         this.data = new Array();
  39         this.timer = null;
  40
  41         /* set the initial state to zero */
  42         this.init = function init(x, y) {
  43             for(var i = 0; i < 10; i++)
  44             {
  45                 this.data.push(new accelData(x, y, new Date().getTime()));
  46             }
  47         };
  48
  49         /* queue up the last 10 move events */
  50         this.update = function update(x, y) {
  51             for(var i = 9; i > 0; i--)
  52                 this.data[i] = this.data[i-1];
  53             this.data[0] = new accelData(x, y, new Date().getTime());
  54         };
  55
  56         /* calculate acceleration in the x direction */
  57         this.dx = function dx(t) {
  58             var dt = t-this.data[0].t;
  59             if(dt > 100)
  60                 return(0);
  61             else
  62                 return(this.data[0].x - this.data[9].x);
  63         };
  64
  65         /* calculate acceleration in the y direction */
  66         this.dy = function dy(t) {
  67             var dt = t-this.data[0].t;
  68             if(dt > 100)
  69                 return(0);
  70             else
  71                 return(this.data[0].y - this.data[9].y);
  72         };
  73     }
  74
  75     /* initiate a pirate toss with the given initial velocity */
  76     function pirateToss(id, dx, dy) {
  77         $(id).addClass("flying");
  78
  79         /* get the starting position of the pirate */
  80         var startX = parseInt($(id).css("left"));
  81         var startY = parseInt($(id).css("top"));
  82         var t = 0;
  83         var x = startX;
  84         var y = startY;
  85
  86         /* set the boundaries for where the pirate can go */
  87         var minX = -81;
  88         var maxX = 1024;
  89         var maxY = 460;
  90
  91         /* calculate the fall animation one frame at a time */
  92         var timer = setInterval(function() {
  93             /* if the pirate has exceeded the X boundaries, bounce it the other way */
  94             var nx = x + (dx/10);
  95             if((nx < minX)||(nx > maxX))
  96                 dx *= -1;
  97
  98             /* calculate the next x, dx has no acceleration */
  99             x += (dx/10);
 100             /* calculate the next y, dy is accelerated by gravity */
 101             y = startY + ((dy/10)*t)+(t*t);
 102             t++;
 103             var slot = data.boatidx[data.currboat];
 104             if((x >= 560)&&(y >= 398)&&(slot < 10)&&(data.input))
 105             {
 106                 /* landed on the ship */
 107                 if(x > (maxX - 81)) x = maxX - 81;
 108
 109                 /* adjust for ship div */
 110                 x -= 560;
 111                 if($(id).hasClass("redpirate1"))
 112                     y = 398;
 113                 else if($(id).hasClass("greenpirate1"))
 114                     y = 402;
 115                 else if($(id).hasClass("bluepirate1"))
 116                     y = 406;
 117
 118                 /* adjust for ship div */
 119                 y -= 93;
 120
 121                 /* kill the fly animation */
 122                 clearInterval(timer);
 123                 $(id).removeClass("flying");
 124
 125                 /* add a green dot to the next spot */
 126                 var slotid = "#pirates_slot"+(slot+1);
 127                 data.boatidx[data.currboat]++;
 128                 var remain = 10 - slot - 1;
 129                 $(slotid).addClass("green");
 130
 131                 /* update the ship can hold message count */
 132                 if(remain > 1)
 133                 {
 134                     $("#pirates_msg2").html(pirates_msg2p);
 135                     $("#pirates_msg2 b").html(remain.toLocaleString());
 136                 }
 137                 else
 138                     $("#pirates_msg2").html(pirates_msg2s);
 139
 140                 /* move the pirate html over to the ship */
 141                 var piratehtml = $("#pirates_stranded "+id)[0];
 142                 $("#pirates_stranded "+id).remove();
 143                 $("#pirates_saved").append(piratehtml);
 144
 145                 /* set the location of the pirate on the ship */
 146                 $(id).css({ top: y, left: x});
 147                 $(id).removeClass("stranded");
 148                 $(id).addClass("saved");
 149
 150                 /* play a good noise */
 151                 sounds.goodnoise.play();
 152
 153                 if(slot == 9)
 154                 {
 155                     /* boat is full */
 156                     retrieveShip();
 157                     data.input = false;
 158                 }
 159             }
 160             else if((x >= minX)&&(y < maxY))
 161             {
 162                 /* still in the air */
 163                 if(x > maxX) x = maxX;
 164                 $(id).css({ top: y, left: x});
 165             }
 166             else
 167             {
 168                 /* hit the island */
 169                 if(y < 0) y = 0;
 170                 if(x < 0) x = 0;
 171                 if(y > maxY) y = maxY;
 172                 if(x > 560) x = 500;
 173                 $(id).css({ top: y, left: x});
 174                 $(id).removeClass("flying");
 175                 clearInterval(timer);
 176
 177                 /* play a bad noise */
 178                 sounds.badnoise.play();
 179             }
 180         }, 20);
 181     }
 182
 183     function GameData() {
 184         this.input = false;
 185         this.boat = new Array();
 186         this.currboat = 0;
 187         this.boatidx = new Array();
 188         this.total = 0;
 189
 190         /* starting positions for pirates on the island */
 191         this.pos = [[461, 474], [457, 387], [450, 295], [448, 201],
 192                     [459, 115], [472, 19],  [452, 429], [449, 343],
 193                     [441, 249], [439, 155], [459, 66],  [473, 516],
 194                     [458, 491], [450, 459], [439, 407], [432, 365],
 195                     [434, 325], [434, 275], [435, 219], [443, 180],
 196                     [452, 136], [449, 91],  [482, 47],  [475, 431],
 197                     [465, 359], [472, 285], [470, 212], [471, 124],
 198                     [484, 484], [482, 398], [478, 323], [486, 256],
 199                     [485, 166], [480, 84],  [485, 0],   [482, 536],
 200                     [481, 441], [489, 291], [487, 128], [481, 207]];
 201
 202         /* we want 4 different random values for the boats */
 203         var num = new Array();
 204         var i;
 205         for(i = 1; i <= 10; i++)
 206         {
 207             num.push(i);
 208         }
 209
 210         for(i = 0; i < 4; i++)
 211         {
 212             var target = (Math.random() * num.length)|0;
 213             var val = parseInt(num.splice(target, 1));
 214             this.boat[i] = val;
 215             this.boatidx[i] = 10 - val;
 216             this.total += val;
 217         }
 218     }
 219
 220     /* slide the pirate ship off screen */
 221     function retrieveShip() {
 222         $("#pirates_msg2").removeClass("show");
 223         $("#pirates_ship").removeClass("slide");
 224         data.currboat++;
 225         if(data.currboat < 4)
 226         {
 227             $("#pirates_msg3").addClass("show");
 228             timership = setTimeout(function () {sendShip();}, 6000);
 229         }
 230         else
 231         {
 232             $("#pirates_msg4").addClass("show");
 233             timership = setTimeout(function () {endPirates();}, 4000);
 234         }
 235         sounds.pirate_shipslide.play();
 236     }
 237
 238     /* slide the pirate ship on screen */
 239     function sendShip() {
 240         $("#pirates_saved").empty();
 241         var idx = data.currboat;
 242         for(var i = 0; i < 10; i++)
 243         {
 244             var id = "#pirates_slot"+(i+1);
 245             $(id).removeClass("green");
 246             $(id).removeClass("red");
 247             if(i < data.boatidx[idx])
 248                 $(id).addClass("red");
 249             else
 250                 $(id).removeClass("red");
 251         }
 252         if(data.boat[idx] > 1)
 253         {
 254             $("#pirates_msg2").html(pirates_msg2pi);
 255             $("#pirates_msg2 b").html(data.boat[idx].toLocaleString());
 256         }
 257         else
 258             $("#pirates_msg2").html(pirates_msg2si);
 259
 260         $("#pirates_msg1").removeClass("show");
 261         $("#pirates_ship").addClass("slide");
 262         $("#pirates_msg2").addClass("show");
 263         $("#pirates_msg3").removeClass("show");
 264         $("#pirates_msg4").removeClass("show");
 265         timership = setTimeout(function () {data.input = true;}, 4000);
 266         sounds.pirate_shipslide.play();
 267     }
 268
 269     /* all 4 ships filled, end the game */
 270     function endPirates() {
 271         for(var i = 0; i < 40; i++)
 272         {
 273             var id = "#pirates_mslot"+(i+1);
 274             var total = 10 - data.boat[(i/10)|0];
 275
 276             $(id).removeClass("green");
 277             $(id).removeClass("red");
 278             if((i%10) < total)
 279                 $(id).addClass("red");
 280             else
 281                 $(id).addClass("green");
 282         }
 283
 284         $("#pirates_page").hide();
 285         $("#pirates_win_page").show();
 286         sounds.pirate_arr.play();
 287     }
 288
 289     function close() {
 290         reset();
 291         sounds.pirate_bgloop.stop();
 292         $("#pirates_page").hide();
 293         $("#pirates_win_page").hide();
 294         $("#game_menu_border").hide();
 295         $("#home_page").show();
 296     }
 297     this.close = close;
 298
 299     function reset() {
 300         if(timership)
 301             clearTimeout(timership);
 302         $("#pirates_msg1").removeClass("show");
 303         $("#pirates_msg2").removeClass("show");
 304         $("#pirates_msg3").removeClass("show");
 305         $("#pirates_msg4").removeClass("show");
 306         $("#pirates_stranded").empty();
 307         $("#pirates_ship").removeClass("slide");
 308         $("#pirates_saved").empty();
 309         $("#pirates_win_page").hide();
 310     }
 311
 312     function start() {
 313         $("#pirates_page").hide();
 314         reset();
 315         data = new GameData();
 316         $("#pirates_msg1 b").html(data.total.toLocaleString());
 317         $("#pirates_msg6 b").html(data.total.toLocaleString());
 318         sounds.pirate_saveus.play();
 319         sounds.pirate_bgloop.play();
 320         $("#home_page").hide();
 321         $("#game_menu_border").show();
 322         $("#pirates_page").show();
 323         var colors = ["red", "blue", "green"];
 324         /* create the pirates rotating through 3 colors */
 325         for(var i = 0; i < data.total; i++)
 326         {
 327             var color = colors[i%3];
 328             var top = data.pos[i][0];
 329             var left = data.pos[i][1];
 330             var piratehtml = "<div id=\"pirate"+(i+1)+
 331                 "\" class=\""+color+"pirate1 draggable_pirate stranded\""+
 332                 " style=\"top: "+top+"px; left: "+left+"px;\">"+
 333                 "<div class=\""+color+"piratelarm\"></div>"+
 334                 "<div class=\""+color+"piraterarm\"></div>"+
 335                 "<div class=\""+color+"piratebody\"></div>"+
 336                 "</div>";
 337             $("#pirates_stranded").append(piratehtml);
 338         }
 339         $("#pirates_msg1").addClass("show");
 340         timership = setTimeout(function () {sendShip();}, 5000);
 341
 342         /* pirates page handlers */
 343         $("#pirates_page .draggable_pirate").mousedown(function(e){
 344             if(!data.input)
 345                 return;
 346
 347             var id = "#"+e.currentTarget.id;
 348             if($(id).hasClass("flying"))
 349                 return;
 350
 351             sounds.pirate_arr.play();
 352             accel = new acceleration;
 353             curTransform = new WebKitCSSMatrix(window.getComputedStyle(document.body).webkitTransform);
 354             if(isrotated)
 355                 accel.init(e.clientY, 0 - e.clientX);
 356             else
 357                 accel.init(e.clientX, e.clientY);
 358             dragging = id;
 359             dragobj = e.currentTarget;
 360             grabX = e.clientX;
 361             grabY = e.clientY;
 362             grabLeft = parseInt(e.currentTarget.style.left+0);
 363             grabTop = parseInt(e.currentTarget.style.top+0);
 364             $(dragging).css("z-index", 10);
 365         });
 366     }
 367     this.start = start;
 368
 369     function loadHtml()
 370     {
 371         var h = "";
 372
 373         /* load up slot tokens for the pirate ship */
 374         $("#pirates_slots").empty();
 375         for(var i = 1; i <= 10; i++)
 376         {
 377             h += "<div id=\"pirates_slot"+i+"\" class=\"pirates_slot\"></div>";
 378         }
 379         $("#pirates_slots").html(h);
 380
 381         /* load up slot tokens for the win page */
 382         for(var j = 1; j <= 4; j++)
 383         {
 384             $("#pirates_grid"+j).empty();
 385             h = "";
 386             for(var i = 1; i <= 10; i++)
 387             {
 388                 h += "<div id=\"pirates_mslot"+(i+((j-1)*10))+"\" class=\"pirates_mslot s"+i+"\"></div>";
 389             }
 390             $("#pirates_grid"+j).html(h);
 391         }
 392     }
 393
 394     function init()
 395     {
 396         setTimeout(loadHtml, 0);
 397         pirates_msg2pi = "This ship can hold <b></b> pirates."+
 398                                 "<br>Drag the pirates to the ship.";
 399         pirates_msg2p = "This ship can hold <b></b> more pirates."+
 400                                 "<br>Drag the pirates to the ship.";
 401         pirates_msg2si = "This ship can hold <b>1</b> pirate."+
 402                                 "<br>Drag him to the ship.";
 403         pirates_msg2s = "This ship can hold <b>1</b> more pirate."+
 404                                 "<br>Drag him to the ship.";
 405         if (window.chrome&&window.chrome.i18n)
 406         {
 407             $("#pirates_msg1").html(chrome.i18n.getMessage("pirates_msg1"));
 408             $("#pirates_msg2").html(chrome.i18n.getMessage("pirates_msg2p"));
 409             pirates_msg2pi = chrome.i18n.getMessage("pirates_msg2pi");
 410             pirates_msg2si = chrome.i18n.getMessage("pirates_msg2si");
 411             pirates_msg2p = chrome.i18n.getMessage("pirates_msg2p");
 412             pirates_msg2s = chrome.i18n.getMessage("pirates_msg2s");
 413             $("#pirates_msg3").html(chrome.i18n.getMessage("pirates_msg3"));
 414             $("#pirates_msg4").html(chrome.i18n.getMessage("pirates_msg4"));
 415         }
 416
 417         sounds.pirate_arr = new GameSound("audio/Tenframe_Pirates_Vo_SaveAPirate.ogg", 1);
 418         sounds.pirate_saveus = new GameSound("audio/Tenframe_Pirates_Vo_Intro.ogg", 1);
 419         sounds.pirate_bgloop = new GameSound("audio.pirate_bgloop", 0);
 420         sounds.pirate_shipslide = new GameSound("audio/shipslide.ogg", 1);
 421         sounds.goodnoise = new GameSound("audio/Bowling_CorrectAnswer.ogg", 1);
 422         sounds.badnoise = new GameSound("audio/Bowling_IncorrectAnswer.ogg", 1);
 423         sounds.pirate_bgloop.volume(0.3);
 424
 425         /* pirates page handlers */
 426         $("#pirates_page").mousemove(function(e){
 427             if(data.input&&dragging)
 428             {
 429                 if(isrotated)
 430                 {
 431                     var x = ((e.clientY - grabY)/curTransform.b) + grabLeft;
 432                     var y = ((e.clientX - grabX)/curTransform.c) + grabTop;
 433                     accel.update(e.clientY, 0 - e.clientX);
 434                     dragobj.style.left = x +"px";
 435                     dragobj.style.top = y +"px";
 436                 }
 437                 else
 438                 {
 439                     var x = ((e.clientX - grabX)/curTransform.a) + grabLeft;
 440                     var y = ((e.clientY - grabY)/curTransform.d) + grabTop;
 441                     accel.update(e.clientX, e.clientY);
 442                     dragobj.style.left = x + "px";
 443                     dragobj.style.top = y + "px";
 444                 }
 445             }
 446         });
 447
 448         $("#pirates_page").mouseup(function(e){
 449             if(dragging)
 450             {
 451                 var t = new Date().getTime();
 452                 pirateToss(dragging, accel.dx(t), accel.dy(t));
 453                 $(dragging).css("z-index", 1);
 454             }
 455
 456             dragging = undefined;
 457         });
 458
 459         $("#pirates_win_page").click(function(){
 460             close();
 461         });
 462     }
 463
 464     init();
 465 };