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为我的老虎机游戏

回答

相关问题