9
私は、あるモルのゲームにhtmlのヒットを作成しようとしていました。あるモルのゲームに一定の間隔でクラスが追加され、別のタイムアウト関数がトリガーされ、チェックが実行される前にモルをクリックしてクラスを削除し、モルにまだクラスが添付されているかどうかを判断します。Javascript settimeouts on html hack a moleゲーム
ここは私のゲームのjsfiddleです：https://jsfiddle.net/gko9puqf/1/以下は私のjavascriptです。タイムアウトが（40のスコアを中心に）大幅に短くなるまで予想され、タイムアウトが無視されたかのようにモルが出てグリッチとして
var score = 0;
var numberofpipes = 9;
var lastnum = 0;
var intervalseconds;
var interval;
var haslost = false;
var checkpipetimer;
var timeoutfunc;
var timeoutinit;
var timers = [];
var burstingpipes = {};
var timeoutinit = setTimeout(startaburst, 3000);
$('#scorecontainer').text(score);
//starts a bursting pipe
function startaburst() {
clearTimeout(timeoutinit);
if (score < 10) {
intervalseconds = 2;
} else if (score >= 10 && score < 25) {
intervalseconds = 1.5;
} else if (score >= 25 && score < 40) {
intervalseconds = 1;
} else if (score >= 40 && score < 60) {
intervalseconds = 0.5;
} else if (score >= 60) {
intervalseconds = 0.25;
} else if (score > 100) {
intervalseconds = 0.1;
}
interval = intervalseconds * 1000;
burstingpipe();
//creating a loop with the new timeout value as the game gets harder.
//also assigning it to the timeoutfunc variable so i can cancel the loop later.
timeoutfunc = setTimeout(startaburst, interval);
}
//adds the bursting pipe attributes to the pipe intersections
function burstingpipe() {
randomnum = Math.floor(Math.random() * 9) + 1;
//cant be the same twice in case of overlapping
if ((randomnum == lastnum) || $("." + randomnum).hasClass("burstingpipe")) {
//if the random num is still valid after -1, -1
if (((randomnum - 1) >= 0) && !($("." + (randomnum - 1)).hasClass("burstingpipe"))) {
randomnum = (randomnum - 1);
//add one to the random number
} else if (((randomnum + 1) <= (numberofpipes)) && !($("." + (randomnum + 1)).hasClass("burstingpipe"))) {
randomnum = (randomnum + 1);
} else {
burstingpipe();
}
}
//make the lastnum the current number so we dont get 2 in a row
lastnum = randomnum;
randomdiv = $("." + randomnum);
console.log(randomdiv.hasClass("burstingpipe"));
//adds shake animation and red glow
console.log(randomnum);
randomdiv.addClass("burstingpipe");
//setting a timeout of 3 seconds, so th user has 3 seconds to press each
//bursting pipe before it bursts.
checkpipetimer = setTimeout(haspipeburst.bind(this, randomdiv), 3000);
}
//function to check if the pipe has burst.
function haspipeburst(pipecheck) {
console.log(pipecheck);
console.log(pipecheck.hasClass("burstingpipe"));
//checking to see if the pipe still has the class attached after 3 seconds
//and if the user has already lost.
if (pipecheck.hasClass("burstingpipe")) {
//if the pipe still has the class attached - game over.
haslost = true;
$("#result").text("you have lost");
//stopping the loop.
clearTimeout(timeoutfunc);
//changing the background color to make it look like the pipe has broken.
//(will possibly change to image in future)
//$(".hitpoint").removeClass("burstingpipe");
$(pipecheck).css("background-color", "#49c1e2");
}
}
//when the user clicks a hitpoint the class is removed and they gain a point.
$(document).on('click', '.hitpoint', function() {
if ($(this).hasClass("burstingpipe") && haslost == false) {
$(this).removeClass("burstingpipe");
score++;
$("#scorecontainer").text(score);
}
});
は、それが動作します。
私は今何時間もコードを注視しており、少し進歩したので、私があなたを助けてくれることを願っています！私はタイムアウトが適切に完了していないことと関係していると信じています。
ご協力いただきありがとうございます。
'settimeout'あなたはそれがバグだらけ – Mairaj
そうだろう使用してきた道をバギーされていない申し訳ありませんが、これは、スタックオーバーフローの私の最初の投稿です合意された、私は意味ですか私がそれらを使用している方法は、明らかにどこかに欠陥があります。 –