Я сделал браузерную игру, которая включает сбор улик.В конце у меня есть страница, которая просит пользователя ввести несколько символов для перенаправления на другую страницу.В последней подсказке 13 коробок, соответствующих 13 буквам.Поэтому я использовал основную форму ввода пароля, удалил часть «Идентификатор пользователя» и реплицировал поле ввода пароля с несколькими условиями в коде js.
Для каждого поля должно быть только два приемлемых ввода (заглавные / строчные буквы), и все они должны быть правильными, чтобы их можно было перенаправить.В противном случае пользователь получает сообщение об ошибке.Кнопка Отмена должна просто вернуть пользователя на предыдущую страницу.Позже пароль будет храниться на сервере, но пока нормально оставаться в коде.
Раньше я думал, что это работает, но после добавления CSS и игры с внешним видом он перестал работать.Теперь он позволяет перейти на конечную страницу, когда я набираю что-либо в любое количество полей.
Примечание. Я потратил несколько часов на поиск ответов в SO.Я не могу найти ничего, что точно соответствует этой проблеме, и я вырываю волосы!Я новичок в javascript (и довольно плохо знаком с кодированием полной остановки), так что это скорее всего что-то простое, что я упускаю.
Код ниже (я включил код для неформных битов на случай, если с этим что-то не получится) ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Game</title>
<link rel="shorcut icon" href="cogfavicon.jpg" type="image/jpg">
<link rel="icon" href="cogfavicon.jpg" type="image/x-icon">
<link rel="stylesheet" href="slider.css">
<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"> </script>
<script type="text/javascript">
// Works in Firefox/Chrome so far. Test with ipad...
$(document).ready(function () {
$('div.toshow').fadeIn(2200); // Fade in <div> on page load
});
$(document).on("click", "a", function () { // delegate all clicks on "a" tag (link)
var newUrl = $(this).attr("href"); // get the href attribute
if (!newUrl || newUrl[0] === "#") { // verify if the new url exists or is a hash
location.hash = newUrl; // set that hash
return;
}
$("html").fadeOut(function () { // then fade out the page
location = newUrl; // when the animation completes, set the new location
});
return false; // prevents the default browser behaviour stopping fade effect
});
</script>
<!-- Basic structure for blue door password -->
<body bgcolor="#000000">
<div id="wrapper" div class="toshow" style="display:none;"> <!-- div class added for fade in -->
<div style="position:relative;top:25px;left:0px;z-index:-1">
<img src="cogs.png" style="position:absolute" width="980" height="550" alt="Cogs" />
</div>
<div id="password" style="position:relative;top:130px;left:0px">
<div style="position:relative;top:10px;left:36px">
<h3> This door requires a code to unlock...<h3>
<h1>L I K E C L O C K W O R K</h1>
<form name="Blue Door Enter" style="position:relative;left:4px">
<input type="password" name="pw1" style="width:19px"/>
<input type="password" name="pw2" style="width:19px"/>
<input type="password" name="pw3" style="width:19px"/>
<input type="password" name="pw4" style="width:19px"/>
<input type="password" name="pw5" style="width:19px"/>
<input type="password" name="pw6" style="width:19px"/>
<input type="password" name="pw7" style="width:19px"/>
<input type="password" name="pw8" style="width:19px"/>
<input type="password" name="pw9" style="width:19px"/>
<input type="password" name="pw10" style="width:19px"/>
<input type="password" name="pw11" style="width:19px"/>
<input type="password" name="pw12" style="width:19px"/>
<input type="password" name="pw13" style="width:19px"/>
<p><input type="button" style="position:relative;left:148px" onclick="check(this.form)" value="Enter"/>
<input type="button" style="position:relative;left:148px" onclick="location.href='entranceroom.html';" value="Cancel"/></p>
</form>
</div>
</div>
<script language="javascript">
function check(form) { /* function to check PW */
if((form.pw1.value === "C" || "c") &&
(form.pw2.value === "H" || "h") &&
(form.pw3.value === "R" || "r") &&
(form.pw4.value === "I" || "i") &&
(form.pw5.value === "S" || "s") &&
(form.pw6.value === "T" || "t") &&
(form.pw7.value === "M" || "m") &&
(form.pw8.value === "A" || "a") &&
(form.pw9.value === "S" || "s") &&
(form.pw10.value === "S" || "s") &&
(form.pw11.value === "N" || "n") &&
(form.pw12.value === "O" || "o") &&
(form.pw13.value === "W" || "w")) { /* check if above values match */
window.open("firstcorridor.html","_self"); /*open target page if they do */
}
else {
alert("Incorrect") /* display error message */
}
}
</script>
</body>
</html>
Код CSS ...
/* main page components */
#wrapper {
margin: 1px auto;
padding: 0;
border: 1px solid black;
width: 980px;
height: 650px;
}
#enterbutton {
margin: 0px auto;
padding: 0;
border: 0px;
z-index: +1;
}
#logo3bn {
margin: 0px auto;
padding: 0;
border: 0px;
}
#password{
margin: 1px auto;
padding: 0;
border: 1px solid white;
width: 490px;
height: 325px;
color: #fff5f6;
background-color: black;
font-family: cambria math;
font-size: large;
}