密码锁游戏(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;
}

<!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

希望你能帮我！

最佳答案

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

密码锁游戏(JavaScript)

猜你在找的HTML相关文章