У меня есть игра, которая работает нормально, пока я не добавлю экран повторной попытки. Когда игрок нажимает повторную попытку, он удаляется с помощью .empty() в содержащем элементе. После повторной попытки нажатие мыши происходит более одного раза. Чем больше количество попыток у игрока, тем больше раз срабатывает событие mousedown.
http://jsfiddle.net/otherDewi/gNjSH/3/
Ниже приведено событие mousedown, привязанное к оболочке.
$wrapper.mousedown(function(e) {
e.stopPropagation();
x=e.pageX-14;
y=e.pageY-14;
var $target = $(e.target);
console.log($target);
shells--;
var gotone = false;
if(shells>=0){
for(i=2;i>=0;i--){
if(x>duckPosX[i]+15 && y>duckPosY[i]+10){
if(x<(duckPosX[i]+90)&& y<(duckPosY[i]+60)){
ducks[i].hit=true;
gotone=true;
}
}
};
if(gotone){
console.log("hit");
}else{
console.log("miss");
}
}
if(shells===0){
$winner.fadeTo('400',1).show('fast');
if(hit>=5){
alert('you won game over');
}else{
$winner.empty().html('<div><h1>click to try again</h1></div>').fadeTo('400',1).show('fast');
}
}
});
Если игрок не попадает в 5 уток, html динамически добавляется в файл <div id="winner"></div>
. При нажатии на кнопку «Повторить попытку» div очищается и вызывается функция init.start.
$winner.on("click", function(e) {
e.stopImmediatePropagation();
e.stopPropagation();
$('#winner').empty();
//------------------reset-------------------------//
tryAgain=true;
shells=7;
init.start();
});
Я предполагаю, что его событие пузырится, что вызывает проблему. Несколько дней пытался решить эту проблему. Я попытался нацелиться на элемент, но единственный объект, который появляется, — это перекрестие, которое отслеживает курсор.
Мой html
<div class="wrapper">
<div id="splashScreen"><h1>Click to Play</h1></div>
<div id="duck1" class="ducks"></div>
<div id="duck2" class="ducks"></div>
<div id="duck3" class="ducks"></div>
<img src="http://s21.postimg.org/hfmq4wts3/sight.png" alt="" id="crosshair">
<h5 id="score"></h5>
<div id="winner">
</div>
</div>