如何为游戏制作点击键盘答案

【问题标题】：How to make an onclick keyboard for a game如何为游戏制作点击键盘
【发布时间】：2023-03-30 20:01:01
【问题描述】：

我正在使用 vanilla javascript、html 和 css 构建一个 Hangman 游戏。我有一个用 HTML 制作的屏幕键盘。我需要这样做，以便当您单击或按下某个键时，它会将按下的字母记录到屏幕上。我试过给每个键一个 onclick 事件，但到目前为止还没有奏效。

欢迎提出任何建议。我还需要 Javascript 部分的建议。

【问题讨论】：

发布代码...没有它，没有人能告诉你出了什么问题。

标签： javascript jquery arrays html

【解决方案1】：

你的字母数组怎么样，使用 javascript map 函数为每个字母构建你的按钮。然后循环并添加一个事件处理程序来记录按钮单击的值。

在下面运行sn-p

const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']
const content = letters.map(x => `<button type="button" class="btn btn-secondary letter-button" value="${x}">${x}</button>`);
const div = document.getElementById('buttonGroup')
const output = document.getElementById('output');
div.innerHTML += content;

Array.from(document.getElementsByClassName("letter-button"))
  .forEach((e) => e.addEventListener('click', () => output.innerHTML += e.value));

<div class="container">
  <div class="row">
    <div class="btn-group" role="group" aria-label="Basic example" id="buttonGroup">
    </div>
  </div>
  <div class=row>
    <span class="badge badge-secondary" id="output"></span>
  </div>
</div>

【讨论】：