I am hopelessly lost. Multiple errors.

Page 1 of 1

2 Replies - 369 Views - Last Post: 16 January 2013 - 04:52 AM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 02-October 12

I am hopelessly lost. Multiple errors.

Posted 15 January 2013 - 04:46 PM

I have been working at correcting this function for hours but I can't seem to get it right. I'm creating a minesweeper game with 5 different difficulties. on easy-expert, the game throws an error in firebug Firebug Screenshot. on beginner, however, no error is shown, but, indeed there is one. Nothing happens at all. I have absolutely no clue what's wrong. I've given up. I know it's a lot to ask, but can someone take a look at my code and inform me of anything that could be causing any issues and give suggestions on how to fix them? Some other things happen, too. the following are screenshots from each difficulty i firebug's DOM section. I will explain what's wrong with them.

cIndex should be a number. imgs shouldn't be undefined, it should have the value of mines identical values. indarr should have more values than it does. some others.

beginner

Easy

medium

hard

expert

most of the variables missing var statements in the code below are declared as global variables at the start of the program. THANK YOU FOR YOUR HELP!!! :bigsmile: 

function genMines() {
	var index;
	var tds = table.getElementsByTagName("td");
	indarr = [];
	indeces = [];
	//imgs = [];
	var o = 0;
	var q = 0;
	var cntr = 0;
	for(i=0, n; n = tds[i]; i++) {
		mineTDS.push(n);
	}
	var mineCount;
	for (mineCount=0;mineCount<mines;mineCount++) {
		for (o = 0;o<(hw*hw);o++) {
			/*do {
				index = Math.floor(Math.random()*((hw*hw)-1) + 0);
				checkIndex();
			}
			while (indarr.length<mines);*/
			indeces.push(o);
		}
		for (q = 0;q<mines;q++) {
			index = Math.floor(Math.random()*(indeces.length-1) + 0);
			indarr.push(indeces[index]);
			indeces.splice(index, 1);
		}
		for (cntr = 0;cntr<mines;cntr++) {
			cIndex = parseInt(indarr[cntr]);
			mineTDS[cIndex].onclick = function() {
				gameOver();
			};
			//mineTDS[cIndex].onclick = gameOver;
			var bomb = document.createElement("img");
			bomb.style.display = "none";
			bomb.setAttribute("src", "mine.png");
			mineTDS[cIndex].appendChild(bomb);
			indarr.splice(cIndex, 1);
			//tds[index].onclick = gameOver;
			//tds[index].className = (tdClass + " mined");
		}
	}
	imgs = table.getElementsByTagName("img");
}


Is This A Good Question/Topic? 0
  • +

Replies To: I am hopelessly lost. Multiple errors.

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: I am hopelessly lost. Multiple errors.

Posted 15 January 2013 - 11:49 PM

Ok I will try to make this as clear as I can. You are putting higher number values into indarr than you have spots in your mineTDS array I believe. So what is happening is that you are pulling out a value like "6" from indarr, setting cIndex to 6 and then using 6 to reference a cell in mineTDS even though it only has like 3 table cells in it (as an example).

Make sure that whatever numbers you have in indarr you have that number of table cells. Otherwise you will try to reference a cell that is not in your table and that is why you get the object undefined error.

Hope that makes sense. :)
Was This Post Helpful? 0
  • +
  • -

#3 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 02-October 12

Re: I am hopelessly lost. Multiple errors.

Posted 16 January 2013 - 04:52 AM

That can't be it. You see the part where it populates indeces then selects random values from it? Indeces is populated by multiplying the variable hw (height/width) by itself. That means that the amount of table cells in mineTDS cannot, or at least, should be equal to the highest value in indeces. I'll include the Javascript, HTML, and CSS for you so you can see what's happening for yourself.

Just in case you're unfamiliar with Minesweeper, what is supposed to happen when you click a mine is that all cells with a mine will display an image of a mine. If it matters, the one I used is here. I saved it as mine.png.

Here's the full HTML:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Minesweeper</title>
	<script src="minesweeper.js" type="text/javascript"></script>
	<link rel="stylesheet" href="minesweeper.css" type="text/css" />
</head>
<body>
	<div>
		<form id="form">
			<input type="radio" name="radio" value="1" onclick="clearTable();newGame(1);" /><label> - BEGINNER</label>
			<input type="radio" name="radio" value="2" onclick="clearTable();newGame(2);" /><label> - EASY</label>
			<input type="radio" name="radio" value="3" onclick="clearTable();newGame(3);" /><label> - MEDIUM</label>
			<input type="radio" name="radio" value="4" onclick="clearTable();newGame(4);" /><label> - HARD</label>
			<input type="radio" name="radio" value="5" onclick="clearTable();newGame(5);" /><label> - EXPERT</label>
		</form>
	</div>
	<div id="div2">
		<strong>Minesweeper</strong>
		<!--<table id="game">
		</table>-->
	</div>
</body>
</html>


Full JS:

var i, n, winloss, hw, mines, tdCounter, trCounter, tdClass;
// radios = document.getElementById("form").childNodes;
//table = document.getElementById("game");
var difficulty = "";
var table;
i=0;
winloss="";
tdCounter = 0;
var imgs;
var indarr = [];
var indeces = [];
var o = 0;
var mineTDS = [];
var cIndex;
function collectionToArray(collection)
{
	var ary = [];
	var z = 0;
	var len;
	for(z=0, len = collection.length; z < len; z++)
	{
		ary.push(collection[z]);
	}
	return ary;
}
function askNewGame() {
	alert("You " + winloss +" To play again, choose a difficulty.");
}
//var div = document.getElementById("div2");
function makeGame(hw, mines, tdClass) {
	table = document.createElement("table");
	table.id = "game";
	document.getElementById("div2").appendChild(table);
	for (trCounter=0;trCounter<hw;trCounter++) {
		var tr = table.insertRow(trCounter);
		tr.id = ("row" + trCounter.toString());
		for (tdCounter=0;tdCounter<hw;tdCounter++) {
			var td = document.getElementById(("row" + trCounter.toString())).insertCell(tdCounter);
			td.className = tdClass;
			td.innerHTML = "<strong></strong>";
			//document.getElementById("row" + trCounter.toString()).appendChild(td);
		}
	}
	genMines();
	/*if (tableChildren) {
		tableChildren = table.childNodes;
	}
	else {
		var tableChildren = table.childNodes;
	}*/
}

function newGame(difficulty) {
	switch (difficulty) {
		case 1:
		hw=5;
		mines=5;
		tdClass = "beginner";
		break;
		
		case 2:
		hw=7;
		mines=20;
		tdClass = "easy";
		break;
		
		case 3:
		hw=10;
		mines=25;
		tdClass = "medium";
		break;
		
		case 4:
		hw=20;
		mines=100;
		tdClass = "hard";
		break;
		
		case 5:
		hw=30;
		mines=450;
		tdClass = "expert";
		break;
	}
	makeGame(hw, mines, tdClass);
}
function gameOver() {
	var e = 0;
	winloss = "Lost.";
	for (e=0;e<imgs.length;e++) {
		if (imgs[e].hasAttribute("style")) {
			/*var bomb = document.createElement("img");
			bomb.setAttribute("src", "mine.png");
			tds[e].appendChild(bomb);*/
			//tds[e].innerHTML = "<img src='mine.png' />";
			imgs[e].removeAttribute("style");
		}
	}
	askNewGame();
}

function clearTable() {
	if (table) {
		/*if (table.childNodes !== undefined) {
			if (tableChildren) {
				tableChildren = table.childNodes;
			}
			else {
				var tableChildren = table.childNodes;
			}
			for (i=0;i<tableChildren.length;i++) {
				table.removeChild(tableChildren[i]);
			}
		}*/
		table.parentNode.removeChild(table);
	}
}

function genMines() {
	var index;
	var tds = table.getElementsByTagName("td");
	indarr = [];
	indeces = [];
	//imgs = [];
	var o = 0;
	var q = 0;
	var cntr = 0;
	var n;
	for(i=0, n; n = tds[i]; i++) {
		mineTDS.push(n);
	}
	var mineCount;
	for (mineCount=0;mineCount<mines;mineCount++) {
		for (o = 0;o<(hw*hw);o++) {
			/*do {
				index = Math.floor(Math.random()*((hw*hw)-1) + 0);
				checkIndex();
			}
			while (indarr.length<mines);*/
			indeces.push(o);
		}
		for (q = 0;q<mines;q++) {
			index = Math.floor(Math.random()*(indeces.length-1) + 0);
			indarr.push(indeces[index]);
			indeces.splice(index, 1);
		}
		for (cntr = 0;cntr<mines;cntr++) {
			cIndex = parseInt(indarr[cntr]);
			mineTDS[cIndex].onclick = function() {
				gameOver();
			};
			//mineTDS[cIndex].onclick = gameOver;
			var bomb = document.createElement("img");
			bomb.style.display = "none";
			bomb.setAttribute("src", "mine.png");
			mineTDS[cIndex].appendChild(bomb);
			indarr.splice(cIndex, 1);
			//tds[index].onclick = gameOver;
			//tds[index].className = (tdClass + " mined");
		}
	}
	imgs = table.getElementsByTagName("img");
}
/*function checkIndex() {
	for (var p in indarr) {
		if (indarr[p]!==index) {
			indarr.push(index);
		}
	}
}
function aC() {
	if (allChildren) {
		allChildren = table.childNodes;
	}
	else {
		var allChildren = [];
	}
}*/


Full CSS:

td {
	border: 3px solid #555;
}

.beginner {
	width: 100px;
	height: 100px;
}

.easy {
	width: 71px;
	height: 71px;
}

.medium {
	width: 50px;
	height: 50px;
}

.hard {
	width: 25px;
	height: 25px;
}

.expert {
	width: 16px;
	height: 16px;
}

.beginner img {
	width: 95px;
	height: 95px;
}

.easy img {
	width: 68px;
	height: 68px;
}

.medium img {
	width: 47px;
	height: 47px;
}

.hard img {
	width: 20px;
	height: 20px;
}

.expert img {
	width: 12px;
	height: 12px;
}

.mined {
	
}

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1