私のゲームでは、単語が入力されたグリッドがあります。単語を綴るには、ユーザーは「ドラッグ」と呼ばれる側面の文字をクリックする必要があります。文字をクリックすると、アニメーションでグリッド上の位置に移動します。
私が抱えている問題は、ユーザーが文字をすばやくクリックできるため、プログラムがクラッシュすることです。これを解決するには、アニメーションが完了するまでクリック イベントを無効にします。
過去にsetTimeOut
関数を使用したことがありますが、タイミングはすべてブラウザの速度に依存するため、信頼できる方法ではありません。
クリックイベントは次のとおりです。
$('.drag').on('click', function (e) {
e.preventDefault();
var target = $('.highlight-problem .drop-box:not(.occupied):first');
var targetPos = target.parents('td').position();
console.log(targetPos);
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
$(".occupied").parent(".flip-wrapper").addClass("flipped");
var clonedObject = b.clone()
if (b.data("letter") == target.parents('td').data("letter")) {
clonedObject.addClass("right-letter");
target.addClass('right-letter');
setTimeout(function () {
hitSound.play();
}, 550);
} else {
clonedObject.addClass("wrong-letter");
target.addClass('wrong-letter');
setTimeout(function () {
missSound.play();
}, 550);
}
clonedObject.appendTo("table").css({
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).stop().animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function () {
$(this).prop('disabled', false).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.highlight-problem .drop-box');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function () {
if ($(this).parents('td').data("letter") == $(this).find("div").data("letter")) {
console.log('letter is: ' + $(this).find("div").data("letter"))
wordIsCorrect++;
}
});