html5拨动密码锁游戏,密码锁游戏(JavaScript)

我正在做一个谜语游戏,我需要用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;

}

13 21 11

这是我的游戏的链接：

希望你能帮我！