开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在与Hangman的输入匹配后，如何将每个元素或字母表显示为破折号？

在Hangman游戏中，当用户输入一个字母与秘密单词中的某个字母匹配时，通常需要更新显示，将之前显示的破折号替换为正确的字母。以下是如何在前端实现这一功能的步骤：

基础概念

HTML/CSS: 用于构建用户界面和样式。
JavaScript: 用于处理用户输入和更新界面。

实现步骤

初始化游戏界面:
- 使用HTML创建一个显示区域，用于展示破折号或已猜对的字母。
- 使用CSS美化界面。

处理用户输入:
- 使用JavaScript监听用户输入事件（如键盘按下）。
- 获取用户输入的字母。
更新显示:
- 检查用户输入的字母是否在秘密单词中。
- 如果匹配，更新显示区域，将对应的破折号替换为该字母。

示例代码

以下是一个简单的示例代码，展示如何实现上述功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hangman Game</title>
    <style>
        .hangman {
            font-size: 2em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="hangman" id="display"></div>
    <input type="text" id="guess" maxlength="1">
    <button onclick="checkGuess()">Guess</button>

    <script>
        const secretWord = "HELLO";
        let display = document.getElementById('display');
        let guessInput = document.getElementById('guess');

        function initializeDisplay() {
            let displayText = '';
            for (let i = 0; i < secretWord.length; i++) {
                displayText += '_ ';
            }
            display.textContent = displayText;
        }

        function checkGuess() {
            let guess = guessInput.value.toUpperCase();
            let newText = '';
            for (let i = 0; i < secretWord.length; i++) {
                if (secretWord[i] === guess) {
                    newText += guess + ' ';
                } else {
                    newText += '_ ';
                }
            }
            display.textContent = newText;
        }

        initializeDisplay();
    </script>
</body>
</html>

应用场景

在线游戏: Hangman游戏可以作为一个在线小游戏，供用户在浏览器中娱乐。
教育工具: 可以用于教学目的，帮助学生学习新单词。

常见问题及解决方法

用户输入未更新:
- 确保JavaScript代码正确处理用户输入事件，并更新显示区域。
- 检查是否有拼写错误或逻辑错误。

显示不正确:
- 确保在更新显示时，正确遍历秘密单词的每个字母，并检查是否匹配用户输入。
- 使用调试工具（如浏览器的开发者工具）检查变量值和代码执行流程。

参考链接

通过上述步骤和示例代码，你可以实现一个简单的Hangman游戏，并在用户猜对字母时更新显示。

相关搜索:如何将二进制输出格式化成与输入在逐位异或后相同的方式？我希望在输入后添加div，如果(悬停或焦点)，则如果我单击了新的div，则让div向上显示以单击另一个元素或焦点 asp订单号怎么生成 asp网站建设文献 asp代码组建页面吗 asp.net 主机 asp 订单提交页面 asp 修改图片大小 aspcms后台修改 asp 按钮传递参数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

用OpenCV实现猜词游戏

这是一个猜电影名字的游戏，会在屏幕下方显示电影的单词数目以及每个单词的字母个数，我们需要猜电影名字中含有的字母，如果猜测错误，右侧的刽子手处就会依次出现人头、身体、手和脚等，当猜错6次之后，刽子手就会行动...我们将显示以红色输入的有效字符，以便用户可以看到他们输入的字符。...我们还希望显示在电影标题中输入的所有字母（如果它出现在电影标题中）。...要检查用户输入的字符是否有效，我们将检查字符是否位于az或AZ之间。如果移动无效，我们将显示相应的消息 - INVALID MOVE，游戏将继续。...将检查用户输入的有效字符以查看它之前是否已被使用过，在这种情况下将显示相应的消息并且游戏将继续。请注意，在最后两个步骤中，不会更改不正确的尝试次数。

7162 0

第四章5：创建猜单词游戏（Hangman）

在我们共同完成项目后，你可以根据自己的需求随意添加图形。...这有助于了解我们的声明是否为我们所需要的。 ---- 生成隐藏字在游戏过程中，我们希望玩家能够看到所猜单词包含多少个字母。为此，我们可以创建一个字符串列表，其中每个字符串都是一个下划线。...列表中的元素数量将设置为所选单词的相同长度： 10| # 创建一个与单词长度相同的且包含下划线的列表 11| guesses = [ "_ " ] * len(word) 在第11行上，我们声明了一个名为...通过将列表乘以单词的长度，可以将列表内的元素复制，得到与单词长度一致的列表。创建游戏循环无论程序的大小，每个游戏都有一个主循环。我们的主循环将执行我们在“最终设计”部分中定义的逻辑。...这是一种将列表显示为字符串的简单方法。检查猜测结果接下来，所要实现的功能是检查并查看玩家的输入是否正确。

2.2K2 0

用Wolfram语言提高孩子们的英语词汇量

猜单词游戏（Hangman）在我设计的这款猜单词游戏中，学生们分为两组，根据单词的含义和长度进行猜词。和传统的Hangman游戏相同，这个单词必须在7次（单词Hangman的长度）内被猜中。...如果一方猜对，或者在90秒内尝试7次后没有猜对，则该轮游戏结束。...然后，控制方通过“UpdatePoints”为团队中参与猜词的每个玩家输入适当数量的标记：滑块用于定义给与的标记数，下拉（弹出）菜单用于定义玩家名字。...必须给出下列输入：两队中每个游戏者的名字（在名单'playerInA'和'playersInB'中）。...“含义”列表中相应单词的含义通过更改“timeLimit”变量改变时间限制（以秒为单位）。三字惊悚片这个游戏要求一个随机玩家（名字在输入中定义）用以特定字母开头的任意三个单词造三个不同的句子。

8741 0

在Linux上的Shell编程（2）

chap开头的文件，可以输入： $ cat chap*...能够显示出所有文件名中只有单个字符的文件，而cat x？则会显示出文件名长度为两个字符且第一个字符是x的所有文件。...匹配两个字符，*匹配余下的零个或多个字符，其效果就是找出所有文件名长度至少为两个字符的文件。另一种匹配单个字符的方法是在中括号[]中给出待匹配的字符列表。例如，[abc]能够匹配字符a、b或c。...，但是允许你选择具体要匹配哪些字符。你可以使用破折号指定一个字符的逻辑范围，这可是太方便了！例如，[0-9]能够匹配字符0～9。...在指定字符范围的时候，唯一的限制就是第一个字符在字母表上必须位于最后一个字符之前，因此[z-f]并不是一个有效的字符范围，而[f-z]就没有问题。

7891 0

【Day18】LeetCode算法刷题

首先，删除所有的空格和破折号。其次，将数组从左到右每3 个一组分块，直到剩下 4 个或更少数字。剩下的数字将按下述规定再分块： 2 个数字：单个含 2 个数字的块。...75” 解题思路：按照题目要求，我们需要先删除多余的符号，空格“ ”与破折号“-”，然后再给字符串的数字分组。...需要删除多余的元素，就需要遍历字符串中的每一个数字，为此我们可以先获取字符串的长度，再使用charAt()方法遍历每个数字，当遇到空格或者破折号就忽略掉，其余的数字就存放进集合中，为接下来的分组做准备。...需要分组，我们依旧需要遍历集合中的元素，和上面的思路一致，获取集合长度，遍历集合，将集合中的元素重新组成字符串，每遍历到下标与3取模为0时，就给字符串增添一个破折号“-”，这样就满足了三个数字一组的条件...2：输入：n = 2 输出：false 解题思路：每当我们获取一个正整数，我们都要获取这个数每个位置上数字的平方和；这时我们就需要通过循环来遍历一个正整数每个位置上的数字，再将每个数字与自己相乘

4792 0

Python 小型项目大全 31~35

你也可以自己想办法做到以下几点：创建一个“猜字母”变体，根据玩家猜测的字母顺序给出提示。根据玩家之前的猜测，在每次猜测后提示说“更热”或“更冷”。探索程序试着找出下列问题的答案。...工作原理为了更加用户友好，你的程序应该尝试解释用户可能的输入。例如，这个程序问用户一个是/否的问题，但是对于玩家来说，简单地输入y或n而不是输入完整的单词会更简单。...在输入源代码并运行几次之后，尝试对其进行实验性的修改。...程序的表示和逻辑部分的分离使得用新的特性或不同的设计进行更新变得更加容易。在专业软件开发中，这种策略是软件设计模式或软件架构的一个例子，它关注于如何构建你的程序，以便于理解和修改。...这就是十几行代码如何在屏幕上创建数百、数千或数百万个六边形。在命令提示符或终端窗口中，您可以将程序的输出从屏幕重定向到文本文件。

7661 0

还不会正则表达式？看这篇！

个人比较偏好Regex101，regex101支持在正则表达式的不同flavor之间切换、解释你的正则表达式、显示匹配信息、提供常用语法参考等功能，非常强大。 Regex101 ?...m：多行匹配（multiline）；将开始和结束字符（^和$）视为在多行上工作，即分别匹配每一行（由 \n 或 \r 分割）的开始和结束，而不只是只匹配整个输入字符串的最开始和最末尾处 Flags可以组合使用...的字面意思 |：替换字符（alternate character），匹配 | 前或后的表达式。...^ 和 $ 在表单验证时常需要使用，因为需要验证从开始到结尾的一个完整输入，而不是匹配输入中的某一段 Groups（分组） (xyz)：捕获分组（Capturing Group），匹配并捕获匹配项；例如...中的"foo"。被匹配的子字符串可以在结果数组的元素 [1], …, [n] 中找到，或在被定义的 RegExp 对象的属性 $1, …, $9中找到 -(?

7762 0

还不会正则表达式？看这篇！

个人比较偏好Regex101，regex101支持在正则表达式的不同flavor之间切换、解释你的正则表达式、显示匹配信息、提供常用语法参考等功能，非常强大。...m：多行匹配（multiline）；将开始和结束字符（^和$）视为在多行上工作，即分别匹配每一行（由 \n 或 \r 分割）的开始和结束，而不只是只匹配整个输入字符串的最开始和最末尾处 Flags可以组合使用...的字面意思 |：替换字符（alternate character），匹配 | 前或后的表达式。...^ 和 $ 在表单验证时常需要使用，因为需要验证从开始到结尾的一个完整输入，而不是匹配输入中的某一段 Groups（分组） (xyz)：捕获分组（Capturing Group），匹配并捕获匹配项；例如...中的 "foo"。被匹配的子字符串可以在结果数组的元素 [1], ..., [n] 中找到，或在被定义的 RegExp 对象的属性 $1, ..., $9 中找到 (?

9094 0

你可以试试这个 Linux 终端里的硬核游戏

白底黑字的“字母 + 数字”表示飞机，如果数字是 1 位数则代表该飞机的高度为几千英尺。大写字母表示螺旋桨飞机，小写字母表示喷气式飞机。...入口/出口沿雷达的边界显示为数字，飞机将在没有提示的情况下从这些入口飞入，这些入口有一个与它们相关联的方向，飞机总是从这个方向飞入（方向不显示在雷达上）。...高亮突出显示（为默认显示形式），飞机和指令信息显示正常。忽略(ignore)：i。不突出显示，当前如果没有指令，则该飞机信息区指令列显示为一行破折号。该显示形式将一直持续到使用标记指令。...标记、取消标记和忽略飞机在进入雷达区时默认被标记，这意味着它们在雷达区上以突出显示模式显示。飞机也可以不标记或忽略，一个被忽略的飞机以非高亮模式显示，并在信息区的指令列中显示一条虚线。...其他命令将正常执行，但当下次更新时，该飞机信息区命令列将返回一行破折号。未标记的飞机与忽略的飞机相同，只是在处理延迟命令时它会自动切换到标记状态。

1.2K1 0

还不会正则表达式？看这篇！

个人比较偏好Regex101，regex101支持在正则表达式的不同flavor之间切换、解释你的正则表达式、显示匹配信息、提供常用语法参考等功能，非常强大。 Regex101 ? Regexr ?...m：多行匹配（multiline）；将开始和结束字符（^和$）视为在多行上工作，即分别匹配每一行（由 \n 或 \r 分割）的开始和结束，而不只是只匹配整个输入字符串的最开始和最末尾处 Flags可以组合使用...的字面意思 |：替换字符（alternate character），匹配 | 前或后的表达式。...^ 和 $ 在表单验证时常需要使用，因为需要验证从开始到结尾的一个完整输入，而不是匹配输入中的某一段 Groups（分组） (xyz)：捕获分组（Capturing Group），匹配并捕获匹配项；例如...中的 "foo"。被匹配的子字符串可以在结果数组的元素 [1], ..., [n] 中找到，或在被定义的 RegExp 对象的属性 $1, ..., $9 中找到 (?

7081 0

在Bash中如何从字符串中删除固定的前缀后缀

如果模式与 parameter 扩展后的值的开始部分匹配，则扩展的结果是从 parameter 扩展后的值中删除最短匹配模式(一个 # 的情况)或最长匹配模式(## 的情况)的值 ${parameter...如果模式与 parameter 扩展后的值的末尾部分匹配，则扩展的结果是从 parameter 扩展后的值中删除最短匹配模式(一个 % 的情况)或最长匹配模式(%% 的情况)的值。...e "s/$suffix$//" o-wor 在sed命令中，^ 字符匹配以 prefix 开头的文本，而结尾的匹配以参考文档： stackoverflow question 16623835...https://www.gnu.org/software/bash/manual/bash.html#Shell-Parameter-Expansion 相关阅读：在bash中:-(冒号破折号)的用法...在Bash中如何将字符串转换为小写在shell编程中$(cmd) 和 `cmd` 之间有什么区别如何从Bash变量中删除空白字符更多好文请关注↓

5341 0

你可以试试这个 Linux 终端里的硬核游戏

白底黑字的“字母 + 数字”表示飞机，如果数字是 1 位数则代表该飞机的高度为几千英尺。大写字母表示螺旋桨飞机，小写字母表示喷气式飞机。...入口/出口沿雷达的边界显示为数字，飞机将在没有提示的情况下从这些入口飞入，这些入口有一个与它们相关联的方向，飞机总是从这个方向飞入（方向不显示在雷达上）。...高亮突出显示（为默认显示形式），飞机和指令信息显示正常。忽略(ignore)：i。不突出显示，当前如果没有指令，则该飞机信息区指令列显示为一行破折号。该显示形式将一直持续到使用标记指令。...标记、取消标记和忽略飞机在进入雷达区时默认被标记，这意味着它们在雷达区上以突出显示模式显示。飞机也可以不标记或忽略，一个被忽略的飞机以非高亮模式显示，并在信息区的指令列中显示一条虚线。...其他命令将正常执行，但当下次更新时，该飞机信息区命令列将返回一行破折号。未标记的飞机与忽略的飞机相同，只是在处理延迟命令时它会自动切换到标记状态。

1.1K3 0

扔掉代码表！用RNN“破解”摩斯电码

但是，从理论上讲，它是一种替代密码（substitution cipher）， ‍每个字母（和每个数字）的每个字母都有一些使用点和破折号的表示形式，如下所示。 ‍...现在，我们可以猜测它是一个替代密码，然后最终找出每个字母表的代码; 从而解码消息。或者，我们可以构建一个 encoder-decoder 模型来猜测（几乎）所有的单词！...我们采取的另一个自由是我们假设我们知道每个字母表都是由长度最长为4的字符串编码的（我们不需要做这个具体的假设，我们可以选择训练数据中最长莫尔斯码的长度作为接下来的max_length_x值）。...对于我们来说，特征的数量是输入序列词汇表中的元素数量，即4，因为我们有'。'，' - '，'*'和空白字符''。由于我们一次只输入一个热点编码矢量，因此时间步数为max_len_x。...在左边输入代码，中间输入相应的单词，右边输入预测。如果预测正确，那么该单词为绿色，否则为红色。正如你所看到的，错误的预测也不算太坏。

1.8K5 0

计算理论-形式语言

形式语言理论在计算机科学中扮演着重要的角色，尤其是在编译器设计、编程语言的设计、自然语言处理以及数据库查询语言等领域文法形式语言的定义通常包括以下几个部分：字母表（Σ）：这是形成语言的一组基本符号...形式语言理论中的文法被严格地定义为四元组G=(V, T, P, S)，其中： V和T分别是变元（非终结符）和终结符（终结符）的有穷集合，且V和T没有公共元素。...，即字母表通常用V或Σ表示,例如 V={x, y, z} 显而易见，构造句子不可能用集合之外的元素来构造(当然你可以写空串) 符号串定义符号串由字母表中的符号组成的序列例如abc就是上述字母表...也可以写成乘幂的形式 AmAn=Am+n 闭包v+与v* v0-由空符号串的集合。...P中的产生式的形式为A→α，其中A是非终极符，α是终极符或非终极符的串。

1441 0

Go每日一库之203：Sqids（简短唯一ID生成器）

更长的字母表产生的 ID 更短，更短的字母表产生的 ID 更长。默认字母表包含大写和小写字母，因此默认 ID 是区分大小写的。使用同样的输入和相同的字母表，生成的 ID 是唯一的。...Sqids 可以将一个或多个非负数编码为单个 ID。您可以编码的数字数量没有限制，但可以编码的数字大小有限（取决于实现语言）。...比如您可以编码开始时间和结束时间的 UNIX 时间戳为一个 ID，或者您可以将数据库分片号与主键一起编码，并节省额外的数据库查询。 Sqids 有什么限制 Sqids 不能编码负数。...少于 3 个字符的短单词不会被屏蔽。长度为 3 个字符的单词必须与 ID 完全匹配。如果 4 个或更多字符的单词是 ID 的子字符串，则会触发匹配。...为了检查 ID 是否有效，您可以重新编码解码后的数字，并检查 ID 是否匹配。

1301 0

LeetCode 748：license-key-formatting(密钥格式化)

题目描述有一个密钥字符串 S ，只包含字母，数字以及 '-'（破折号）。其中，N 个 '-' 将字符串分成了 N+1 组。给你一个数字 K，请你重新格式化字符串，使每个分组恰好包含 K 个字符。...示例 1：输入：S = "5F3Z-2e-9-w", K = 4 输出："5F3Z-2E9W" 解释：字符串 S 被分成了两个部分，每部分 4 个字符；注意，两个额外的破折号需要删掉。...与lowsurrogate也对调了，要换回来。...空间复杂度：O(1) 或 O(N)，其中 N 为字符串的长度。这里的空间复杂度统计的是存储返回值以外的空间。...如果使用的语言可以修改字符串，那么反转前后的字符串可以存储在同一片区域，空间复杂度为 O(1)；如果不可以修改，那么反转前的字符串需要额外的空间进行存储，空间复杂度为 O(N)。

2332 0

独家 | 你肯定想学习的顶级Python项目（附代码）

项目基本上是用来解决眼下问题的。如果为各种简单或复杂的问题提供解决方案是您的特长，那么您一定要考虑学习Python的项目。每当着手搞定几个项目之后，您距离掌握Python将更近一步。...从创建前端或图形用户界面（GUI）到将数字化数据绘制为图上的点。 Matplotlib用于在图形上绘制数据点。...https://www.edureka.co/Python-programming-certification-training 点和线：下图结合了两个绘图，一个图带有一条线，该线穿过数据的每个点，另一个图在本例中的每个特定...三维等高线图由于需要二维网格上的数据，因此轮廓图的输入与上一个绘图稍有不同。...为理解用例的工作原理，我们考虑以下流程图： ? 我们把这个流程图分解成简单的组分：首先将图像加载到程序中这些图像存储在程序可以访问的位置将数据规范化，因为我们需要Python来理解当前的信息。

1.1K3 0

序列的相似性

字母表和序列在生物分子信息处理过程中，将生物分子序列抽象为字符串，其中的字符取自特定的字母表。字母表是一组符号或字符，字母表中的元素组成序列。...将两条待比较的序列分别放在矩阵的两个轴上，一条在X轴上，从左到右，一条在Y轴上，从下往上，如图3.2所示。当对应的行与列的序列字符匹配时，则在矩阵对应的位置作出“点”标记。...但是，这并不意味着经过100次PAM后，每个氨基酸都发生变化，因为其中一些位置可能会经过多次改变，甚至可能变回到原先的氨基酸。因此，另外一些氨基酸可能不发生改变。...一个PAM-N矩阵元素（i，j）的值反映两条相距N个PAM单位的序列中第i种氨基酸替换第j种氨基酸的概率。从理论上讲，PAM-0是一个单位矩阵，主对角线上的元素值为1，其它矩阵元素的值为0。...比如，丙氨酸的相对突变率是通过计算丙氨酸与非丙氨酸残基比对的次数来得到。然后，针对每个氨基酸对i和j，计算氨基酸j被氨基酸i替换的次数。

1051 0

使用 Python 创造你自己的计算机游戏（游戏编程快速上手）第四版：致谢到第四章

这个示例运行向你展示了当你运行程序时程序是什么样子的。用户输入的部分以粗体显示。我建议你自己将每个程序的代码输入到 IDLE 的文件编辑器中，而不是下载或复制粘贴。...几乎所有程序都向用户显示文本，并且用户通过键盘向程序输入文本。在本章中，您将制作您的第一个程序，该程序可以做这两件事。您将学习如何将文本存储在变量中，组合文本，并在屏幕上显示文本。...如果输入此代码后出现错误，请使用在线差异工具将你输入的代码与本书代码进行比较，网址为 www.nostarch.com/inventwithpython#diff。...使用条件检查 True 或 False 条件是一个将两个值与比较运算符（如或>）组合的表达式，并求值为布尔值。条件只是另一个名称，用于求值为True或False的表达式。...如果输入这段代码后出现错误，请使用在线 diff 工具将你输入的代码与书中的代码进行比较，网址为www.nostarch.com/inventwithpython#diff。

1931 0

这些优质Python项目已分成初、中、高级，你想学习哪个（附代码）

项目基本上是用来解决眼下问题的。如果为各种简单或复杂的问题提供解决方案是您的特长，那么您一定要考虑学习Python的项目。每当着手搞定几个项目之后，您距离掌握Python将更近一步。...从创建前端或图形用户界面（GUI）到将数字化数据绘制为图上的点。 Matplotlib用于在图形上绘制数据点。...点和线下图结合了两个绘图，一个图带有一条线，该线穿过数据的每个点，另一个图在本例中的每个特定1000个值上绘制一个点。这个代码分析时实际上非常简单。...▲三维等高线图由于需要二维网格上的数据，因此轮廓图的输入与上一个绘图稍有不同。...为理解用例的工作原理，我们考虑以下流程图： ? 我们把这个流程图分解成简单的组分：首先将图像加载到程序中这些图像存储在程序可以访问的位置将数据规范化，因为我们需要Python来理解当前的信息。

1.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭