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;
});
});
});
我已经找遍了*上以及W3Schools的和api.jquery.com无济于事。我希望我的问题清楚。感谢您提供任何帮助。
让这个如果所有三个窗口的src是相同的点击
后每个窗口的图像是基于您的[全球]变量,你不需要检查src
你可以检查变量,即:
if (counter1==counter2 && counter1==counter3)
alert("You've won");
此假设你已经检查了他们都暂停:
if (paused1 && paused2 && paused3)
if (counter1==counter2 && counter1==counter3)
alert("You've won");
谢谢freedomn -m你的解决方案非常有意义,但是当我将它广告到我的脚本时,没有任何变化。我知道这是由于我自己的无知而不是你的建议,但我不知道我做错了什么。我在保存的vars列表下添加了代码,刷新了页面和页面,没有任何更改。没有错误。该页面在骑车图片和暂停方面效果很好。只是仍然没有戒备。 – Squackattack
freedomn-m谢谢!经过一些修补之后,我想出了如何纳入你的答案!对此,我真的非常感激 :) – Squackattack
让每个窗口在停止时调用一个函数。如果所有的窗口都没有停止,该功能什么都不做。如果他们全部停止,它会检查结果。另外,作为一般的编程技巧,如果你不止一次地做同样的事情,那就做一个功能来做到这一点。你有几乎相同的代码重复三次,这是不好的几个原因:
- 任何更改(错误修复,修改)将不得不重复。
- 您的代码库比它大,因此难以调试和发货。
是的,问题代码中存在各种代码审查类型问题,但可重用函数可能是最好的改进。 –
感谢基茨希尔。我编辑了我的问题以显示整个.js代码。你的提示很有意义。我是这样一个新秀。我一直在研究不到一周的编码。我不知道如何开始简化这个... – Squackattack
您是否收到目前的错误代码,或者只是寻求解决问题的帮助?如果您只是想获得指导,那么这可能是无关紧要的,因为它可能太宽泛,并且需要太多时间才能合理回答。 – Aurora0001
对于初学者来说,代码并不完整,所以如果你包含了运行代码所需的所有东西,可能对你有帮助 – mike510a
我目前的代码没有错误。我在完整的代码中进行了编辑。我正在寻找解决问题的办法,而不是一般的指导。谢谢。 – Squackattack