javascript - Image unable to re-appear in SetTimeout -
functionality:
users tap on image(group of spots) removed. when user click on image, image fadeout. however, image re-appear after 10s later, if user not click on image, new image not displayed after 10s.
what has been done:
at each click, image fadeout. secondly, understand image reappear after 10 seconds, should user tap on initial image , disappears, need have following process features:
1.) conditional check, if tap image disappears, new identical image re-appear after 10s setinterval function. else, return false , nothing until user clicks on image.
issue:
at point, stuck @ how create function call performs conditional check , enable new image re-appear after 10s when initial image fadesout.
i need help. thanks.
code:
function a() { var counterinterval, counter = 0, timer = 30; var gamescore = 0, tap_spots = false; $('#gamepage').fadein({ duration: slideduration, queue: false }); $('#gamepage').animate({ 'left': '0px' }, { duration: slideduration, easing: 'easeinoutquart', queue: false, complete: function() { $('#gametimer').show(); counterinterval = setinterval(function() { counter = counter + 1; timer = timer - 1; $("#gametimer").attr("src", "img/timeleft/timer_" + timer + ".png"); console.log("time left is:" + timer); //end of game condition if (timer == 0) { clearinterval(counterinterval); $('#gamepage').fadeout({ duration: slideduration, queue: false }); $('#gamepage').animate({ 'left': '1081px' }, { duration: slideduration, easing: 'easeinoutquart', queue: false }); $('#resultpage').fadein({ duration: slideduration, queue: false }); $('#resultpage').animate({ 'left': '0px' }, { duration: slideduration, easing: 'easeinoutquart', queue: false }); } else if (timer < 30 && timer > 0) { //game method $("#spot_1").click(function() { //remove spots $("#spot_1").fadeout(); console.log("blackspot removed"); //increment score 10 gamescore = gamescore + 10; $("#gamescore").attr("src", "img/scorepoint/score_" + gamescore + ".png"); //create interval spots reappear after user clicks on spots if (tap_spots == true) { settimeout(function() { $("#spot_1").fadein(); console.log("blackspot re-appears"); }, 3000); } else return false; }); $("#spot_2").click(function() { //create interval spots reappear after user clicks on spots $("#spot_2").fadeout(); console.log("blackspot #2 removed"); gamescore = gamescore + score; $("#gamescore").attr("src", "lib/skii/img/page09/scorepoint/score_" + gamescore + ".png"); }); $("#spot_3").click(function() { //create interval spots reappear after user clicks on spots }); $("#spot_4").click(function() { //create interval spots reappear after user clicks on spots }); $("#spot_5").click(function() { //create interval spots reappear after user clicks on spots }); $("#spot_6").click(function() { //create interval spots reappear after user clicks on spots }); } }, 1000) } }); }#playtime { position: absolute; top: 180px; width: 200px; height: 200px; left: 150px; z-index: 100; } #score { position: absolute; top: 180px; width: 200px; height: 200px; left: 830px; z-index: 100; } #spot_1 { position: absolute; top: 940px; width: 100px; height: 100px; left: 450px; z-index: 100; } #spot_2 { position: absolute; top: 1000px; width: 100px; height: 100px; left: 550px; z-index: 100; } #spot_3 { position: absolute; top: 1050px; width: 100px; height: 100px; left: 350px; z-index: 100; } #spot_4 { position: absolute; top: 1200px; width: 100px; height: 100px; left: 500px; z-index: 100; } #spot_5 { position: absolute; top: 1160px; width: 100px; height: 100px; left: 630px; z-index: 100; } #spot_6 { position: absolute; top: 1380px; width: 100px; height: 100px; left: 480px; z-index: 100; }<div id="gamepage" style="position:absolute; z-index:11; top:0; width: 1080px; height: 1920px; margin:auto;"> <span id="score"><img id = "gamescore" src="img/scorepoint/score_0.png"></span> <span id="playtime"><img id = "gametimer" src="img/timeleft/timer_30.png"></span> <img id="spot_1" src="img/spot_01.png" /> <img id="spot_2" src="img/spot_02.png" /> <img id="spot_3" src="img/spot_03.png" /> <img id="spot_4" src="img/spot_04.png" /> <img id="spot_5" src="img/spot_05.png" /> <img id="spot_6" src="img/spot_06.png" /> </div>
you're making lot more complicated needs be. no need separate functions each spot, , no need tap_spots boolean:
$('img').click(function() { var self = this; // hold onto clicked dom node later reference $(self).fadeout(); // fade out // game score stuff here window.settimeout(function() { $(self).fadein(); // settimeout has elapsed, can fade in },3000); // 3 seconds here, not 10, easier demo });.positioner { width: 50px; height: 50px; border: 1px solid; display: block; float:left; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- changed images different urls, see comments below --> <div class="positioner"><img src="//placehold.it/50x50"></div> <div class="positioner"><img src="//placehold.it/51x51"></div> <div class="positioner"><img src="//placehold.it/49x49"></div> <div class="positioner"><img src="//placehold.it/35x35"></div> <div class="positioner"><img src="//placehold.it/55x55"></div> <div class="positioner"><img src="//placehold.it/50x45"></div> <div class="positioner"><img src="//placehold.it/52x51"></div> <div class="positioner"><img src="//placehold.it/50x50"></div>
Comments
Post a Comment