PDA

View Full Version : 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


<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


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.