Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
201 lines (193 sloc) 11.1 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
* Copyright (c), 2012 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* Apache License, version 2.0. The full text of the Apache License is at
* http://www.apache.org/licenses/LICENSE-2.0
*
-->
<html>
<head>
<meta name="viewport" content="width=device-width target-densitydpi=device-dpi initial-scale=1 maximum-scale=1 user-scalable=0" />
<title id="appName" class="i18n"></title>
<link rel="stylesheet" type="text/css" href="css/mancala.css" />
<link rel="stylesheet" type="text/css" href="css/license.css"></link>
<script src="js/license.js"></script>
<script language="Javascript" src="js/mancala.js" type="text/javascript"></script>
<script language="Javascript" src="js/getMessage.js" type="text/javascript"></script>
<script language="Javascript" src="js/sound.js" type="text/javascript"></script>
<div id="audio">
<audio id="sound-fillpit" src="audio/PiecesFillPocket.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-bonus" src="audio/Bonus.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-gamewin" src="audio/GameWin.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-pickup" src="audio/PickUpPieces.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-pointscore" src="audio/PointScore.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-singlepiecefullpit" src="audio/SinglePieceIntoFilledPocket.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-singlepieceemptypit" src="audio/SinglePieceIntoPocket.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-singlepieceswoosh" src="audio/SinglePieceIntoPocket_SpecialSwoosh.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-intro" src="audio/IntroPlayMusic.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
<audio id="sound-buttonclick" src="audio/ButtonClick.ogg" preload="auto" autobuffer type="audio/ogg"></audio>
</div>
</head>
<body onload="init()">
<div id="licensepage" style="display: none">
<iframe id="licensetext" src="README.txt"></iframe>
<div id="licensebtnu" class="licensebtn">&uarr;</div>
<div id="licensebtnd" class="licensebtn">&darr;</div>
<div id="licensebtnq" class="licensebtn">Back</div>
</div>
<div id="screen">
<img class="divider-first" src="images/MANCALA-start_divider_line.gif" alt="First Divider" />
<input="button" id="one-player-icon_toggleleft" ></input="button">
<p class="one-player" id="one-player_toggleleft" alt="One Player Text" ></p>
<input="button" id="toggle_left" onclick="toggleNumberOfPlayers()" alt="Toggle" ></input="button">
<input="button" id="two-player-icon_toggleleft" ></input="button">
<p class="two-player" id="two-player_toggleleft" alt="Two Player Text" ></p>
<img class="divider-second" src="images/MANCALA-start_divider_line.gif" alt="Second Divider" />
<h3 class="marble-count" ></h3>
<button class="marble-buttons" id="three-marbles" onclick="setMarbleCount(3)">3</button>
<button class="marble-buttons" id="four-marbles" onclick="setMarbleCount(4)">4</button>
<button class="marble-buttons" id="five-marbles" onclick="setMarbleCount(5)">5</button>
<button class="marble-buttons" id="six-marbles" onclick="setMarbleCount(6)">6</button>
<h3 class="sound" ></h3>
<button class="sound-buttons" id="on" onclick="setSound(1)"></button>
<button class="sound-buttons" id="off" onclick="setSound(0)"></button>
<img class="divider-third" src="images/MANCALA-start_divider_line.gif" alt="Third Divider" />
<button class="start-button" onclick="startGamePressed()"></button>
<div id="licensebtnl" style="top: 550px; left: 716px;"> i </div>
</div>
<div id="screen-game">
<div id="top">
<input="button" class="restart" onclick="restartClicked()" alt="Reload Button"></input="button">
<input="button" class="settings" onclick="settingsClicked()" alt="Settings Button"></input="button">
<input="button" class="help" onclick="helpClicked()" alt="Help Button"></input="button">
</div>
<div id="center">
<div id="smoke-screen"></div>
<div id="settings-dialog">
<div class="settings-border">
<h1 class="settings-title"></h1>
<h3 class="settings-return_text"></h3>
<h3 class="settings-border-x" onclick="closeSettings()">X</h3>
<p class="settings-sound"></p>
<button id="sound-on" onclick="setSoundGame(1)"></button>
<button id="sound-off" onclick="setSoundGame(0)"></button>
<p class="commentary"></p>
<button class="commentary-buttons" id ="commentary_on" onclick="setCommentary(1)"></button>
<button class="commentary-buttons" id ="commentary_off" onclick="setCommentary(0)"></button>
</div>
</div>
<div id="help-dialog">
<div class="help-border">
<h1 class="help-title"></h1>
<h3 class="help-return_text"></h3>
<h3 class="help-border-x" onclick="closeHelp()">X</h3>
<div class="help-dialog_instructions">
Capture more marbles than your opponent!
<br><br>
The Mancala board has six small pits along the top and bottom of the board. The pits along the top belong to player one and the bottom pits belong to player two. On both sides of the board, there is a big pit, called a store. The one on the left belongs to player one and the one on the right belongs to player two.
<br><br>
At the beginning of the game, choose how many marbles are placed in each of the 12 smaller pits: 3, 4, 5, or 6.
<br><br>
The game begins when Player One selects a pit on the top of the board. All of the marbles in that pit are redistributed, one-by-one, in a counter-clockwise pattern, in each subsequent pit, until the marbles run out. When the marbles are redistributed, if they make it to your store, a marble will be added there, too, but if they make it to your opponent&#8217;s store, no marble will be added.
<br><br>
If the last marble distributed in your turn lands in your own store, you get an extra turn.
<br><br>
If the last marble distributed in your turn lands in an empty pit on your side, that marble and any marbles in the pit directly opposite go directly to your store.
<br><br>
The game ends when someone runs out of marbles in the pits on their side. All of the other player&#8217;s remaining marbles move to his store. The winner is the player with the most marbles in their store.
</div>
</div>
</div>
<div id="endgame-dialog">
<div class="endgame-border">
<img class="endgame-crown" src="images/MANCALA-game_winner_crown.png" alt="Crown"/>
<h1 id="endgame-wintext"></h1>
<div class="endgame-divider"></div>
<h1 class="endgame-start-new"></h1>
<button class="option-buttons no" onclick="setOption(0)"></button>
<button class="option-buttons yes" onclick="setOption(1)"></button>
</div>
</div>
<div id="restart-dialog">
<div class="restart-border">
<h1 class="restart-start-new"></h1>
<button class="restart-buttons no" onclick="setRestart(0)"></button>
<button class="restart-buttons yes" onclick="setRestart(1)"></button>
</div>
</div>
<div class="player1-score" onclick="player1TabClicked()"><p id="player1-score_text"></p></div>
<div class="player2-score" onclick="player2TabClicked()"><p id="player2-score_text"></p></div>
<img class="game-layout" src="images/MANCALA-game_bg_combined.jpg" alt="Game Layout" />
<input="button" id="logo" alt="Game Logo" ></input="button">
<input="button" id="logo_blank" alt="Game Logo Blank" ></input="button">
<p id="instructions" class="commentary-game"></p>
<img id="turn-arrow_p1" src="images/MANCALA-game_turn_arrow1a.png" alt="Player1 Turn Arrow"/>
<img id="turn-arrow_p2" src="images/MANCALA-game_turn_arrow2a.png" alt="Player2 Turn Arrow" />
<img id="pit0" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_0"/>
<img id="pit1" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_1"/>
<img id="pit2" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_2"/>
<img id="pit3" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_3"/>
<img id="pit4" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_4"/>
<img id="pit5" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_5"/>
<input="button" id="pit6_store"/></input="button">
<img id="pit7" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_7"/>
<img id="pit8" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_8"/>
<img id="pit9" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_9"/>
<img id="pit10" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_10"/>
<img id="pit11" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_11"/>
<img id="pit12" src="images/MANCALA-game_pit_highlight.png" usemap="#pit_12"/>
<img id="pit13_store"></input="button">
<p class="pit-count_p1_text" id="pit5_count"></p>
<p class="pit-count_p1_text" id="pit4_count"></p>
<p class="pit-count_p1_text" id="pit3_count"></p>
<p class="pit-count_p1_text" id="pit2_count"></p>
<p class="pit-count_p1_text" id="pit1_count"></p>
<p class="pit-count_p1_text" id="pit0_count"></p>
<p class="pit-count_p2_text" id="pit7_count"></p>
<p class="pit-count_p2_text" id="pit8_count"></p>
<p class="pit-count_p2_text" id="pit9_count"></p>
<p class="pit-count_p2_text" id="pit10_count"></p>
<p class="pit-count_p2_text" id="pit11_count"></p>
<p class="pit-count_p2_text" id="pit12_count"></p>
</div>
</div>
<map name="pit_0" id="pit_0"/>
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(0, true)" alt="pit_0"/>
</map>
<map name="pit_1" id="pit_1">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(1, true)" alt="pit_1"/>
</map>
<map name="pit_2" id="pit_2">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(2, true)" alt="pit_2"/>
</map>
<map name="pit_3" id="pit_3">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(3, true)" alt="pit_3"/>
</map>
<map name="pit_4" id="pit_4">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(4, true)" alt="pit40"/>
</map>
<map name="pit_5" id="pit_5">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(5, true)" alt="pit_5"/>
</map>
<map name="pit_7" id="pit_7">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(7, true)" alt="pit_7"/>
</map>
<map name="pit_8" id="pit_8">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(8, true)" alt="pit_8"/>
</map>
<map name="pit_9" id="pit_9">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(9, true)" alt="pit_9"/>
</map>
<map name="pit_10" id="pit_10">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(10, true)" alt="pit_10"/>
</map>
<map name="pit_11" id="pit_11">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(11, true)" alt="pit_11"/>
</map>
<map name="pit_12" id="pit_12">
<area shape="circle" coords="60, 72, 60" onclick="pitSelected(12, true)" alt="pit_12"/>
</map>
</body>
</html>