Miscellany

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 5
   Case Problem 2

   Concentration Game
   Author: Amin Habbal
   Date:   08/02/09

   Filename:         tiles.htm
   Supporting files: ldown.gif, lup.gif, pback.jpg, pr.gif, premier.css, 
                     rdown.gif, rup.gif, slide00.jpg - slide11.jpg

-->

<title>The Concentration Game</title>
<link href="games.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tiles.js"></script>
<script text="text/javascript" >
var flipCount = 0;
var tile1
var tile2
function showAll() {
for ( var i=0; i <=15; i++) {
document.images.[i];
}
}
function flipBack() {
document.images[tile1].src = "tile.jpg";
document.images[tile2].src = "tile.jpg";
flipCount = 0;
}
function checkTiles() {
if (tile1 != tile2) {
setTimeout("flipback();",800);
}else {
flipCount = 0;
}
}

function flip(i) {
document.images[i] = tiles[0];
if (flipCount == 0) {
tile1 = i;
flipCount = 1;
}else {
tile2 = i;
checktiles();
}
}
</script>
</head>

<body>
<form action="">
<!-- Concentration Tiles -->
<div id="board">
  <a href="flip(0;"><img src="tile.jpg" alt="" /></a>
  <a href="flip(1);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(2);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(3);"><img src="tile.jpg" alt="" /></a>
<br />
  <a href="flip(4);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(5);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(6);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(7);"><img src="tile.jpg" alt="" /></a>
<br />
  <a href="flip(8);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(9);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(10);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(11);"><img src="tile.jpg" alt="" /></a>
<br />
  <a href="flip(12);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(13);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(14);"><img src="tile.jpg" alt="" /></a>
  <a href="flip(15);"><img src="tile.jpg" alt="" /></a>
</div>

<div id="main">
   <p id="title">
      <img src="logo.jpg" alt="Game Etc." />
   </p>
   <p>Play the Concentration game! Click the tiles on the left and
   match pairs of identical images. Click the <b>Reload Tiles</b> button 
   below to randomize the position of the tiles and play again. Click the 
   <b>Show Tiles</b> button to view the solution.</p>
  <p id="formp">
  <input type="button" value="Reload Tiles" onclick="" />&nbsp;&nbsp;
  <input type="button" value="Show Tiles" onclick="showAll();"/>
  </p>
</div>

</form>
</body>
</html>