Concentration Game Help [Archive] - Dynamic Drive Forums

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