Question

我制作了一个涉及收集线索的浏览器游戏。最后，我有一个页面，要求用户输入几个字符以便重定向到另一个页面。有13个对应于最后一条线索中的13个字母的框。因此，我使用了基本的密码输入表单，删除了用户ID部分，并在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>&nbsp; &nbsp; &nbsp; &nbsp; This door requires a code to unlock...<h3>
    <h1>L I K E &nbsp; &nbsp; 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"/>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <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;
}

Answer 1

按照问题下的评论中的建议进行操作。
清理HTML，正确关闭标签，避免使用内联样式和脚本。

关于您的游戏，请尝试以下类似方法。
只要您填写keys对象中的键，并且它们的值与当前提交的表单ID 相符，此简单的代码就可以用于无限数量的表单。 strong>：

var keys = {
  door_1: "q",
  door_2: "asd",
  // add more door keys here
}


$("form.door").on("submit", function(e) {

  e.preventDefault(); // Don't submit form

  // Get all clues as concatenated lowercase string:
  var clues = $(this).find(".clue").get().map(el => el.value).join("").toLowerCase();

  // Check if concatenated clues match the key value
  if ( clues === keys[ this.id ] ) {
    console.log("GOOD!!!");
  } else {
    console.log("BAD LUCK");
  }

});

input.clue {
  width: 20px;
  text-align: center;
}

<form class="door" id="door_1">
  <p>Enter <b>Q</b> upper or lowercase to enter this door</p>
  <input class="clue" maxlength=1 type=text>
  <button type="submit">ENTER</button>
</form>

<form class="door" id="door_2">
  <p>Enter <b>A S D</b> upper or lowercase to enter this door</p>
  <input class="clue" maxlength=1 type=text>
  <input class="clue" maxlength=1 type=text>
  <input class="clue" maxlength=1 type=text>
  <button type="submit">ENTER</button>
</form>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

具有多种条件的Javascript密码表格

1 个答案: