Concentration Game Help

**championcyclones** · 05-02-2012, 04:29 PM

Working on a school project to create a concentration game using javascript. I have the htm page and the linked javascript page, but am receiving errors and the tiles do not 'flip'. Looking for some help and general guidance here...

Webpage

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Concentration Game</title>
   <link href="kg.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="tiles.js"></script>

</head>

<body>
   <form id="ct" action="">

   <div id="head">
      <img src="kgtitle.jpg" alt="Kiddergarden" />
   </div>
   <div id="menu">
      <img src="kgmenu.jpg" alt="" />
   </div>
   <div id="title">
      <img src="ctitle.jpg" alt="Matching Game" />
   </div>

   <div id="board">
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <br />
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <br />
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <br />
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
      <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
   </div>


   <div id="main">

      <p>Play the Concentration game! Click the tiles on the left and
         match pairs of identical images.
         <br /><br />
         Click the <b>Reload Tiles</b> 
         button below to randomize the position of the tiles and play 
         again.
         <br /><br />
         Click the <b>Show Tiles</b> button to view the 
         solution.
      </p>

   </div>

   <div id="controls">
      <p>
         <input type="button" value="Reload Tiles" id="reload" />
         <input type="button" value="Show Tiles" id="showAll" />
      </p>
   </div>

   <address>
      Kiddergarden &#183;
      A safe site on the Web for kids and families
   </address>
   </div>

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

javascript page

Code:

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

function randomSort(arr) {

   arr.sort(function () {
      return 0.5 - Math.random();
   })

}

function setOpacity(object, value) {


   // Apply the opacity value for IE and non-IE browsers
   object.style.filter = "alpha(opacity = " + value + ")";
   object.style.opacity = value/100;

}




/* Add new code below */

var flipCount = 0;
var firstFlip;
var secondFlip;

addEvent(window, "load", setupTiles, false);

function setupTiles() {
 var tiles = new Array();
 
	for (var i = 0; i < document.images.length; i++) {
 		var tileImg = document.images[i];

 		if (tileImg.className == "tile" && tileImg.parentNode.tagName == "A") {
 		tiles.push(tileImg);
 		}
 	}
 
var tileImages = new Array();
 	tileImages.length == tiles.length;
	 
	for (var i = 0; i < tileImages.slice(0, 7); i++) {
 		var imageObj = new Image();
 		imageObj.src = "tileimage" + [i] + ".jpg";
 	}
 
	for (var i = 8; i < tileImages.slice(8); i++) {
 		var imageObj = new Image();
 		imageObj.src = "tileimage" + [i] + ".jpg";
 	}
 
randomSort(tileImages);
 
	for (var i = 0; i < tiles.length; i++) {
 		tileImg.image = new Image();
 		tileImg.image = tileImg.src;

 		tileImg.onclick = flipTile();
 	}
 
}

function flipTile() {
 	if (flipCount == 0) {
 		this.src = tileImg.image.src;
 		firstFlip = this;
 		flipCount++;
	}
 	else if (flipCount == 1) 	
	{
 		this.src = tileImg.image.src;
 		secondFlip = this;
 		flipCount++;
 		checkTiles();
	}
 
	return false;
}

function checkTiles() {
 	if (firstFlip.image.src != secondFlip.image.src) {
 		setTimeout(flipBack(), 800);
 	} else {
		flipCount == 0;
 	filter: alpha(opacity = 70); opacity: 0.70;
 	firstFlip.onclick = function() {
 		return false
	}
 	secondFlip.onclick = function() {
 		return false
	}
 }
}

function flipBack() {
 	firstFlip.src = "tile.jpg";
 	secondFlip.src = "tile.jpg";
 	flipCount == 0;
}

document.getElementById("showAll").onclick = function() {
 	for (var i = 0; i < tiles.length; i++) {
 		tiles[i].src = tileImg.image.src;
 	}
 }
 
document.getElementById("reload").onclick = function() {
 location.reload();
 }

**ApacheTech** · 05-02-2012, 09:13 PM

I'm not sure if it will make a difference, but I know in the Greasemonkey scripts I write, you have to declare the functions before declaring the events linked to those functions.

Move your addEvent statements to the end of the script so that all functions they refer to are defined.

Thread: Concentration Game Help

Thread Tools

Search Thread

Concentration Game Help

Bookmarks

Bookmarks

Posting Permissions