Question

我创建了一个由两个按钮操作的javascript / jquery简单游戏。

按钮1：“播放”。游戏会播放十次，并使用我存储在本地存储中的变量进行递增。如果增量与1到10之间的随机数匹配，则为console.log("match!")，否则为console,log("no match");

按钮2：“重新启动游戏”。。增量大于10后，点击按钮即可重新开始游戏。

问题是，如果您查看控制台，则是第二次玩游戏时，游戏一次跳跃两个增量。第三次，以三个增量...为什么？这里存在传播问题。我该如何解决？

Jsfiddle is here。我粘贴在下面的代码非常小：

start_game_over()

function start_game_over(event) {
  $("#button1").show();
  $("#button2").hide();

  localStorage.setItem("progress", 0)

  $("#button1").on("click", function() {

    if (parseInt(localStorage.getItem("progress")) < 11) {

      var random_number = Math.floor(Math.random() * (10 - 0) + 0);
      console.log(parseInt(localStorage.getItem("progress")));
      if (parseInt(localStorage.getItem("progress")) === random_number) {
        console.log("match!")
      } else {
        console.log("no match")
      }

      localStorage.setItem("progress", parseInt(localStorage.getItem("progress")) + 1);

    } else {
      $("#button1").hide();
      $("#button2").show();
      $("#button2").on("click", function() {
        start_game_over();
      });

    }
  })
}

Answer 1

在start_game_over上，您为按钮单击分配了事件侦听器，但从未删除它，因此，当再次调用该函数时，它将附加一个新的函数。稍微重组代码以处理该功能之外的点击将是一个好主意。

function start_game_over(event) {
  $("#button1").show();
  $("#button2").hide();

  localStorage.setItem("progress", 0)
}
$("#button1").on("click", function() {

    if (parseInt(localStorage.getItem("progress")) < 11) {

      var random_number = Math.floor(Math.random() * (10 - 0) + 0);
      console.log(parseInt(localStorage.getItem("progress")));
      if (parseInt(localStorage.getItem("progress")) === random_number) {
        console.log("match!")
      } else {
        console.log("no match")
      }

      localStorage.setItem("progress", parseInt(localStorage.getItem("progress")) + 1);

    } else {
      $("#button1").hide();
      $("#button2").show();

    }
  })
$("#button2").on("click", function() {
    start_game_over();
});

Answer 2

您要在函数内声明事件侦听器，因此每次调用该函数时，您都在创建一个新的侦听器。将它们从功能中删除，即可解决问题。

Answer 3

您必须最后使用$('#button1')来清除$('#button1').off('click');事件。这样会清除您每次在函数中创建的事件监听器。

SE不允许localStorage，因此请在JSFiddle或本地计算机上运行它。

start_game_over()

	function start_game_over(event) {
	  $("#button1").show();
	  $("#button2").hide();

	  localStorage.setItem("progress", 0)

	  $("#button1").on("click", function() {

	    if (parseInt(localStorage.getItem("progress")) < 11) {

	      var random_number = Math.floor(Math.random() * (10 - 0) + 0);
	      console.log(parseInt(localStorage.getItem("progress")));
	      if (parseInt(localStorage.getItem("progress")) === random_number) {
	        console.log("match!")
	      } else {
	        console.log("no match")
	      }

	      localStorage.setItem("progress", parseInt(localStorage.getItem("progress")) + 1);

	    } else {
	      $("#button1").hide();
	      $("#button2").show();
	      $("#button2").on("click", function() {
        	$("#button1").off("click");
          $("#button2").off("click");
	        start_game_over();
	      });

	    }
	  })
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Play</button>
<button style="display:none" id="button2">Restart the Game</button>

Answer 4

问题在于，每次调用start_game_over时，您都会向#button1和#button2 添加其他点击处理程序。您要做的是设置点击处理程序一次，并使用一个函数来在单击#button2时重置游戏状态（或仅在#button2'中重置游戏状态）。的回调）。例如：

var $button1 = $('#button1');
var $button2 = $('#button2');

var start_game_over = function () {
    $button1.show();
    $button2.hide();
    localStorage.setItem('progress', 0)
};

$button1.on('click', function () {
    var progress = parseInt(localStorage.getItem('progress'), 10 /*always include radix!*/);
    if (progress < 11) {
        //... game logic here
    } else {
        $button1.hide();
        $button2.show();
    }
});

$button2.on('click', function () {
    start_game_over();
});

jQuery按钮的传播问题

4 个答案: