Игра кодового замка (JavaScript) - PullRequest
Новая
       7

Игра кодового замка (JavaScript)

3 голосов
/ 18 марта 2019

Я создаю игру-загадку, и мне нужно создать комбинацию блокировки из шести цифр в JavaScript .Я не могу найти способ сделать правильную комбинацию.Я попытался создать 6 различных переменных, каждая из которых имеет десять возможных чисел (от 0 до 9).Дело в том, что когда я пишу javascript , я использую if statement с условиями (n1==0 && n2==0 && n3==0 && n4==0 && n5==0 && n6==0), чтобы изменить div s id, когда все условия были true, но этоне похоже на работу.Я видел код (https://codepen.io/MrHill/pen/kLvcw), который имеет аналогичную комбинацию блокировки, как у меня. Кодер использовал array со всей комбинацией, но на самом деле я не очень хорошо понял код, и я предпочел бы использовать разделенный variables. Нужно ли использовать array или есть способ написать if statement, как сейчас?
Стоит ли использовать 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>

Вот ссылка на мою игру:

Мой кодовый замок

Надеюсь, вы можете помочь мне!

1 Ответ

2 голосов
/ 18 марта 2019

Ваш оператор if выполняется только один раз, когда страница загружается впервые (и поэтому условие, очевидно, false).Похоже, вы хотите проверять комбинацию каждый раз, когда пользователь увеличивает число - в этом случае поместите этот проверочный код в функцию и вызовите его внутри каждой из функций incN1 и т. Д.

...