时间戳

首页 > 解决方案 > 如何为游戏制作点击键盘

javascript - 如何为游戏制作点击键盘

问题描述

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

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

标签： javascriptjqueryarrayshtml

解决方案

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

在下面运行代码段

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>

推荐阅读