Question

我正在为逃脱游戏创建一些网页。它们主要用于收集响应并检查它们是否正确。在这种情况下，按正确的顺序排列是一个字母。排序脚本取自Codepen，然后我修改了一些JavaScript来监视if / else条件。如果错了，那你就失去生命。该代码确实表明答案是错误的，它删除了代表生命的四个图像之一。

我到处都在研究如何构建生活系统，因此我尝试了一些脑海中想出的理论，但是我对JavaScript尚无很好的理解，无法实现我想要做的事情。 / p>

$(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});

function checkOrd() {
  var life = document.getElementById('life');
  var items = $('#sortable li').map(function() {
    return $.trim($(this).attr('id'));
  }).get();
  var itsort = $('#sortable li').map(function() {
    return $.trim($(this).attr('id'));
  }).get();
  <!-- console.log(items); -->
  <!-- console.log(itsort); -->
  itsort.sort();
  if (JSON.stringify(items) == JSON.stringify(itsort))
    alert("Right order!");
  else
    life.parentNode.removeChild(life);
};

<DOCTYPE! html>
  <html>

  <head>
    <link rel="stylesheet" type="text/css" href="Style.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <img id="life" src="life.png"><img id="life" src="life.png"><img id="life" src="life.png"><img class="life" src="life.png"> </div>

  <div class="Lettre">
    <ul id="sortable">
      <li class="intro">INTRO TEXT</li>
      </br>

      <li class="partie" id="3">TEXT </li>

      <li class="partie" id="2">TEXT </li>

      <li class="partie" id="4">TEXT </li>

      <li class="partie" id="1">TEXT </li>

      <li class="outro" id="5">ENDING TEXT</li>
    </ul>

  </div>
  <div class="confirmbutton" style="display: flex !important;justify-content: center !important">
    <button id="confirm" onclick="checkOrd();">Confirmer</button>
  </div>

  </html>

是否有更好的方法来处理？如果我这样工作，我仍然找不到在下一页中报告剩余寿命的方法。

Answer 1

基本上，这是您可以执行的操作：

not found

function removeLife(){

    $(".life").last().remove();

}

function countLives(){
  return $(".life").length;
}

然后您可以通过

检查剩余的生命

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <style>
    #lives{
      padding:0;
    }
    .life{
      display: inline;
    }
  </style>
<body>
  <ul id="lives">
    <li class="life">Life 1</li>
    <li class="life">Life 2</li>
    <li class="life">Life 3</li>
    <li class="life">Life 4</li>
  </ul>
  <button onclick="removeLife()">Remove a life</button>
  <button onclick="alert(countLives())">Get remaining lives</button>
  
</body>

</html>

通过测验创建像视频游戏这样的生活系统

1 个答案: