我正在做一个谜语游戏,我需要用JavaScript用六位数字制作一个锁组合.我找不到正确组合的方法.我尝试制作6个不同的变量,每个变量有十个可能的数字(从0到9).问题是:当我编写JavaScript时,我使用条件为(n1 == 0&& n2 == 0&& n3 == 0&& n4 == 0&& ; n5 == 0&&n6 == 0)来在所有条件都为真时更改div的ID,但这似乎不起作用.
我看到了一个代码(https://codepen.io/MrHill/pen/kLvcw),它的锁组合与我的相似.编码器将数组与整个组合结合在一起使用,但实际上我对代码并不十分了解,因此我更喜欢使用分离的变量.我必须使用数组还是有办法像现在这样编写if语句?
我应该使用jquery,还是坚持使用Js?
这是我的代码:
var n1 = 1;var n2 = 3;var n3 = 2;var n4 = 1;var n5 = 1;var n6 = 1;document.getElementByID("number1").INNERHTML = n1;document.getElementByID("number2").INNERHTML = n2;document.getElementByID("number3").INNERHTML = n3;document.getElementByID("number4").INNERHTML = n4;document.getElementByID("number5").INNERHTML = n5;document.getElementByID("number6").INNERHTML = n6;function incN1() { if (n1>9) { n1 = 0; document.getElementByID("number1").INNERHTML = n1; } else { document.getElementByID("number1").INNERHTML = n1++; }}function incN2() { if (n2>9) { n2 = 0; document.getElementByID("number2").INNERHTML = n2; } else { document.getElementByID("number2").INNERHTML = n2++; }}function incN3() { if (n3>9) { n3 = 0; document.getElementByID("number3").INNERHTML = n3; } else { document.getElementByID("number3").INNERHTML = n3++; }}function incN4() { if (n4>9) { n4 = 0; document.getElementByID("number4").INNERHTML = n4; } else { document.getElementByID("number4").INNERHTML = n4++; }}function incN5() { if (n5>9) { n5 = 0; document.getElementByID("number5").INNERHTML = n5; } else { document.getElementByID("number5").INNERHTML = n5++; }}function incN6() { if (n6>9) { n6 = 0; document.getElementByID("number6").INNERHTML = n6; } else { document.getElementByID("number6").INNERHTML = n6++; }}function ups() { alert("It's locked! Try to find the combination to find out what this locker hIDes!");}if (n1==0 && n2==0 && n3==0 && n4==0 && n5==0 && n6==0) { document.getElementByID('lock').ID = "unlock";}
body { background-color: black;}#container { margin: 0 0 0 0; position: fixed;}#halfCircle { background-color: black; border: 24px solID #777; border-radius: 50%; wIDth: 200px; height: 200px; margin: 100px 0 0 500px;}#lock { wIDth: 35px; height: 20px; background-color: black; position: fixed; margin-left: 720px; margin-top: -140px; display: none;}#unlock { wIDth: 35px; height: 20px; background-color: black; position: fixed; margin-left: 720px; margin-top: -140px;}#locker { background-color: #d4af37; border: 2px solID #404040; border-radius: 2px; wIDth: 300px; height: 300px; margin: -120px 0 0 473px;}#code { margin: -190px 0 0 495px; float: auto; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;}#number1 { background-color: #777; margin-left: 1px; border: 1px solID #404040; border-radius: 4px; wIDth: 40px; height: 80px; color: #404040; Font-size: 36px; Font-family: Roboto Mono; Font-weight: lighter; float: left; padding-top: 20px;}#number1:hover { background-color: #404040; color: #000; Transition-duration: 0.5s; -webkit-Transition-duration: 0.5s; -moz-Transition-duration: 0.5s; -o-Transition-duration: 0.5s; cursor: pointer;}#number2 { background-color: #777; margin-left: 1px; border: 1px solID #404040; border-radius: 4px; wIDth: 40px; height: 80px; color: #404040; Font-size: 36px; Font-family: Roboto Mono; Font-weight: lighter; float: left; padding-top: 20px;}#number2:hover { background-color: #404040; color: #000; Transition-duration: 0.5s; -webkit-Transition-duration: 0.5s; -moz-Transition-duration: 0.5s; -o-Transition-duration: 0.5s; cursor: pointer;}#number3 { background-color: #777; margin-left: 1px; border: 1px solID #404040; border-radius: 4px; wIDth: 40px; height: 80px; color: #404040; Font-size: 36px; Font-family: Roboto Mono; Font-weight: lighter; float: left; padding-top: 20px;}#number3:hover { background-color: #404040; color: #000; Transition-duration: 0.5s; -webkit-Transition-duration: 0.5s; -moz-Transition-duration: 0.5s; -o-Transition-duration: 0.5s; cursor: pointer;}#number4 { background-color: #777; margin-left: 1px; border: 1px solID #404040; border-radius: 4px; wIDth: 40px; height: 80px; color: #404040; Font-size: 36px; Font-family: Roboto Mono; Font-weight: lighter; float: left; padding-top: 20px;}#number4:hover { background-color: #404040; color: #000; Transition-duration: 0.5s; -webkit-Transition-duration: 0.5s; -moz-Transition-duration: 0.5s; -o-Transition-duration: 0.5s; cursor: pointer;}#number5 { background-color: #777; margin-left: 1px; border: 1px solID #404040; border-radius: 4px; wIDth: 40px; height: 80px; color: #404040; Font-size: 36px; Font-family: Roboto Mono; Font-weight: lighter; float: left; padding-top: 20px;}#number5:hover { background-color: #404040; color: #000; Transition-duration: 0.5s; -webkit-Transition-duration: 0.5s; -moz-Transition-duration: 0.5s; -o-Transition-duration: 0.5s; cursor: pointer;}#number6 { background-color: #777; margin-left: 1px; border: 1px solID #404040; border-radius: 4px; wIDth: 40px; height: 80px; color: #404040; Font-size: 36px; Font-family: Roboto Mono; Font-weight: lighter; float: left; padding-top: 20px;}#number6:hover { background-color: #404040; color: #000; Transition-duration: 0.5s; -webkit-Transition-duration: 0.5s; -moz-Transition-duration: 0.5s; -o-Transition-duration: 0.5s; cursor: pointer;}
<!DOCTYPE HTML><HTML><head> <Title>13 21 11</Title> <Meta charset="utf-8"> <link rel="stylesheet" href="@R_403_6822@s://Fonts.GoogleAPIs.com/CSS?family=Roboto Mono"/></head><body> <div ID="container"> <div onclick="ups()" ID="halfCircle"></div> <div ID="lock"></div> <div ID="locker"></div> <div ID="code"> <div align="center" onclick="incN1()" ID="number1"></div> <div align="center" onclick="incN2()" ID="number2"></div> <div align="center" onclick="incN3()" ID="number3"></div> <div align="center" onclick="incN4()" ID="number4"></div> <div align="center" onclick="incN5()" ID="number5"></div> <div align="center" onclick="incN6()" ID="number6"></div> </div> </div></body></HTML>
这是我的游戏的链接:
My combination lock
希望你能帮我!
最佳答案您的if语句仅在页面首次加载时运行一次(因此条件显然为false).看起来您想在用户每次增加一个数字时都要检查组合-在这种情况下,将该校验代码放入一个函数中,并在每个函数incN1等内部调用它. 总结以上是内存溢出为你收集整理的密码锁游戏(JavaScript) 全部内容,希望文章能够帮你解决密码锁游戏(JavaScript) 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)