1 Replies - 2493 Views - Last Post: 16 March 2011 - 02:05 PM

#1 jeepguy1988  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 11-September 09

Concentration Game with multiple errors

Posted 16 March 2011 - 12:40 PM

Hey everyone, Iím working on a project for school for a concentration game. I believe that the code given by my professor is wrong and am currently getting an issue with the setOpacity function where the error is telling me that style is either null or not an object. Also Iím not getting any feedback where the pictures are supposed to flip. Am I even on the right track and does anybody have any advice to point me in the correct direction. Help me figure out, donít just give me the answer, I want to learn. 

Tiles.js
 /*Filename: tiles.js


   Global Variables
   flipCount
      Used to track the number of tiles currently being turned over

   firstFlip
      Used to reference the first tile turned over

   secondFlip
      Used to reference the second tile turned over


   Functions
  
   addEvent(object, evName, fnName, cap)
      Run the function fnName when the event evName occurs in object.

   randomSort(arr)
      Randomly sorts the contents of the arr array.

   setOpacity(object, value)
      Sets the opacity level of object to value

   setupTiles()
      Sets up the tiles for use in the Concentration game

   flipTile()
      Flips a tile showing the image associated with the tile

   checkTiles(tile1, tile2)
      Checks whether the tile1 image source is the same as the
      tile2 image source

   flipBack()
      Flips back flipped over tiles and resets the flipCount
      variable to 0.

   



*/
//global variables
var flipCount = 0;
var firstFlip;
var secondFlip;

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

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;

}

function setupTiles()
{
	var tiles = new Array();
	var tileImages = new Array();


	for(var i = 0; i < document.images.length; i++)
	{
		var tile = document.images[i];
		if (tile.className == "tile" && tile.parentNode.tagName == "A") 
		{
			tiles.push(tile); 
		}
	} 
	
	for(var i=0; i <= tiles.length; i++)
	{
		if( i < tiles.length/2) 
		{
			var aImage = new Image(); 
			aImage.src = "tileimage" + i + ".jpg";
			tileImages.push(aImage);
		}

		if (i >= tiles.length/2) 
		{
			var bImage = new Image(); 
			bImage.src = "tileimage" + i + ".jpg"; 
			tileImages.push(bImage); 
		}
	} 

	
	randomSort(tileImages);
	
	for (i = 0; i < tileImages.length; i++)
	{
		var y = 0;
		
		if (y > (tileImages.length/2))
		{
			y = 0;
		}
		
		tileImages[i].image = new Image();
		tileImages[i].image = tiles[i];
	}
	
	for (i = 0; i < tiles.length; i++)
	{
		tiles[i].onclick = flipTile();	
	}
	
	document.ct.showAll.onclick = function() {
		for (var i = 0; tiles.length; i++)
		{
			tiles[i] = tileImages[i].image;
		}
	}
	
	document.ct.reload.onclick = location.reload();
}

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

function checkTiles()
{
	if (firstFlip == secondFlip)
	{
		flipCount = 0;
		
		setOpacity(firstFlip, 70);
		
		setOpacity(secondFlip, 70);
		
		firstFlip.onclick = function(){return false};
		secondFlip.onclick = function(){return false};
		
	}
	
	else
		window.setTimeout("flipBack()", 800);
	
}

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



Tiles.htm
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
     Filename:         tiles.htm
   Supporting files: kg.css, kgmenu.css, kgtitle.jpg, tile.jpg,
                     tileimage0.jpg - tileimage7.jpg, tiles.js

-->

   <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 ∑
      A safe site on the Web for kids and families
   </address>
   </div>

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




Is This A Good Question/Topic? 0
  • +

Replies To: Concentration Game with multiple errors

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3485
  • View blog
  • Posts: 10,043
  • Joined: 08-June 10

Re: Concentration Game with multiple errors

Posted 16 March 2011 - 02:05 PM

note on addEvent(): there is no event capturing in IE, thus if you define a capturing event, it will be actually bubbling in IE which may throw off your whole application (e.g. if you need to cancel the event at that stage)

the events on lines #125 & #135 are declared wrong (might work in IE, though), I dimly remember there was an event handling function named addEvent() for you to be used.

I think that’s the reason your code fails in standard compliant browsers … (it’s a scope issue, window has no style)

This post has been edited by Dormilich: 16 March 2011 - 02:11 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1