js爲我的老虎機遊戲

我剛剛開始學習HTML，CSS，JS和jQuery，我正在嘗試爲自己的教育構建一個簡單的老虎機網站。js爲我的老虎機遊戲

我有三個窗口，每個窗口都有相同的三個圖像循環通過它們。點擊後，窗口會凍結當前圖像。我想要做的是，如果在每個窗口被點擊後所有三個窗口的src都是相同的，則調用alert("You've won")，如果它們不完全相同，則調用alert("You've lost")。

這裏的DIV：

<div class="row forthRow"> 
    <div class="slotContainer col-xs-4 col-md-2 col-md-offset-3"> 
     <img src="image1.jpg" id="mainImage1" class="win_or_lose col-xs-12" alt=""/> 
    </div> 
    <div class="slotContainer col-xs-4 col-md-2"> 
     <img src="image2.jpg" id="mainImage2" class="win_or_lose col-xs-12" alt="flame"/> 
    </div> 
    <div class="slotContainer col-xs-4 col-md-2"> 
     <img src="image3.jpg" id="mainImage3" class="win_or_lose col-xs-12" alt="bolt"/> 
    </div> 
</div>

和這裏的.js文件：

$(document).ready(function() { 

    var counter1 = 1; 
    var counter2 = 2; 
    var counter3 = 3; 
    var paused1 = false; 
    var paused2 = false; 
    var paused3 = false; 

    $('input[type=radio]').click(function() { 
    delay = $('input[type=radio]:checked').val(); 

    $(".speed_buttons").fadeOut(0, function() { 
     $(".start_over_button").fadeIn(0); 
    }); 

    $("p.directionsOtheGame").text("Get three in a row!"); 

    setInterval(function firstWindow() { 

     if (paused1 == false) { 
     counter1 = counter1 + 1; 
     if (counter1 > 3) { 
      counter1 = 1; 
     }; 

     $("#mainImage1").attr("src", "image" + counter1 + ".jpg"); 
     }; 
    }, delay); 

    setInterval(function secondWindow() { 

     if (paused2 == false) { 
     counter2 = counter2 + 1; 
     if (counter2 > 3) { 
      counter2 = 1; 
     }; 

     $("#mainImage2").attr("src", "image" + counter2 + ".jpg"); 
     }; 
    }, delay); 

    setInterval(function thirdWindow() { 

     if (paused3 == false) { 
     counter3 = counter3 + 1; 
     if (counter3 > 3) { 
      counter3 = 1; 
     }; 

     $("#mainImage3").attr("src", "image" + counter3 + ".jpg"); 
     }; 
    }, delay); 

    $("#mainImage1").click(function() { 
     paused1 = true; 
    }); 

    $("#mainImage2").click(function() { 
     paused2 = true; 
    }); 

    $("#mainImage3").click(function() { 
     paused3 = true; 
    }); 
    }); 
});

我已經找遍了StackOverflow上以及W3Schools的和api.jquery.com無濟於事。我希望我的問題清楚。感謝您提供任何幫助。

來源

2016-11-08 Squackattack

您是否收到目前的錯誤代碼，或者只是尋求解決問題的幫助？如果您只是想獲得指導，那麼這可能是無關緊要的，因爲它可能太寬泛，並且需要太多時間才能合理回答。 – Aurora0001

對於初學者來說，代碼並不完整，所以如果你包含了運行代碼所需的所有東西，可能對你有幫助 – mike510a

我目前的代碼沒有錯誤。我在完整的代碼中進行了編輯。我正在尋找解決問題的辦法，而不是一般的指導。謝謝。 – Squackattack

讓這個如果所有三個窗口的src是相同的點擊

後每個窗口的圖像是基於您的[全球]變量，你不需要檢查src你可以檢查變量，即：

if (counter1==counter2 && counter1==counter3) 
    alert("You've won");

此假設你已經檢查了他們都暫停：

if (paused1 && paused2 && paused3) 
    if (counter1==counter2 && counter1==counter3) 
    alert("You've won");

來源

2016-11-08 17:04:24

謝謝freedomn -m你的解決方案非常有意義，但是當我將它廣告到我的腳本時，沒有任何變化。我知道這是由於我自己的無知而不是你的建議，但我不知道我做錯了什麼。我在保存的vars列表下添加了代碼，刷新了頁面和頁面，沒有任何更改。沒有錯誤。該頁面在騎車圖片和暫停方面效果很好。只是仍然沒有戒備。 – Squackattack

freedomn-m謝謝！經過一些修補之後，我想出瞭如何納入你的答案！對此，我真的非常感激：） – Squackattack

讓每個窗口在停止時調用一個函數。如果所有的窗口都沒有停止，該功能什麼都不做。如果他們全部停止，它會檢查結果。另外，作爲一般的編程技巧，如果你不止一次地做同樣的事情，那就做一個功能來做到這一點。你有幾乎相同的代碼重複三次，這是不好的幾個原因：

任何更改（錯誤修復，修改）將不得不重複。
您的代碼庫比它大，因此難以調試和發貨。

來源

2016-11-08 17:04:10 Kittsil

是的，問題代碼中存在各種代碼審查類型問題，但可重用函數可能是最好的改進。 –

感謝基茨希爾。我編輯了我的問題以顯示整個.js代碼。你的提示很有意義。我是這樣一個新秀。我一直在研究不到一週的編碼。我不知道如何開始簡化這個... – Squackattack

js爲我的老虎機遊戲

回答

相關問題