寻找帮助使用jQuery调试点击游戏

时间：2017-12-10 05:20:57

标签： javascript jquery html twitter-bootstrap

我正在尝试创建一个游戏，其中选择一个随机数并给出四个按钮（它们最终将是水晶）。

我试图让每个按钮都有一个设定的隐藏值，并且目标是与给定的随机数匹配。

我认为以下内容会给我这个，但我错了。玩家似乎赢得了第二个程序运行，并且胜利和损失没有像我从if语句中预期的那样写入html。

我做错了什么？

$(document).ready(function() {

  var randomNumber = Math.floor(Math.random() * 100) + 1;
  var crystalNumber1;
  var crystalNumber2;
  var crystalNumber3;
  var crystalNumber4;
  var total = 0;
  var currentTotal = $("#total");


  function makeCrystal1() {
    crystalNumber1 = Math.floor(Math.random() * 12) + 1
  };

  function makeCrystal2() {
    crystalNumber2 = Math.floor(Math.random() * 12) + 1
  };

  function makeCrystal3() {
    crystalNumber3 = Math.floor(Math.random() * 12) + 1
  };

  function makeCrystal4() {
    crystalNumber4 = Math.floor(Math.random() * 12) + 1
  };


  function makeRandom() {
    randomNumber = Math.floor(Math.random() * 100) + 1;
  }

  function reset() {
    makeRandom();
    makeCrystal1();
    makeCrystal2();
    makeCrystal3();
    makeCrystal4();
    total = 0;
  }

  reset();

  var win = 0;
  var losses = 0;

  $("#random-number").append(randomNumber);


  function addTo(number) {
    total = total + number;
  }


  $("#crystal1").on("click", function() {
    addTo(crystalNumber1);
    currentTotal.html(total);
  });

  $("#crystal2").on("click", function() {
    addTo(crystalNumber2);
    currentTotal.html(total);
  });

  $("#crystal3").on("click", function() {
    addTo(crystalNumber3);
    currentTotal.html(total);
  });

  $("#crystal4").on("click", function() {
    addTo(crystalNumber4);
    currentTotal.html(total);
  });



  if (total > randomNumber) {
    losses++;
    reset();
    $("#messages").html("Oh no! You destroyed your crystals!");
  }

  if (total = randomNumber) {
    wins++;
    $("#wins").html(wins);
    reset();
    $("#messages").html("You are a crystal master!");
  }


})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Crystal Game</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="page-header">
      <h1>Crystal Game <small>Can you match the number?</small></h1>
    </div>

    <p>A random number will appear.</p>
    <p>Click on the crystals to find out their individual value.</p>
    <p>Win the game by clicking the right combination of crystals to match the number. Don't go over the number or you lose!</p>
    <p>Good luck!</p>

    <div class="row">
      <div class="col-xs-5">
        <div id="random-number"></div>
      </div>
      <div class="col-xs-3">
        <p id="alert"></p>
        <p>Wins:
          <div id="wins"></div>
        </p>
        <p>Losses:
          <div id="losses"></div>
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2">
        <a id="crystal1" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal1
        </a>
      </div>
      <div class="col-xs-2">
        <a id="crystal2" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal2
        </a>
      </div>
      <div class="col-xs-2">
        <a id="crystal3" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal3
        </a>
      </div>
      <div class="col-xs-2">
        <a id="crystal4" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal4
        </a>
      </div>
    </div>

    <br>

    <div class="row">
      The current total is:
      <div id="total"></div>

    </div>

    <div class="row">
      <div id="crystal-count"></div>
    </div>

    <div class="row">
      <div id="messages"></div>
    </div>



  </div>

  <script type="text/javascript" src="assets/javascript/game.js"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

问题：

  1. 您的if()条件仅在页面加载时运行。将它们包装在可以在addTo()内调用的函数中，这样您就可以在每次更改时进行检查。我把它们包裹在function checkStatus

    2. 中

  2. 当你超过号码时，$('#losses')缺少任何html插页

  3. if (total = randomNumber)

    4. 中的条件比较运算符无效

    它主要在下面工作，但并不打算重写整个应用程序或增强功能。一些重复的代码可以很容易地合并...比如对所有按钮使用一个单击处理程序并检查id以查看要添加的数字

    ＆＃13;
    ＆＃13; 
    $(document).ready(function() {

  var randomNumber = Math.floor(Math.random() * 100) + 1;
  var crystalNumber1;
  var crystalNumber2;
  var crystalNumber3;
  var crystalNumber4;
  var total = 0;
  var currentTotal = $("#total");


  function makeCrystal1() {
    crystalNumber1 = Math.floor(Math.random() * 12) + 1
  };

  function makeCrystal2() {
    crystalNumber2 = Math.floor(Math.random() * 12) + 1
  };

  function makeCrystal3() {
    crystalNumber3 = Math.floor(Math.random() * 12) + 1
  };

  function makeCrystal4() {
    crystalNumber4 = Math.floor(Math.random() * 12) + 1
  };


  function makeRandom() {
    randomNumber = Math.floor(Math.random() * 100) + 1;
  }

  function reset() {
    makeRandom();
    makeCrystal1();
    makeCrystal2();
    makeCrystal3();
    makeCrystal4();
    total = 0;
  }

  reset();

  var win = 0;
  var losses = 0;

  $("#random-number").append(randomNumber);


  function addTo(number) {
    total = total + number;
    checkStatus();// added new
  }


  $("#crystal1").on("click", function() {
    addTo(crystalNumber1);
    currentTotal.html(total);
    
  });

  $("#crystal2").on("click", function() {
    addTo(crystalNumber2);
    currentTotal.html(total);
    
  });

  $("#crystal3").on("click", function() {
    addTo(crystalNumber3);
    currentTotal.html(total);   
  });

  $("#crystal4").on("click", function() {
    addTo(crystalNumber4);
    currentTotal.html(total);
    
  });


function checkStatus(){// added new
  if (total > randomNumber) {
    losses++;
    reset();
    $('#losses').html(losses);// added new
    $("#messages").html("Oh no! You destroyed your crystals!");
  }

  if (total === randomNumber) {
    wins++;
    $("#wins").html(wins);
    reset();
    $("#messages").html("You are a crystal master!");
  }
}

})
    ＆＃13; 
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Crystal Game</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="page-header">
      <h1>Crystal Game <small>Can you match the number?</small></h1>
    </div>

    <p>A random number will appear.</p>
    <p>Click on the crystals to find out their individual value.</p>
    <p>Win the game by clicking the right combination of crystals to match the number. Don't go over the number or you lose!</p>
    <p>Good luck!</p>

    <div class="row">
      <div class="col-xs-5">
        <div id="random-number"></div>
      </div>
      <div class="col-xs-3">
        <p id="alert"></p>
        <p>Wins:
          <div id="wins"></div>
        </p>
        <p>Losses:
          <div id="losses"></div>
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2">
        <a id="crystal1" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal1
        </a>
      </div>
      <div class="col-xs-2">
        <a id="crystal2" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal2
        </a>
      </div>
      <div class="col-xs-2">
        <a id="crystal3" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal3
        </a>
      </div>
      <div class="col-xs-2">
        <a id="crystal4" class="btn btn-default" href="#" role="button">
          <img src="" alt="">crystal4
        </a>
      </div>
    </div>

    <br>

    <div class="row">
      The current total is:
      <div id="total"></div>

    </div>

    <div class="row">
      <div id="crystal-count"></div>
    </div>

    <div class="row">
      <div id="messages"></div>
    </div>



  </div>

  <script type="text/javascript" src="assets/javascript/game.js"></script>
</body>

</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题