[javascript] Sliding Tile Game ... Help?

[xboxrulz1405241485 0]

Hey guys,

 

I really need some help here and I'd appreciate if you guys can help me.

 

Alright, so I'm suppose to design a sliding tiles game. However, if you play around with it, it obviously doesn't work as you can see:

 

 

URL: http://forums.xisto.com/no_longer_exists/

 

To replicate the bug above, all you need to do is to start playing from bottom up and then the tiles starts disappearing.

 

Also, another issue is that I don't quite know how to tackle checking when you win. I understand that it must match 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15. Can you give me a hint? My implementation is definitely flawed and is shown in the code below.

 

<script type="text/javascript">	//<![CDATA[	var rows = new Array(4)	rows[0] = new Array (4)	rows[1] = new Array (4)	rows[2] = new Array (4)	rows[3] = new Array (4)		function checkWin() {		var winner = false		var checker = new Array(4)		checker[0] = new Array (1, 2, 3, 4)		checker[1] = new Array (5, 6, 7, 8)		checker[2] = new Array (9, 10, 11, 12)		checker[3] = new Array (13, 14, 15, 0)		for (i = 0; i < 4; i++){			for (j = 0; j < 4; j++){				if (rows[i][j] == checker[i][j]){					winner = true				}								}		}		if (winner){			alert("Congratulations! You've Won!")			return true		}		return false	}					function move(tile){		var obj = document.getElementById('tile' + tile)		var win = false		for (i = 0; i < 4; i++){			for (j = 0; j < 4; j++){				if (rows[i][j] == tile){					if (j > 0 && rows[i][j - 1] == 0){						obj.style.left = (j - 2) * 100 + 'px'						rows[i][j - 1] = tile						rows[i][j] = 0											}else if (j < 3 && rows[i][j + 1] == 0){						obj.style.left = (j + 2) * 100 + 'px'						rows[i][j + 1] = tile						rows[i][j] = 0					}else if (i > 0 && rows[i - 1][j] == 0){						obj.style.top = (i - 2) * 100 + 'px'						rows[i - 1][j] = tile						rows[i][j] = 0					}else if (i < 3 && rows[i + 1][j] == 0){						obj.style.top = (i + 2) * 100 + 'px'						rows[i + 1][j] = tile						rows[i][j] = 0					}					win = checkWin()					if (win){						break					}					return					}			}		}								}	function initialize(){		var check = new Array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)		for (i = 0; i < 4; i++) {			for (j = 0; j < 4; j++) {				if (i == 3 && j == 3){										rows[i][j] = 0								} else {					var n = Math.ceil(Math.random() * 15)					while (check[n - 1] == 0){						n = Math.ceil(Math.random() * 15)					}					rows[i][j] = n					check[n - 1] = 0					document.getElementById('tile' + n).style.left = (j + 1) * 100 + 'px'					document.getElementById('tile' + n).style.top = (i + 1) * 100 + 'px'				}			}		}	 			}	// ]]>   </script>

Many thanks,

xboxrulz

[HannahI 0]

I'm guessing that you need to check if you can't move that area and if you can't do something like this:

alert("Sorry, Invalid Move");

Hope this helps!
Edited November 5, 2009 by HannahI (see edit history)