Results 1 to 2 of 2

Thread: Concentration Game Help

  1. #1
    Join Date
    Feb 2012
    Location
    Ohio
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Concentration Game Help

    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();
     }

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •