javascript - 如何在 Javascript 中创建 Scramble 函数-6ren

javascript - 如何在 Javascript 中创建 Scramble 函数

转载作者：行者123 更新时间：2023-11-30 16:58:51

我正在尝试使用 javascript 创建一个简单的 slider 游戏。这是一个简单的 4 x 4 数字 slider 游戏，每个按钮都标记为 1-15，最后一个 block 是空白 block 。我只是不知道如何以随机顺序打乱按钮以开始游戏。

下面是我目前拥有的代码。

   <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，所以我还在学习如何编码。谢谢!

更新:

这是我的make move函数

 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) 并将其放入打乱函数中。抱歉，我真的很难理解这个概念。

最佳答案

您将需要一个 makeMove 函数来从选定的方向填充洞，以便制作游戏。 Scramble 非常简单:使用随机邻居重复 makeMove 操作足够次数(忽略无效邻居，例如从左边缘向左滑动)。

编辑:风格方面，document.write 被认为是一种不好的做法。更好的方法是制作一个元素，例如

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

然后通过使用 document.createElement 创建文档并将其添加到那里来填充它，这有点麻烦，或者您可以走简单的路线并将 HTML 标记分配给 innerHTML:

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

此外，使用 onclick="..." 被认为是一种不好的做法；尝试通过简单地离开 onclick="..." 来习惯不混合 JavaScript 和 HTML，而是从 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.
}