js/bowling.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 Bowling() {
  11     "use strict";
  12
  13     var bowling_correctp;
  14     var bowling_corrects;
  15     var bowling_correctz;
  16     var bowling_msg3 = [];
  17     var sounds = {};
  18     var rolling = false;
  19     var timerroll;
  20     var data;
  21
  22     /* the game data object for this game */
  23     function GameData() {
  24         this.input = false;
  25         this.pinpos = [53, 96, 140, 183, 75, 118, 162, 96, 140, 118];
  26         this.throws = [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]];
  27         this.answers = [true, true, true, true, true];
  28         this.throwidx = 0;
  29         this.gameidx = 0;
  30         this.gamethrow = function gamethrow(t) {
  31             if((t >= 2)||(t < 0))
  32                 return -1;
  33
  34             var throwidx = (t == undefined)?this.throwidx:t;
  35             var gameidx = this.gameidx;
  36             return this.throws[gameidx][throwidx];
  37         };
  38         this.getthrow = function getthrow(g, t) {
  39             if((g >= 5)||(t >= 2))
  40                 return -1;
  41
  42             var throwidx = (t == undefined)?this.throwidx:t;
  43             var gameidx = (g == undefined)?this.gameidx:g;
  44             return this.throws[gameidx][throwidx];
  45         };
  46         this.setthrow = function setthrow(val) {
  47             if(this.gameidx > 4 )
  48                 return;
  49
  50             this.throws[this.gameidx][this.throwidx] = val;
  51         };
  52         this.nextthrow = function nextthrow() {
  53             if(this.gameidx > 4)
  54                 return;
  55
  56             this.gameidx += this.throwidx;
  57             this.throwidx = (this.throwidx+1)%2;
  58             return;
  59         };
  60     }
  61
  62     /* called to close the app and repoen the home page */
  63     function close() {
  64         reset();
  65         $("#bowling_page").hide();
  66         $("#bowling_win_page").hide();
  67         $("#game_menu_border").hide();
  68         $("#home_page").show();
  69     }
  70     this.close = close;
  71
  72     /* called to stop any delayed events and return the app to starting position */
  73     function reset() {
  74         $("#bowling_win_page").hide();
  75         if(timerroll)
  76             clearTimeout(Pirates.timerstart);
  77         frameReset();
  78         rollReset();
  79         var val = 1;
  80         $("#bowling_inset n").html(val.toLocaleString());
  81     }
  82
  83     /* called to start or restart the game (from home menu or game menu) */
  84     function start() {
  85         reset();
  86         data = new GameData();
  87         $("#home_page").hide();
  88         $("#bowling_page").show();
  89         sounds.present.play();
  90     }
  91     this.start = start;
  92
  93     function showWinPage() {
  94         var correct = 0;
  95         for(var i = 1; i <= 5; i++)
  96         {
  97             var id = "#bowling_mini"+i;
  98             if(data.answers[i-1])
  99             {
 100                 correct++;
 101                 $(id).removeClass("red");
 102                 $(id).addClass("green");
 103             }
 104             else
 105             {
 106                 $(id).removeClass("green");
 107                 $(id).addClass("red");
 108             }
 109
 110             var t1 = data.getthrow(i-1, 0);
 111             var t2 = data.getthrow(i-1, 1);
 112             var s = t1 + t2;
 113             var j;
 114             $(id).empty();
 115             for(j = 1; j <= t1; j++)
 116                 $(id).append("<div class=\"bowlingpinmicro m1p"+j+"\"></div>");
 117             for(j = 1; j <= t2; j++)
 118                 $(id).append("<div class=\"bowlingpinmicro m2p"+j+"\"></div>");
 119             for(j = 1; j <= s; j++)
 120                 $(id).append("<div class=\"bowlingpinmicro m3p"+j+"\"></div>");
 121             $(id).append(
 122                 "<div class=\"bowling_mval v1\">"+t1.toLocaleString()+"</div>");
 123             $(id).append(
 124                 "<div class=\"bowling_mval v2\">"+t2.toLocaleString()+"</div>");
 125             $(id).append(
 126                 "<div class=\"bowling_mval v3\">"+s.toLocaleString()+"</div>");
 127         }
 128
 129         if(correct >= 5)
 130         {
 131             $("#bowling_msg3").html(bowling_msg3[0]);
 132         }
 133         else if(correct > 0)
 134         {
 135             $("#bowling_msg3").html(bowling_msg3[1]);
 136             $("#bowling_msg3 c").html(correct.toLocaleString());
 137         }
 138         else
 139         {
 140             $("#bowling_msg3").html(bowling_msg3[2]);
 141         }
 142         $("#bowling_win_page").show();
 143         sounds.present.play();
 144     }
 145
 146     /* called to calculate what pins are hit based on ball position at roll */
 147     /* and what direction they fly based on where the ball hit */
 148     function hitPins(rollpos, hitpos) {
 149         var pins;
 150         if(rollpos > 316)
 151             pins = [];
 152         else if(rollpos > 270)
 153             pins = [4];
 154         else if(rollpos > 245)
 155             pins = [4, 7];
 156         else if(rollpos > 230)
 157             pins = [3, 4, 7];
 158         else if(rollpos > 214)
 159             pins = [3, 4, 7, 9];
 160         else if(rollpos > 202)
 161             pins = [3, 4, 6, 7, 9];
 162         else if(rollpos > 190)
 163             pins = [2, 3, 4, 6, 7, 9];
 164         else if(rollpos > 178)
 165             pins = [2, 3, 4, 6, 7, 9, 10];
 166         else if(rollpos > 165)
 167             pins = [2, 3, 4, 6, 7, 8, 9, 10];
 168         else if(rollpos > 155)
 169             pins = [2, 3, 4, 5, 6, 7, 8, 9, 10];
 170         else if(rollpos > 145)
 171             pins = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 172         else if(rollpos > 140)
 173             pins = [2, 3, 4, 5, 6, 7, 8, 9, 10];
 174         else if(rollpos > 135)
 175             pins = [2, 3, 4, 6, 7, 8, 9, 10];
 176         else if(rollpos > 130)
 177             pins = [2, 3, 6, 7, 8, 9, 10];
 178         else if(rollpos > 120)
 179             pins = [2, 3, 6, 8, 9, 10]; // dead center
 180         else if(rollpos > 115)
 181             pins = [2, 3, 5, 6, 8, 9, 10];
 182         else if(rollpos > 110)
 183             pins = [1, 2, 3, 5, 6, 8, 9, 10];
 184         else if(rollpos > 105)
 185             pins = [1, 2, 3, 5, 6, 7, 8, 9, 10];
 186         else if(rollpos > 95)
 187             pins = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 188         else if(rollpos > 85)
 189             pins = [1, 2, 3, 5, 6, 7, 8, 9, 10];
 190         else if(rollpos > 72)
 191             pins = [1, 2, 3, 5, 6, 8, 9, 10];
 192         else if(rollpos > 60)
 193             pins = [1, 2, 3, 5, 6, 8, 10];
 194         else if(rollpos > 48)
 195             pins = [1, 2, 3, 5, 6, 8];
 196         else if(rollpos > 36)
 197             pins = [1, 2, 5, 6, 8];
 198         else if(rollpos > 20)
 199             pins = [1, 2, 5, 8];
 200         else if(rollpos > 5)
 201             pins = [1, 2, 5];
 202         else if(rollpos > -20)
 203             pins = [1, 5];
 204         else if(rollpos > -66)
 205             pins = [1];
 206         else
 207             pins = [];
 208
 209         data.setthrow(pins.length);
 210         for(var i = 0; i < pins.length; i++)
 211         {
 212            if(hitpos > data.pinpos[i])
 213                $("#bowling_pin"+pins[i]).addClass("flyleft");
 214            else
 215                $("#bowling_pin"+pins[i]).addClass("flyright");
 216         }
 217     }
 218
 219     /* triggered when the ball rolling animation is finished */
 220     function ballDoneRolling() {
 221         if(rolling)
 222         {
 223             rolling = false;
 224             $("#bowling_ball_rolling").css("opacity", "0");
 225             $("#bowling_ball_rolling").css("-webkit-transition", "-webkit-transform 0.1s linear");
 226             $("#bowling_ball_rolling").css("-webkit-transform", "translate(0px, 0px) scale(1)");
 227             var val = data.getthrow();
 228             if(data.throwidx == 0)
 229             {
 230                 $("#bowling_val1").html(val.toLocaleString());
 231                 $("#bowling_msg2 n").html(val.toLocaleString());
 232                 $("#bowling_page").addClass("state1");
 233                 timerroll = setTimeout(nextRoll, 1500);
 234                 var gval = data.gameidx+1;
 235                 $("#bowling_inset n").html(gval.toLocaleString());
 236             }
 237             else
 238             {
 239                 $("#bowling_val2").html(val.toLocaleString());
 240                 $("#bowling_page").addClass("state2");
 241             }
 242             for(var i = 1; i <= val; i++)
 243             {
 244                 var id = "#bowling_t"+(data.throwidx + 1)+"p"+i;
 245                 $(id).addClass("show");
 246             }
 247         }
 248     }
 249
 250     /* called when any watched element's animation ends */
 251     function webkitAnimationEnd(e) {
 252         if(e&&e.srcElement&&e.srcElement.id)
 253         {
 254             var id = e.srcElement.id;
 255             /* bowling pin animation has ended, hide it */
 256             if(id.startsWith("bowling_pin"))
 257             {
 258                 $("#"+id).hide();
 259             }
 260         }
 261     }
 262
 263     /* called when any watched element's animation starts */
 264     function webkitAnimationStart(e) {
 265         if(e&&e.srcElement&&e.srcElement.id)
 266         {
 267             var id = e.srcElement.id;
 268             /* bowling pin animation has started, hide its shadow */
 269             if(id.startsWith("bowling_pin"))
 270             {
 271                 $("#"+id+"shadow").hide();
 272             }
 273         }
 274     }
 275
 276     function rollReset() {
 277         for(var i = 1; i <= 10; i++)
 278         {
 279            $("#bowling_pin"+i).removeClass("flyleft flyright");
 280            $("#bowling_pin"+i).show();
 281            $("#bowling_pin"+i+"shadow").show();
 282         }
 283         $("#bowling_rollbutton").removeClass("active");
 284         $("#bowling_ball").show();
 285     }
 286
 287     /* called to reset the bowling lane and wait for a new throw */
 288     function nextRoll() {
 289         data.nextthrow();
 290         if(data.gameidx > 4)
 291             showWinPage();
 292         else
 293             rollReset();
 294     }
 295
 296     function frameReset() {
 297         $("#bowling_page").removeClass("state1 state2 state3");
 298         $("#bowling_val1").empty();
 299         $("#bowling_val2").empty();
 300         for(var j = 1; j <= 2; j++)
 301             for(var i = 1; i <= 10; i++)
 302             {
 303                 var id = "#bowling_t"+j+"p"+i;
 304                 $(id).removeClass("show");
 305             }
 306     }
 307
 308     /* called on ROLL THE BALL button click */
 309     function roll() {
 310         if($("#bowling_rollbutton").hasClass("active"))
 311             return;
 312
 313         rolling = true;
 314         $("#bowling_rollbutton").addClass("active");
 315         var pos = parseInt($("#bowling_ball").css("left"));
 316         $("#bowling_ball").hide();
 317         $("#bowling_ball_rolling").css("left", (pos-12)+"px");
 318         var dx = Math.floor(((110-pos)/125)*61);
 319         $("#bowling_ball_rolling").css("opacity", "1");
 320         $("#bowling_ball_rolling").css("-webkit-transition", "-webkit-transform 1.3s linear");
 321         $("#bowling_ball_rolling").css("-webkit-transform", "translate("+dx+"px, -224px) scale(0.4)");
 322         hitPins(pos, pos+dx);
 323         if((pos > 48)&&(pos <= 190))
 324             sounds.rollmany.play();
 325         else if((pos > -66)&&(pos <= 316))
 326             sounds.rollfew.play();
 327         else
 328             sounds.gutterball.play();
 329     }
 330
 331     function bowlingAnswer(val) {
 332         var idx = data.gameidx;
 333         var correct = data.gamethrow(0) + data.gamethrow(1);
 334         if(val == correct)
 335         {
 336             $("#bowling_dialog").removeClass("incorrect");
 337             $("#bowling_dialog").addClass("correct");
 338             sounds.correct.play();
 339             data.answers[idx] = true;
 340         }
 341         else
 342         {
 343             $("#bowling_dialog").removeClass("correct");
 344             $("#bowling_dialog").addClass("incorrect");
 345             sounds.incorrect.play();
 346             data.answers[idx] = false;
 347         }
 348         var gleft = 5 - idx - 1;
 349         if(gleft > 1)
 350         {
 351             $("#bowling_correct").html(bowling_correctp);
 352             $("#bowling_correct n").html(gleft.toLocaleString());
 353         }
 354         else if(gleft == 1)
 355             $("#bowling_correct").html(bowling_corrects);
 356         else
 357             $("#bowling_correct").html(bowling_correctz);
 358         $("#bowling_page").addClass("state3");
 359     }
 360
 361     function loadHtml()
 362     {
 363         var h = "";
 364
 365         /* load up the pins in the bowling scorecard */
 366         $("#bowling_scoregrid").empty();
 367         for(var i = 0; i < 20; i++)
 368         {
 369             var pin = "t"+(Math.floor(i/10)+1)+"p"+((i%10)+1);
 370             h += "<div id=\"bowling_"+pin+"\" class=\"bowlingpinmini\"></div>";
 371         }
 372         $("#bowling_scoregrid").html(h);
 373
 374         /* load up the number buttons in the answer tray */
 375         $("#bowling_numbertray").empty();
 376         for(var i = 0; i <= 20; i++)
 377         {
 378             h += "<div id=\"bowling_numbtn"+i+"\" class=\"bowlingnumbtn\">"+i+"</div>"
 379         }
 380         $("#bowling_numbertray").html(h);
 381         $(".bowlingnumbtn").click(function(){
 382             bowlingAnswer(parseInt(this.id.slice(14)));
 383         });
 384     }
 385
 386     function init()
 387     {
 388         setTimeout(loadHtml, 0);
 389         bowling_correctp = "<b>Great job!</b><br>You chose the right answer!"+
 390                                    "<br>You have <n></n> more games to go.";
 391         bowling_corrects = "<b>Great job!</b><br>You chose the right answer!"+
 392                                    "<br>You have <n>1</n> more game to go.";
 393         bowling_correctz = "<b>Great job!</b><br>You chose the right answer!"+
 394                                    "<br>You're done, continue to see your score.";
 395         bowling_msg3[0] = "<b>Great job!</b><br>"+
 396                           "You chose the correct answers for all <b>5</b> games.";
 397         bowling_msg3[1] = "<b>Pretty good!</b><br>"+
 398                           "You chose the correct answers for <c></c> of 5 games.";
 399         bowling_msg3[2] = "<b>Oops!</b><br>"+
 400              "You chose the wrong answers.<br>Don't worry, you'll do better next time.";
 401         if (window.chrome&&window.chrome.i18n)
 402         {
 403             $("#bowling_rollbutton").html(chrome.i18n.getMessage("bowling_rollbutton"));
 404             $("#bowling_msg1").html(chrome.i18n.getMessage("bowling_msg1"));
 405             $("#bowling_msg2").html(chrome.i18n.getMessage("bowling_msg2"));
 406             $("#bowling_msg3").html(chrome.i18n.getMessage("bowling_msg3"));
 407             $("#bowling_inset").html(chrome.i18n.getMessage("bowling_inset"));
 408             $("#bowling_label1").html(chrome.i18n.getMessage("bowling_label1"));
 409             $("#bowling_label2").html(chrome.i18n.getMessage("bowling_label2"));
 410             $("#bowling_label3").html(chrome.i18n.getMessage("bowling_label3"));
 411             $("#bowling_correct").html(chrome.i18n.getMessage("bowling_correctp"));
 412             bowling_correctp = chrome.i18n.getMessage("bowling_correctp");
 413             bowling_corrects = chrome.i18n.getMessage("bowling_corrects");
 414             bowling_correctz = chrome.i18n.getMessage("bowling_correctz");
 415             $("#bowling_incorrect").html(chrome.i18n.getMessage("bowling_incorrect"));
 416             $("#bowling_next").html(chrome.i18n.getMessage("bowling_next"));
 417             $("#bowling_tryagain").html(chrome.i18n.getMessage("bowling_tryagain"));
 418             $("#bowling_quit").html(chrome.i18n.getMessage("bowling_quit"));
 419         }
 420
 421         rolling = false;
 422         var elem = document.getElementById('bowling_ball_rolling');
 423         elem.addEventListener('webkitTransitionEnd', ballDoneRolling, false);
 424         for(var i = 1; i <= 10; i++)
 425         {
 426             elem = document.getElementById("bowling_pin"+i);
 427             elem.addEventListener('webkitAnimationEnd', webkitAnimationEnd, false);
 428             elem.addEventListener('webkitAnimationStart', webkitAnimationStart, false);
 429         }
 430         sounds.gutterball = new GameSound("audio/Bowling_BallMove.ogg", 1);
 431         sounds.rollmany = new GameSound("audio/Bowling_KnockOverPins_01.ogg", 1);
 432         sounds.rollfew = new GameSound("audio/Bowling_KnockOverPins_02.ogg", 1);
 433         sounds.present = new GameSound("audio/Bowling_PresentAnswer.ogg", 1);
 434         sounds.correct = new GameSound("audio/Bowling_CorrectAnswer.ogg", 1);
 435         sounds.incorrect = new GameSound("audio/Bowling_IncorrectAnswer.ogg", 1);
 436         $("#bowling_rollbutton").click(function(){roll();});
 437         $("#bowling_quit").click(close);
 438         $("#bowling_tryagain").click(function(){
 439             $("#bowling_page").removeClass("state3");
 440         });
 441         $("#bowling_next").click(function(){
 442             frameReset();
 443             nextRoll();
 444         });
 445         $("#bowling_win_page").click(function(){
 446             close();
 447         });
 448     }
 449
 450     init();
 451 };