用 JavaScript 为学校作业创建一个字母猜谜游戏答案

【问题标题】：Creating a letter guessing game for school assignment in JavaScript用 JavaScript 为学校作业创建一个字母猜谜游戏
【发布时间】：2020-03-22 17:59:44
【问题描述】：

所以我一直坚持这个练习太久了，不知道我做错了什么。我在处理数组和与它们合并循环时遇到了困难。

任务是将 10 个字母放入一个数组中，并让用户猜对至少一个字母。 3 次尝试后告诉用户他们已经丢失并终止代码。

<!DOCTYPE html>
<html>
<head>
  <title>Exercise 5</title>
  <link rel="stylesheet" type="text/css" href="css/styles5.css"/>
</head>



<body>
  <!--E X C E R S I S E 5 !-->
  <section id="allContent">
    <div id="container">
      <div class="bar1"></div><div id="bar2"></div>
      <h1 id="excersize">E x c e r c i c e &ensp;5</h1>
      <div id="titleBox">
        <p id="titlePRG">Enter five words</p>
      </div>
      <input type="text"   id="textField">
      <form>
        <input type="button" value="Enter" class="button" onclick="getValue()">   
      </form>
      <div id="valueReturned">
        <p id="returnText"><p>
        </div>
        <a href="index6.html"><h3> Next Exercise </h3></a>
      </div>
      <img src ="blank-laptop-png-transparent-pictures-free-icons-graphic-transparent-library-laptop-png-4042_3027.png" alt="laptopGraphic">
  </section>
    <!--E N D   O F   E X C E R c I c E 5 !-->


            <!-- S C R I P T I N G !-->
            <script>
        function getValue(){
          var input = document.getElementById("textField").value;
          var letters  =  ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] ;
          var a = letters.indexOf(input);


          for(var attempts = 0; attempts < 3; attempts++){

            if(input == ""){
            document.getElementById("valueReturned").innerHTML = "No input!";
            }else if( a >= 0){
              document.getElementById("valueReturned").innerHTML = "You guessed right!";

             break;

            } else if(input != a && attempts == 0){
              document.getElementById("valueReturned").innerHTML = "Two tries left!";
            }else if(input != a && attempts == 1){
              document.getElementById("valueReturned").innerHTML = "One more try!";
            }else if(input != a && attempts == 2){
              document.getElementById("valueReturned").innerHTML = "That was your last try! Get lost!";
            }

            }

           }// end of function
   </script>
   </body>
   </html>

所以如果用户猜对了，我希望代码停止运行或者停止循环。如果第一次尝试时猜测错误，则应显示消息“还剩两次尝试！” 如果第二次尝试时猜测错误，则应显示消息“还剩一次尝试！” 等等……

我暂时没有用 else 语句关闭我的条件，不确定是否需要。我的 For 循环设置不正确吗？我的 if，else if 条件不正确吗？

我非常需要你们的帮助！

【问题讨论】：

标签： javascript arrays loops for-loop

【解决方案1】：

问题是您正在迭代 3 次尝试每次尝试。

您需要针对所有尝试进行全局迭代。

换句话说，跟踪函数外部的尝试，否则每次调用该函数时，您都会将尝试重置为 3 - 它永远不会失败。

这是我对您的代码的重构，它还修复了一些其他问题并对其进行了优化。

(() => {
    let attempts = 3,
        input_el = document.getElementById('textField'),
        result_el = document.getElementById('valueReturned');
    window.getValue = () => {
        let input = input_el.value,
        letters  =  ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
        correct = letters.includes(input),
        msg;

        if (!attempts)
            msg = 'No attempts left!';
        else if (!input)
            msg = "No input!";
        else if(!correct) {
            attempts--;
            switch (attempts) {
                case 2:
                    msg = 'Two tries left!'
                    break;
                case 1:
                    msg = 'One more try!';
                    break;
                case 0:
                    msg = 'That was your last try! Get lost!';
                    break;
            }
        } else
            msg = 'You guessed right!';

        result_el.innerHTML = msg;

    }
})();

Fiddle

注意事项：

指示性地命名变量
将 JS 与 HTML 分开 - 将其放入专用的 .js 文件中。
这些天使用let 超过var
考虑集中式事件处理，而不是通过onclick 属性内联JS。这也意味着我们不必在 window 上声明一个全局函数供您的 onclick 参考。
我们将整个内容包装在一个 IIFE（立即调用的函数表达式）中，以防止污染全局命名空间。
想想每次触发事件时不需要复制什么。我们不需要每次都从 DOM 中获取对相同元素的引用 - 让我们在函数之外进行。
array.includes(val) 等同于 array.indexOf(val) !== -1。
我还让用户的尝试次数不能超过 3 次。

【讨论】：

刚刚看到这个，我打算做一些改变。我有点沮丧，因为我确实上了一所私立学校，而且课程很紧凑，我们在很短的时间内学习 JavaScript，他们提供给我们的理论缺少很多东西。内容很旧，他们提供了 2011 年的教程视频，因此您可能会看到我使用过时的东西的原因，我确实看到“让”比 var 使用得更多。更令人沮丧的是，我在这篇文章中得到的答案比过去两天从老师那里得到的还多，事实证明，由于病毒，通过消息进行交流很困难
@gears244 不幸的是，Web 开发教学通常依赖旧标准/软件。我采访过一些仍在学习如何在 Adobe Dreamweaver 中创建网站的人！如果你对 JavaScript 很认真，我强烈建议你自己去学习它，并且只使用这些类作为补充。如果您有编程的写作思维，那么像 David Flanagan 的 JavaScript：权威指南这样的书将带您从菜鸟到忍者。

【解决方案2】：

让我们来看看你的逻辑

<script>
        function getValue(){
          var input = document.getElementById("textField").value;
          var letters  =  ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] ;
          var a = letters.indexOf(input);

在这一点上，您打开了一个脚本标签并声明了一个函数getValue。然后从 id 为 "textField" 的 html 元素中获取输入，用 10 个字母初始化数组 letters，然后在 letters 中搜索 input，返回其索引。但是，这会导致输入仅被读取一次。然后它将执行您的 for 循环进行 3 次迭代，从而产生一个可能不需要的错误。

这样想，

您的函数需要在某个地方启动。通过将其嵌入到 html 中，它将为输入下方的按钮出现onclick()。这意味着每次调用函数时，输入被读取一次，循环在同一输入上运行 3 次。我将首先在您的getValue 函数之外创建一个变量——我们称之为attempts——这将允许我们在每次运行该函数时更新该变量。然后摆脱 for 循环，并使用条件分支，例如

var attempts = 0;
function getValue(){
  var input = document.getElementById("textField").value;
  var letters  =  ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] ;
  var a = letters.indexOf(input);
  if (attempts < 3) {
    // check if input is right
    if (input != "" && a != -1) {
       alert("success");
    }
    attempts += 1;
  }
// no else statement needed to terminate the program
// simply don't handle occurrences of attempts greater than  3
}

如果您不确定，请发表评论

【讨论】：

你可以使用while循环还是do-while循环？
这完全取决于我，我的老师说他希望我们限制使用循环的尝试，他说可以用 for 循环来完成，但我不知道怎么做。 Do while 似乎是最简单的，我实际上已经对其进行了编码并决定尝试 For。我遇到的主要问题是我在本地声明我的变量，而我的 if else 条件都混乱了。在分支我的条件时，我似乎总是有点阅读障碍。我的老师确实在推动我们使用循环
@gears244 是的，使用循环是处理大量数据输入的关键。如果您要使用 for 循环，我真的只能看到它与 event listener 一起工作，这可能超出了您的材料范围。但是，我的逻辑很糟糕，所以也许您不需要特定解决方案的事件侦听器