Question

我试图在HTML5中制作一个小小的益智游戏，而我却无法弄清楚如何制作拼图。在拼图中，您必须按特定顺序单击方块才能击败它。我不知道如何将它按顺序点击按钮，如果你没有丢失。

<!DOCTYPE html>
<html>
    <head>
        <title>Room Two</title>
            <link rel="stylesheet" type="text/css" href="youtubeGame.css">

            <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Oxygen|Ubuntu|Coming+Soon">
    </head>
    <body>
        <div id="content">
            <h1 id="roomNum">Room 2</h1>
            <p id="roomInfo">Once again the door seems to magically close behind 
you.<br /> Unlike the stone floor from the previous room, this one is divided up 
into wooden slabs.<br /> You press your foot onto a slab. It slides down, and an 
arrrow shoots from the roof.<br /> You barely get out of the way but somehow you 
dodge it. You tell yourself to watch your step...</p>

            <p id="step"></p>

            <p id="step2"></p>

            <div class="menu-container" id="puzzle">
                <div class="button-container">
                 <a href="#" class="button" onclick="wrongStep()">1</a>
                 <a href="#" class="button" onclick="correctStep6()">2</a>
                 <a href="#" class="button" onclick="correctStep7()">3</a>
                 <a href="#" class="button" onclick="wrongStep()">4</a>
                 <a href="#" class="button" onclick="correctStep5()">5</a>
                 <a href="#" class="button" onclick="correctStep4()">6</a>
                 <a href="#" class="button" onclick="correctStep1()">7</a>
                 <a href="#" class="button" onclick="correctStep2()">8</a>
                 <a href="#" class="button" onclick="correctStep3()">9</a>
               </div>
            </div>
        </div>

        <br><br>

        <div id="death">
            <a href="youtubeGame.html">Try Again?</a>
        </div>

        <a href="roomThree.html" id="nextRoom">Next Room</a>

        <script type="text/javascript">

            document.getElementById("death").style.display = "none";

            document.getElementById("nextRoom").style.display = "none";

            function correctStep1() {
                return true;    
            }
            function correctStep2() {
                return true;
            }

            function correctStep3() {
                return true;
            }

            function correctStep4() {
                return true;
            }

            function correctStep5() {
                return true;
            }

            function correctStep6() {
                return true;
            }

            function correctStep7() {
                return true;
            }

            function wrongStep() {
                document.getElementById("content").style.display = "none;"

                document.getElementById("puzzle").style.display = "none";

                document.getElementById("death").style.display = "block";

                document.getElementById("roomNum").innerHTML = "You Have 
Died";

                document.getElementById("roomInfo").style.display = "none";
            }

        </script>
    </body>
</html>

请帮我解决这个问题

Answer 1

一种非常简单的方法是在数组中保存正确的顺序，如果用户单击，则递增一个clickcounter并检查单击的按钮是否位于数组中的此位置：

var state = {
  clickedButtons:[]
};
var correctClickSettings = {
  order:[7,8,9,6,5,2,3],
  resetOn:7 // order has 7 elements, so the user have to click 7 buttons, after that it will be checked and the clicked buttons will be resolved or rejected
};
// called from every button that can be clicked to solve the game
function onClick(evt) {
  evt = evt || window.event;
  var sourceButtonText = this.innerText;
  state.clickedButtons.push(sourceButtonText);
  if(state.clickedButtons.length >= correctClickSettings.resetOn) {
    var distanceBetweenArrays = state.clickedButtons.reduce((cur,val,idx)=>cur+Math.abs(val-correctClickSettings.order[idx]),0);
    if(distanceBetweenArrays > 0) {
      wrongStep();
      state.clickedButtons = [];
    } else {
      alert('This was right!');
    }
  }
}

这个解决方案有一个问题：每个对javascript有一点了解的人都可以打开网页并读出解决方案。因此，如果您想要做得更好（不那么容易理解），您必须使用另一种解决方案：

您可以使用哈希而不是按钮点击数组作为正确的顺序：

function simpleHash(currentHash, idx, sourceButtonText) {
  currentHash = currentHash*137+parseInt(sourceButtonText,10);
}

现在只需计算正确的解决方案值：46672273550408（在您的情况下）

现在点击每个按钮，计算下一个哈希值，然后在解决方案的7个步骤后进行比较。

Answer 2

这是与当前实现非常相似的方法，但是使用属性来声明选项的顺序。它还通过javascript直接绑定事件。

＆＃13;

{
  "errors": {
    "e1": 15,
    "e2": 20,
    "e3": 30
  },
  "warnings": {
    "w1": 2,
    "w2": 4,
    "w3": 33
  }
}

＆＃13;

var options = [];
var expected = 0; 

document.querySelectorAll('.button').forEach((button, index)=>{
  options.push({
    button: button,
    order: button.getAttribute('order'),
    index: index,
    clicked: false
  });
  
  button.addEventListener('click',onClick);
  
  //console.log(options[options.length-1]);
});

function onClick(event){
   let order = parseInt(event.currentTarget.getAttribute('order'));

   if(order == expected){
    expected++;
    options[order].clicked = true;
    console.log(options[order]);
   }
}

＆＃13;

如何制作按钮图案？

2 个答案: