index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <!--
   3  * Copyright (c) 2012, Intel Corporation.
   4  *
   5  * This program is licensed under the terms and conditions of the
   6  * Apache License, version 2.0.  The full text of the Apache License is at
   7  * http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9 -->
  10 <html>
  11 <head>
  12     <meta id="viewport_meta" name="viewport" content="" />
  13     <script type="text/javascript">
  14         var viewport_meta = document.getElementById('viewport_meta');
  15         var w = screen.availWidth;
  16         var h = screen.availHeight;
  17         viewport_meta.setAttribute('content','width='+w+', height='+h+',user-scalable=no');
  18     </script>
  19
  20     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  21     <title>Ten Frame</title>
  22     <link rel="stylesheet" type="text/css" href="css/main.css"></link>
  23     <link rel="stylesheet" type="text/css" href="css/license.css"></link>
  24     <link rel="stylesheet" type="text/css" href="css/help.css"></link>
  25 </head>
  26 <body>
  27     <div id="home_page" class="game_page">
  28         <div id="home_bg"></div>
  29         <div id="home_pirates"></div>
  30         <div id="home_pirates_text">PIRATE RESCUE</div>
  31         <div id="home_rockets"></div>
  32         <div id="home_rockets_text">ROCKET LAUNCH</div>
  33         <div id="home_bowling"></div>
  34         <div id="home_bowling_text">BOWLING ALLEY</div>
  35         <div id="licensebtnl"> i </div>
  36         <div id="home_help" class="helplaunch"> ? </div>
  37     </div>
  38     <div id="help_dialog" class="helpdialog">
  39          <div class="inner">
  40            <div id="help_close" class="close"> x </div>
  41            <div id="help_contents" class="contents">
  42 Have fun while learning counting and math in these three mini-games!<br>
  43 <ul><li>
  44 PIRATES GAME: Save the stranded pirates in Pirate Rescue!
  45 Count enough pirates for each rescue ship until they’re all saved!
  46 </li>
  47 <li>
  48 ROCKETS LAUNCH: Help the rockets take off for the stars in Rocket Ship!
  49 Add and subtract fuel cells until the rockets are all fueled up and ready to go!
  50 </li>
  51 <li>
  52 BOWLING ALLEY: Try for strikes in Bowling Alley! Can you add up your score at the end?
  53 </li></ul>
  54 If you want to try another game, or start the current one over, just click the down arrow in the top right corner. Click Home to choose another game, or + to try your current game again.
  55            </div>
  56          </div>
  57     </div>
  58     <div id="licensepage" style="display: none">
  59         <div id="licensetext"><div id="licensescroll"></div></div>
  60         <div id="licensebtnq" class="licensebtn">Back</div>
  61     </div>
  62     <div id="pirates_page" class="game_page" style="display: none">
  63         <div id="pirates_bg1" class="pirates_bg"></div>
  64         <div id="pirates_island"></div>
  65         <div id="pirates_ship_distant"></div>
  66         <div id="pirates_msg1" class="msg_default">There are <b></b> pirates on the island.<br>Help load them onto ships.</div>
  67         <div id="pirates_msg2" class="msg_default">This ship can hold <b></b> more pirates.<br>Drag the pirates to the ship.</div>
  68         <div id="pirates_msg3" class="msg_default">Good Job! We'll be back for more.</div>
  69         <div id="pirates_msg4" class="msg_default">Good Job! All pirates are rescued.</div>
  70         <div id="pirates_ship">
  71             <div id="pirates_slots"></div>
  72             <div id="pirates_saved"></div>
  73         </div>
  74         <div id="pirates_stranded" class="stranded"></div>
  75         <div id="pirates_waves"></div>
  76     </div>
  77     <div id="pirates_win_page" class="game_page" style="display: none">
  78         <div id="pirates_bg2" class="pirates_bg"></div>
  79         <div id="pirates_msg5" class="winmsg1">Great job!</div>
  80         <div id="pirates_msg6" class="winmsg2">You rescued <b></b> pirates in 4 boats.</div>
  81         <div id="pirates_boat1" class="pirates_boat"></div>
  82         <div id="pirates_boat2" class="pirates_boat"></div>
  83         <div id="pirates_boat3" class="pirates_boat"></div>
  84         <div id="pirates_boat4" class="pirates_boat"></div>
  85         <div id="pirates_grid1" class="pirates_grid"></div>
  86         <div id="pirates_grid2" class="pirates_grid"></div>
  87         <div id="pirates_grid3" class="pirates_grid"></div>
  88         <div id="pirates_grid4" class="pirates_grid"></div>
  89     </div>
  90     <div id="rockets_page" class="game_page" style="display: none">
  91         <div class="rockets_bg"></div>
  92         <div id="rockets_fuellight"></div>
  93         <div id="rockets_rocket">
  94             <div id="rocket_flame"></div>
  95             <div id="rocket_body"></div>
  96             <div id="rockets_fueltarget"></div>
  97         </div>
  98         <div id="rockets_fueldepot"></div>
  99         <div id="rockets_fueltank"></div>
 100         <div id="rockets_fuelguage"></div>
 101         <div class="rockets_bottle bottle1">
 102             <div id="rockets_add4" class="rockets_plus"></div>
 103             <div id="rockets_subtract4" class="rockets_minus"></div>
 104             <div class="rockets_drop bdrop1"></div>
 105             <div class="rockets_drop bdrop2"></div>
 106             <div class="rockets_drop bdrop3"></div>
 107             <div class="rockets_drop bdrop4"></div>
 108         </div>
 109         <div class="rockets_bottle bottle2">
 110             <div id="rockets_add3" class="rockets_plus"></div>
 111             <div id="rockets_subtract3" class="rockets_minus"></div>
 112             <div class="rockets_drop bdrop1"></div>
 113             <div class="rockets_drop bdrop2"></div>
 114             <div class="rockets_drop bdrop3"></div>
 115         </div>
 116         <div class="rockets_bottle bottle3">
 117             <div id="rockets_add2" class="rockets_plus"></div>
 118             <div id="rockets_subtract2" class="rockets_minus"></div>
 119             <div class="rockets_drop bdrop1"></div>
 120             <div class="rockets_drop bdrop2"></div>
 121         </div>
 122         <div class="rockets_bottle bottle4">
 123             <div id="rockets_add1" class="rockets_plus"></div>
 124             <div id="rockets_subtract1" class="rockets_minus"></div>
 125             <div class="rockets_drop bdrop1"></div>
 126         </div>
 127         <div id="rockets_smoke">
 128             <div id="rocket_smoke1"></div>
 129         </div>
 130         <div id="rockets_msg1a" class="msg_default">
 131         The rocket tells you how<br>much fuel it needs.
 132         </div>
 133         <div id="rockets_msg1b" class="msg_default">
 134         Click the fuel tanks on the left to add the right amount of fuel.
 135         </div>
 136         <div id="rockets_msg1c" class="msg_default">
 137         Click '+' to add fuel and click '–' to remove fuel.
 138         </div>
 139         <div id="rockets_msg1d" class="msg_default">
 140         When you’ve added the right amount, the light turns green and your rocket takes off!
 141         </div>
 142         <div id="rockets_msg1e" class="msg_default">
 143         Don’t go over or the light turns red!
 144         </div>
 145
 146         <div id="rockets_status">
 147             <div id="rocketicon1" class="rocketicon"></div>
 148             <div id="rocketicon2" class="rocketicon"></div>
 149             <div id="rocketicon3" class="rocketicon"></div>
 150             <div id="rocketicon4" class="rocketicon"></div>
 151             <div id="rocketicon5" class="rocketicon"></div>
 152             <div id="rockets_msg2">You've launched <b></b> of 5 rockets</div>
 153         </div>
 154     </div>
 155     <div id="rockets_win_page" class="game_page" style="display: none">
 156         <div class="rockets_bg"></div>
 157         <div id="rockets_msg3" class="winmsg1">Great job!</div>
 158         <div id="rockets_msg4" class="winmsg2">You launched <b>5</b> rockets.</div>
 159         <div id="rockets_mini1" class="rockets_mini"></div>
 160         <div id="rockets_mini2" class="rockets_mini"></div>
 161         <div id="rockets_mini3" class="rockets_mini"></div>
 162         <div id="rockets_mini4" class="rockets_mini"></div>
 163         <div id="rockets_mini5" class="rockets_mini"></div>
 164     </div>
 165     <div id="bowling_page" class="game_page" style="display: none">
 166         <div id="bowling_bg"></div>
 167         <div id="bowling_scorecard">
 168             <div id="bowling_inset">Game <n>1</n> of 5</div>
 169             <div id="bowling_label1" class="bowling_label">FIRST THROW</div>
 170             <div id="bowling_label2" class="bowling_label">SECOND THROW</div>
 171             <div id="bowling_label3" class="bowling_label">SUM</div>
 172             <div id="bowling_scoregrid"></div>
 173             <div id="bowling_val1" class="bowling_val"></div>
 174             <div id="bowling_val2" class="bowling_val"></div>
 175             <div id="bowling_val3" class="bowling_val"></div>
 176         </div>
 177         <div id="bowling_numbertray"></div>
 178         <div id="bowling_woodbg">
 179             <div id="bowling_msg1" class="bowling_msg"><b>Get ready to bowl!</b><br>1. Wait for the ball to line up just right<br>2. Click "Roll the ball"</div>
 180             <div id="bowling_msg2" class="bowling_msg"><b>Well done!</b><br>You scored<br><n>5</n><br>on your first throw.<br>Click "Roll the ball" again<br>for your second throw.</div>
 181         </div>
 182         <div id="bowling_lane">
 183             <div id="bowling_pin1shadow" class="bowlingpinshadow"></div>
 184             <div id="bowling_pin2shadow" class="bowlingpinshadow"></div>
 185             <div id="bowling_pin3shadow" class="bowlingpinshadow"></div>
 186             <div id="bowling_pin4shadow" class="bowlingpinshadow"></div>
 187             <div id="bowling_pin5shadow" class="bowlingpinshadow"></div>
 188             <div id="bowling_pin6shadow" class="bowlingpinshadow"></div>
 189             <div id="bowling_pin7shadow" class="bowlingpinshadow"></div>
 190             <div id="bowling_pin8shadow" class="bowlingpinshadow"></div>
 191             <div id="bowling_pin9shadow" class="bowlingpinshadow"></div>
 192             <div id="bowling_pin10shadow" class="bowlingpinshadow"></div>
 193             <div id="bowling_pin1" class="bowlingpin"></div>
 194             <div id="bowling_pin2" class="bowlingpin"></div>
 195             <div id="bowling_pin3" class="bowlingpin"></div>
 196             <div id="bowling_pin4" class="bowlingpin"></div>
 197             <div id="bowling_pin5" class="bowlingpin"></div>
 198             <div id="bowling_pin6" class="bowlingpin"></div>
 199             <div id="bowling_pin7" class="bowlingpin"></div>
 200             <div id="bowling_pin8" class="bowlingpin"></div>
 201             <div id="bowling_pin9" class="bowlingpin"></div>
 202             <div id="bowling_pin10" class="bowlingpin"></div>
 203             <div id="bowling_ball_rolling" style="opacity: 0"></div>
 204             <div id="bowling_ball"></div>
 205         </div>
 206         <div id="bowling_rollbutton">Roll the ball</div>
 207         <div id="bowling_overlay"></div>
 208         <div id="bowling_dialog_container"></div>
 209         <div id="bowling_dialog">
 210             <div id="bowling_correct" class="dialogtext"><b>Great job!</b><br>You chose the right answer!<br>You have <n></n> more games to go.</div>
 211             <div id="bowling_incorrect" class="dialogtext"><b>Oops.</b><br>You chose the wrong answer.<br>Try again!</div>
 212             <div id="bowling_next" class="dialogbtn">Continue</div>
 213             <div id="bowling_tryagain" class="dialogbtn">Try Again</div>
 214             <div id="bowling_quit" class="dialogbtn">Quit</div>
 215         </div>
 216     </div>
 217     <div id="bowling_win_page" class="game_page" style="display: none">
 218         <div id="bowling_rawbg"></div>
 219         <div id="bowling_msg3"><b>Great job!</b><br>You played <b>5</b> games.</div>
 220         <div id="bowling_mini1" class="bowling_mini"></div>
 221         <div id="bowling_mini2" class="bowling_mini"></div>
 222         <div id="bowling_mini3" class="bowling_mini"></div>
 223         <div id="bowling_mini4" class="bowling_mini"></div>
 224         <div id="bowling_mini5" class="bowling_mini"></div>
 225     </div>
 226     <div id="game_menu_border" style="display: none">
 227         <div id="game_menu">
 228             <div id="game_menu_new">NEW GAME</div>
 229             <div id="game_menu_home">MAIN MENU</div>
 230             <div id="game_menu_tab"></div>
 231             <div id="game_menu_button"></div>
 232         </div>
 233     </div>
 234     <audio class="pirate_bgloop" loop="loop" preload="auto"><source src="audio/ocean.ogg" type="audio/ogg" /></audio>
 235     <script src="js/jquery-1.7.2.min.js"></script>
 236     <script src="js/license.js"></script>
 237     <script src="js/help.js"></script>
 238     <script src="js/animation.js"></script>
 239     <script src="js/main.js"></script>
 240     <script src="js/sound.js"></script>
 241     <script src="js/pirates.js"></script>
 242     <script src="js/rockets.js"></script>
 243     <script src="js/bowling.js"></script>
 244 </body>
 245 </html>