Question

我正在尝试使用javascript创建一个简单的滑块游戏。这是我简单的4乘4号滑块游戏，每个按钮标记为1-15，最后一个块是空白块。我根本不知道如何以随机顺序加扰按钮来开始游戏。

以下是我目前的代码。

   <body>

   <h1> Slider Game </h1>

    <script type="text/javascript">

       var blankrow = 3;
       var blankcol = 3;

       for (var r=0; r<4; r++)
       {
           for (var c=0; c<4; c++)
           {
               var bid = "b"+r+c;
               var val = 4*r+c+1;
               if (bid==="b33")
                   val = ' ';
               var s = '<input type = "button" id = "' + bid + '" value = "' 
                        + val + '" onclick = "makeMove(this.id);" />' + '\n';
               document.write (s);
           }
       }
    </script>

    <input type = "button" id = "btnScramble" value = "Scramble" onclick = "scrambleBoard();"/>
    <input type = "button" id = "btnReset" value = "Reset Board" onclick = "resetBoard();"/>


</body>

我创建了一个这样的函数：

function scrambleBoard()
             {


             }

我根本不知道从哪里开始。我只是在学习Javascript，所以我还在学习如何编写代码。谢谢！

更新

这是我有的移动功能

 function makeMove(btnid)
             {
                //is btnid next to blank  
                var r = btnid.substr(1,1);
                var c = btnid.substr(2,2);

        if (blankrow==r && blankcol==c+1) // check right
                {
                   blankid="b"+r+c;
                   document.getElementById(blankid).value = document.getElementById(btnid).value;
                   document.getElementById(btnid).value = ' ';
                   blankcol=c;
                }
                else if (blankrow==r && blankcol==c-1) // check left
                {
                   blankid="b"+r+c;
                   document.getElementById(blankid).value = document.getElementById(btnid).value;
                   document.getElementById(btnid).value = ' ';
                   blankcol=c;
                } 
                else if (blankrow==r+1 && blankcol==c) // check bottem
                {
                   blankid="b"+r+c;
                   document.getElementById(blankid).value = document.getElementById(btnid).value;
                   document.getElementById(btnid).value = ' ';
                   blankrow=r;
                } 
                else if (blankrow==r-1 && blankcol==c) // check top
                {
                   blankid="b"+r+c;
                   document.getElementById(blankid).value = document.getElementById(btnid).value;
                   document.getElementById(btnid).value = ' ';
                   blankrow=r;
                } else
                   alert("Move is invalid");

             }

现在用这个如何获取函数（makeMove）并将其放入scramble函数中。对不起，我真的很难理解这个概念。

Answer 1

为了制作游戏，你需要一个makeMove函数来填充所选方向的洞。 Scramble非常简单：使用随机邻居重复makeMove操作足够次数（忽略无效的邻居，例如左边缘从左边滑动）。

编辑：风格方面，document.write被认为是一种不好的做法。更好的方法是制作一个像

这样的元素

<div id="board"></div>

然后通过使用document.createElement创建文档并将其添加到那里来填充它，这有点痛苦，或者您可以轻松地将HTML标记分配给innerHTML：< / p>

document.getElementById('board').innerHTML = allMyButtonsHTML;

此外，使用onclick="..."被视为不良做法;尝试习惯不要混淆JavaScript和HTML，只需简单地离开onclick="..."，而不是从JavaScript分配它：

var scrambleButton = document.getElementById('btnScramble');
scrambleButton.addEventListener('click', function() {
  ...
});

这不是一个错误，但它将来会产生更清晰，更易于维护的代码。

EDIT2：您不会将makeMove放入随机播放中，而是从那里调用它。

function shuffleBoard() {
  // the hole starts here
  var holeRow = 3, holeCol = 3;
  // the number of shuffling moves
  var moves = 100;
  // repeat while moves is not yet at zero
  loop: while (moves) {
    // we want to move one space from our current hole, so start there
    var nextRow = holeRow, nextCol = holeCol;
    // get a random number from 0 to 3 using the |0 hack
    // to convert a real number to an integer
    var direction = (Math.random() * 4)|0;
    // now to see what coordinate changes...
    switch (direction) {
      case 0:
        // if we're going right, we increment the column
        // if that puts us too far right, we jump to the start of the loop
        // to pick a new direction again
        if (nextCol++ > 3) continue loop;
        break;
      case 1:
        // same deal for down
        if (nextRow++ > 3) continue loop;
        break;
      case 2:
        // and left
        if (nextCol-- < 0) continue loop;
        break;
      case 3:
        // and up
        if (nextRow-- > 0) continue loop;
        break;
    }
    // this should be more elegant but
    // like this it will fit in with your existing function
    makeMove('b' + nextRow + nextCol);
    // now since we moved the hole, we update its current position
    holeRow = nextRow;
    holeCol = nextCol;
    // that's one move down, lots to go!
    moves--;
  }
  // or is it? nope, all done.
}

Answer 2

添加第一个按钮后，循环浏览您需要创建的更多按钮。使用math.random选择0-1的随机数。如果数字为0，请使用insertadjacenthtml向左侧添加新按钮。如果数字为1，请将按钮添加到右侧。

如何在Javascript中创建Scramble函数

2 个答案: