Question

我需要使用div标签和文档对象模型在HTML5中开发滑动益智游戏。我设法得到一个工作版本，但我有瓦片问题的错位。请看看我到目前为止所尝试的内容：

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

看看问题：

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

有什么想法可以防止瓷砖移出盒子？

Answer 1

我修改了你的代码并让它们排成一行。查看“移动”功能，特别是在您移动负顶部或左侧的位置。你只是减去了太多。试试这个：

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

旁注：有一种情况是您无法移动位于最右侧的图块。我真的不知道游戏的规则，或者这是故意的，但我想我会提到它。也许是一个单独的SO问题？ ;）

拼图游戏HTML5中的拼图错位

1 个答案: