javascript - 密码锁游戏 (JavaScript)

Question

我正在制作一个谜语游戏，我需要在 JavaScript 中制作一个六位数的锁组合。我找不到做出正确组合的方法。我尝试制作 6 个不同的变量，每个变量都有十个可能的数字(从 0 到 9)。问题是:当我编写 javascript 时，我使用了条件为 (n1==0 && n2==0 && n3==0 的 if 语句 && n4==0 && n5==0 && n6==0) 在所有条件为 true 时更改 div 的 id ，但这似乎不起作用。 我看到一个代码 ( https://codepen.io/MrHill/pen/kLvcw ) 与我的锁组合相似。编码人员对整个组合使用了一个数组，但我实际上并没有很好地理解代码，我更愿意使用单独的变量。我必须使用 array 还是有办法像我现在一样编写 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="https://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

希望你能帮助我!

Answer 1

您的 if 语句仅在页面首次加载时运行一次(因此条件显然为 false)。看起来您想在每次用户递增数字时检查组合 - 在这种情况下，将检查代码放在函数中并在每个函数 incN1 等中调用它。