FadeIn隨機Javascript游戲

Question

我正在嘗試使用javascript解決迷你游戲的此問題。 該游戲假定使用帶有jquery.random-fade-in.min.js的randomFadeIn隨機顯示div。 它可以工作，但問題是我無法阻止它運行。 這只是一個基本的JavaScript游戲，但很難使用jquery來實現

這是我的完整代碼

 const result = document.getElementById(".box-container>div"); console.log(result); const button = document.getElementsByTagName("div"); let sec = 0; function gameStart(num) { let num1 = 800; if ($(".box-container>div>p").css('opacity') != 0) { console.log("not yet done"); $(function() { $('.box-container').randomFadeIn(800); }); } else { console.log("win"); }; } function clickBox() { $(".box-container>div>p").click(function() { $(this).animate({ opacity: 0 }, 800); }) } function gameWins() {} function gameStops() { setTimeout(function() { alert("Game Ends"); }, 60000); } clickBox(); //gameStops(); gameWins(); 

 .box-container { width: 232px; float: left; width: 45%; } .box-container div { float: left; height: 100px; margin-bottom: 8px; margin-right: 8px; overflow: hidden; width: 100px; } .box-container div p { background: #097; box-sizing: border-box; color: #fff; display: none; font-size: 20px; height: 100%; margin: 0; padding-top: 14px; text-align: center; width: 100%; } .clearfix:after { clear: both; content: ''; display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script> <h1> Click Dem Boxes</h1> <button onclick="gameStart()"> Start game </button> <p>Mechanics: You need to click all the boxes before the time ends</p> > just a bunch of divs that fades in and does not stop <div class="box-container clearfix"> <div> <p></p> </div> <div> <p></p> </div> <div> <p></p> </div> <div> <p></p> </div> <div> <p></p> </div> 

Answer 1

通過使用.stop（）函數，可以停止動畫。 請參見下面的代碼段。

 let maxSeconds = 30000; let numOfCards = $('.box').length; function gameStart() { console.log("Game started"); let numOfClicked = 0; $(".box-container>div>p").click(function() { // Increase the counter numOfClicked++; // Fade out $(this).fadeOut(800); if(numOfClicked == numOfCards){ gameWon(); } }) $('.box-container').randomFadeIn(800); setTimeout( function() { if(numOfClicked != numOfCards){ gameLost(); } }, maxSeconds); } function gameWon(){ gameStop(); console.log("You won the game!"); } function gameLost(){ gameStop(); console.log("You lost the game!"); } function gameStop(){ $(".box-container>div>p").stop(false, false); } 

 .box-container { width: 232px; float: left; width: 45%; } .box-container div { float: left; height: 100px; margin-bottom: 8px; margin-right: 8px; overflow: hidden; width: 100px; } .box-container div p { background: #097; box-sizing: border-box; color: #fff; display: none; font-size: 20px; height: 100%; margin: 0; padding-top: 14px; text-align: center; width: 100%; } .clearfix:after { clear: both; content: ''; display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script> <h1> Click Dem Boxes</h1> <button onclick="gameStart()"> Start game </button> <p>Mechanics: You need to click all the boxes before the time ends</p> > just a bunch of divs that fades in and does not stop <div class="box-container clearfix"> <div class="box"> <p></p> </div> <div class="box"> <p></p> </div> <div class="box"> <p></p> </div> <div class="box"> <p></p> </div> <div class="box"> <p></p> </div> </div>