Question

在过去的几周中，我一直在研究一个痣的项目，也许是一周前，当我尝试单击生成的新痣图像时遇到了一个问题。这里的目标是简单地在游戏空间div中生成痣的图像，并且可以单击每个痣以增加用户的得分。当我运行该程序时，我可以单击第一个痣图像来增加分数计数器，但是所有其他痣均不可单击。这里还有一些其他函数，例如randomX（）在此阶段未使用。后来我用它们来在随机位置生成图像。非常感谢您的帮助，谢谢！

var userScore = 0; //Global variable for score counter
var gameTimer = 30; //Global variable for game timer

$(document).ready(function() {
  $("#start_button").click(function() {
    gameStart();
    $("#mole").on('click', scoreIncrease);
  });
});

function randomY() { //function to calcualte random y-value between 0 and 300
  var y = Math.floor((Math.random() * 300) + 0);
  return y;
}

function randomX() { //function to calculate random x-value between 0 and 600
  var x = Math.floor((Math.random() * 600) + 0);
  return x;
}

function scoreIncrease() { //function that adds to user score and updates #score element
  userScore++;
  $('#score').html(userScore + ' pts');
}

function timerDecrease() { //function that decrements gameTimer and sets text for #timer
  $("#timer").html(gameTimer + ' seconds left');
  gameTimer--;
  setTimeout("timerDecrease()", 1000);
}

function addMole() {
  var t = $('#gamespace').append('<img id="mole" src="img/mole.jpg" />');
  t = setTimeout(addMole, 3000);
}

function gameStart() {
  $('#timer').show(); //show timer
  addMole(); //call addMole function
  $('#gamespace').css('background-color', 'brown'); //change #gamespace background color
  $('#content').css('background-color', 'green'); //change #content background color
  timerDecrease();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

运行此行时：

$("#mole").on('click', scoreIncrease);

您正在选择所有#mole元素，然后将点击处理程序附加到每个处理程序。这意味着，如果将来添加#mole元素，则不会附加任何处理程序。相反，您需要将处理程序附加到父元素并通过选择器对其进行过滤，如下所示：

$("#gamespace").on("click", "#mole", scoreIncrease);

这会将实际处理程序附加到#gamespace，然后在每次单击时进行检查，以查看是否单击了#mole。此外，我在您的代码中看不到要删除单击的痣的任何地方-如果可能一次在屏幕上显示多个痣，则需要使用一个类（.mole）的ID。

Answer 2

我可以写一个纯粹的js基本的wole-a-mole游戏，因为我认为这听起来很有趣。它不是很复杂，没有倒数计时器或“新游戏”按钮，但是其中一些逻辑可能对您有所帮助。

// start game IIFE
(function runGame() {
  var game_length = 10000;
  var duration = 0;
  round(duration, game_length, 0);
})();


function round(duration, game_length) {

	// round length between 0.5-1.5 seconds
  var timeout = 500 + getRandomUpTo(1000);
  duration += timeout;
 
  window.setTimeout(function() {

		// get the target from the previous round if any
    var old_target = document.getElementsByClassName('target')[0];
    if( old_target ){
    		// remove classes and click handler
  	 	 old_target.classList.remove('hit');
       old_target.classList.remove('target');
   		 old_target.removeEventListener('click',hit_target);
    }

		// randomly select a new hole to be the target
    var hole_num = getRandomUpTo(16);
    var new_target = document.getElementsByClassName('hole' + hole_num)[0];
    new_target.classList.add('target');
    // add the click handler for successful hit
    new_target.addEventListener('click', hit_target )

		// if we've got time for another round, call recursively
    if (duration < game_length) {
      return round(duration, game_length);
    }

  }, timeout);

}

// click handler for successful hits
function hit_target(event){
  
  // update score
  var score_elem = document.getElementsByClassName('score_num')[0];
  var score = score_elem.dataset.score;
  score++;
  score_elem.dataset.score = score;
  score_elem.innerHTML = score;
  
	// turn green so we know we hit it
  this.classList.add('hit');
  // remove event listener so we can only hit it once
  this.removeEventListener('click',hit_target);
}

// helper function for getting random numbers
function getRandomUpTo(max) {
  return Math.floor(Math.random() * max) + 1;
}

.board {
  border: 2px solid #ccc;
  width: 400px;
  float: left;
}

.hole {
  box-sizing: border-box;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  margin: 10px;
  background-color: #333;
  float: left;
  cursor: pointer;
}

.target {
  background-color: red;
}

.hit {
  background-color: green !important;
}

.score {
  display: inline-block;
  border: 2px solid #ccc;
  padding: 20px;
  margin: 0 10px;
  font-size: 30px;
  font-weight: 800;
  font-family: helvetica, aria, sans-serif;
}

.score_num {
  margin-left: 5px;
}

<div class="board">
  <div class="hole hole1"></div>
  <div class="hole hole2"></div>
  <div class="hole hole3"></div>
  <div class="hole hole4"></div>
  <div class="hole hole5"></div>
  <div class="hole hole6"></div>
  <div class="hole hole7"></div>
  <div class="hole hole8"></div>
  <div class="hole hole9"></div>
  <div class="hole hole10"></div>
  <div class="hole hole11"></div>
  <div class="hole hole12"></div>
  <div class="hole hole13"></div>
  <div class="hole hole14"></div>
  <div class="hole hole15"></div>
  <div class="hole hole16"></div>
</div>
<div class="score"><span>Score:</span><span class="score_num" data-score="0">0</span></div>

hack鼠无法点击新图片

2 个答案: