打鼹鼠无法点击新图片

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基础打地鼠游戏，因为我觉得它听起来很有趣。它不是很复杂，也没有倒计时计时器或"新游戏"按钮，但其中一些逻辑可能对你有帮助。

// 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>