Misalignment of tile in puzzle game HTML5

I am required to develop a sliding puzzle game in HTML5 using div tags and document object model. I have managed to get a working version but I'm having misalignment of tiles issues. Please have a look at what I have tried till now:

<?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> 

var rows = new Array(3)
   rows[0] = new Array (3)
   rows[1] = new Array (3)
   rows[2] = new Array (3)
   rows[3] = new Array (3)

   function checkWin() {
      var winner = false
      var checker = new Array(3)
      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 == 1 && rows[i][j - 1] == 0){
                  obj.style.left = (j - 2) * 100 + 'px'
                  rows[i][j - 1] = tile
                  rows[i][j] = 0                
               }
               else if (j == 2 && rows[i][j + 1] == 0){
                  obj.style.left = (j + 2) * 100 + 'px'
                  rows[i][j + 1] = tile
                  rows[i][j] = 0
               }
               else if (j == 2 && rows[i][j - 1] == 0){
                  obj.style.left = (j - 2) * 100 + 'px'
                  rows[i][j - 1] = tile
                  rows[i][j] = 0
               }

               else if (j < 4 && 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 < 4 && 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>


</head>

<body>

   <h1>Sliding Tiles &nbsp;
   <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>

have a look at the problem:

http://prntscr.com/14rivu http://prntscr.com/14rj9q

Any ideas for preventing the tiles from moving out of the box?

Answers


I tinkered with your code a little and got them to line up. Check out the "move" function, particularly where you are moving negative top or left. You were just subtracting too far. Try this:

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 == 1 && rows[i][j - 1] == 0){
              obj.style.left = j * 100 + 'px'
              rows[i][j - 1] = tile
              rows[i][j] = 0                
           }
           else if (j == 2 && rows[i][j + 1] == 0){
              obj.style.left = (j + 2) * 100 + 'px'
              rows[i][j + 1] = tile
              rows[i][j] = 0
           }
           else if (j == 2 && rows[i][j - 1] == 0){
              obj.style.left = j * 100 + 'px'
              rows[i][j - 1] = tile
              rows[i][j] = 0
           }

           else if (j < 4 && 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 * 100 + 'px'
              rows[i - 1][j] = tile
              rows[i][j] = 0
           }else if (i < 4 && 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   
        }
     }
  }
}

Side note: there is a scenario where you can't move a tile that is on far right side left. I don't really know the rules of the game or if that is intentional but i figured i would mention it. Perhaps a separate SO question? ;)


Need Your Help

Does resizing jpeg images affect their compression?

c# .net image compression resize

I'm resizing jpegs by using the Graphics.DrawImage method (see code fragment below). Can anyone confirm that this will not affect the compression of the new image?

How to make a page preloader similar to Apple's Mac page

javascript jquery css slide attr

If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.