5 Replies - 6934 Views - Last Post: 22 April 2013 - 08:33 AM

#1 thegame16  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-April 11

problem with 15 puzzle

Posted 06 April 2011 - 04:08 PM

Hi guys i am trying to make a sliding 15 puzzle in javascript. I have tried the code and I am able to scramble my board, however when I try to solve it some of my pieces go off the board on click and some even start to disappear on click. If anyone could help me with my for loop in my move function I would really appreciate it. I have posted my index and my game.js file which is my javascript i need help with.

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <title>Sliding Tiles</title>
   <style type="text/css">
      h1 {position:absolute; left:100px; font-family:arial}
      p {position:absolute; left:100px; top:60px; color:red; font-family:arial; font-weight:bold}
      .board {position:absolute; left:100px; width:400px; top:100px; height:400px; background-color:black; border-style:none}
      div {position:absolute; width:94px; height:94px; background-color:aqua; border-style:solid; border-width:3px;
         text-align:center; font-family:century; font-weight:bold; font-size:60px}
      button {position:absolute; left:150px; width:300px; top:550px; height:50px;
         background-color:silver; font-family:arial; font-weight:bold; font-size:30px}
   </style>
   <script src="game.js" type="text/javascript"></script>
</head>

<body>

   <h1>Sliding Tiles &nbsp;
      <a href="http://validator.w3.org/check?uri=referer">
         <img src="valid-xhtml10.gif" alt="Valid XHTML 1.0!" style="border:0;width:88px;height:31px" /></a></h1>
   <p>After starting a game, just click on the tile you'd like to move...</p>
   <div class="board" id="board"></div>
   <div id="tile1" style="left:100px; top:100px" onclick="move(1)">
      1
   </div>

   <div id="tile2" style="left:200px; top:100px" onclick="move(2)">
      2
   </div>
   <div id="tile3" style="left:300px; top:100px" onclick="move(3)">
      3
   </div>
   <div id="tile4" style="left:400px; top:100px" onclick="move(4)">
      4
   </div>
   <div id="tile5" style="left:100px; top:200px" onclick="move(5)">

      5
   </div>
   <div id="tile6" style="left:200px; top:200px" onclick="move(6)">
      6
   </div>
   <div id="tile7" style="left:300px; top:200px" onclick="move(7)">
      7
   </div>
   <div id="tile8" style="left:400px; top:200px" onclick="move(8)">
      8
   </div>

   <div id="tile9" style="left:100px; top:300px" onclick="move(9)">
      9
   </div>
   <div id="tile10" style="left:200px; top:300px" onclick="move(10)">
      10
   </div>
   <div id="tile11" style="left:300px; top:300px" onclick="move(11)">
      11
   </div>
   <div id="tile12" style="left:400px; top:300px" onclick="move(12)">

      12
   </div>
   <div id="tile13" style="left:100px; top:400px" onclick="move(13)">
      13
   </div>
   <div id="tile14" style="left:200px; top:400px" onclick="move(14)">
      14
   </div>
   <div id="tile15" style="left:300px; top:400px" onclick="move(15)">
      15
   </div>

   <form action="">
      <button onclick="initialize(); return false">Start a New Game</button>
   </form>
</body>

</html>



game.js


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 = false
				}					
			}
		}
		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'
				}
			}
		}	 		
	}



Is This A Good Question/Topic? 0
  • +

Replies To: problem with 15 puzzle

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: problem with 15 puzzle

Posted 06 April 2011 - 09:52 PM

I wouldn’t use positioning for the tiles. all you need is to swap the CSS definitions (and the content). besides that, are you sure the configuration you initialise can be solved (a random configuration is solvable in 50% of the cases).

a Slider Game I once made (though that version is quite outdated meanwhile, the image slider is more up to date). check out the source, maybe you find some insight.

This post has been edited by Dormilich: 06 April 2011 - 10:05 PM

Was This Post Helpful? 0
  • +
  • -

#3 thegame16  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-April 11

Re: problem with 15 puzzle

Posted 06 April 2011 - 10:41 PM

yea i am aware 50% of the puzzles can't be solves and i would change
the method I am using but I am just doing it like this because there
are the specifications on how I was told to code it. I just want to figure out
how to fix my for loop. It will make 1 or 2 moves and then the tile will
disapear or goes 2 spaces over instead of 1.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: problem with 15 puzzle

Posted 06 April 2011 - 10:53 PM

I havnít looked into it in detail, but I think your positioning calculation goes off at some point. I recommend you donít move the elements itself but only exchange the content.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: problem with 15 puzzle

Posted 08 April 2011 - 01:37 AM

further discussion, see here
Was This Post Helpful? 0
  • +
  • -

#6 huuhoang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 22-April 13

Re: problem with 15 puzzle

Posted 22 April 2013 - 08:33 AM

Your game is perfect thank you so much but "random number" have problem.
function unique_randoms(){
	var arr = []
	while(arr.length < 15){
  		var randomnumber=Math.floor((Math.random()*15)+1);
  		var found=false;
  		for(var i=0;i<arr.length;i++){
    		if(arr[i]==randomnumber){found=true;break}
  		}
  		if(!found)
		 	arr[arr.length]=randomnumber;
	}		
	return arr;
}

function initialize(){
	var numbers =unique_randoms();
	var test;
	var count=0;
	for(var i=0;i<4;i++){
		for(var j=0;j<4;j++){
			var n = numbers[count];
			rows[i][j] = n;
			if(i==3 && j==3){
				rows[i][j]=0;
			}
			$("#puzzle #pannel_"+n).css("top",i*60+"px");
			$("#puzzle #pannel_"+n).css("left",j*60+"px");
			count++;
		}
	}
}



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1