如何用Vanilla JS创建一个刽子手游戏

DebugUsery
198 阅读6分钟

如何用Vanilla JS创建一个绞刑游戏

刽子手游戏是一种猜词游戏，一个玩家挑选一个秘密的词，另一个玩家试图猜出它。

在这篇文章中，我将带你了解如何使用vanilla JavaScript构建一个简单的刽子手游戏，更重要的是，如何在不使用任何框架的情况下，让那些用键盘导航的玩家也能使用这个游戏。

前提条件

  1. 一个好的代码编辑器。Visual Studio Code可以胜任这项工作。
  2. 一些关于HTML、Bootstrap CSS和JavaScript的知识。

设计游戏

你要做的第一件事是在你的代码编辑器中创建两个文件。为你的HTML代码命名为index.html ，为你的JavaScript代码命名为script.js 。

我们将使用Bootstrap CDN来设计这个游戏的风格。你可以通过在你的HTML文件的head 标签内添加以下代码来添加Bootstrap CDN。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

下面是整个HTML代码。本项目中使用的图片可以在我的Github repo中找到。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <title>Hangman Game with JavaScript</title>
</head>
<body>
<div class="container">
  <h1 class="text-center" style="padding-top: 2em;">Hangman</h1>
  <div class="float-right">Wrong Guesses: <span id='mistakes'>0</span> of <span id='maxWrong'></span></div>
  <div class="text-center">
    <img id='hangmanPic' src="images/0.jpg" alt="">
    <p>Guess the Social Medium:</p>
    <p id="wordSpotlight">The word to be guessed goes here</p>
    <div id="keyboard"></div>
    <button class="btn btn-info" onClick="reset()">Reset</button>
  </div>
</div>

<script src='script.js'></script>
</body>
</html>

脚本

在你的JavaScript文件中，你需要创建一个数组，包含游戏中要猜的所有单词。我使用社交媒体作为我的利基关键词。你可以使用你的任何一个选择。

下面是代码应该是这样的。

var socialMedia = [
  "whatsapp",
  "instagram",
  "twitter",
  "snapchat",
  "tiktok",
  "youtube",
  "wechat",
  "facebook",
  "telegram",
  "bbm",
  "palmchat",
  "gmail",
  "2go",
  "linkedin",
  "reddit",
  "hangouts",
  "qq",
  "twitch",
  "douyin"
]

这些词将在游戏中随机出现。

接下来，你必须定义你创建的ID。这里是代码。

let answer = '';
let maxWrong = 6;
let mistakes = 0;
let guessed = [];

answer id包含要被猜中的正确单词。maxWrong id包含了你可以猜错的最大次数。mistakes id包含到目前为止你猜错的次数，而guessed id包含你要猜的字母。

游戏函数

随机字()函数

这个函数将有助于随机抽取你放在社交媒体数组中的任何一个单词，现在这使得游戏更加有趣，因为你不知道你接下来要猜什么单词。下面是代码的样子。

function randomWord() {
  answer = socialMedia[Math.floor(Math.random() * socialMedia.length)];
}

然后你通过使用下面的代码调用该函数。

randomWord();

generateButtons()函数

如果你注意到，在我们的HTML中存在着字母按钮。没有这些按钮，我们怎么能猜出这些词呢？

这个函数可以帮助我们生成这些按钮。这是一个创建这些按钮的好方法，而不是在HTML文件中创建26个不同的按钮标签。它是 "不要重复自己 "的编码技术的良好代表。

下面是代码。

function generateButtons() {
  let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
    `
      <button
        class="btn btn-lg btn-primary m-2"
        id='` + letter + `'
        onClick="handleGuess('` + letter + `')"
      >
        ` + letter + `
      </button>
    `).join('');

  document.getElementById('keyboard').innerHTML = buttonsHTML;
}

在上面的代码中，我们定义了所有26个字母按钮，同时用Bootstrap对它们进行造型。代码中的 "字母 "代表我们创建的字母数组中的每个循环项目。

然后，你使用document.getElementById('keyboard').innerHTML = buttonsHTML.NET将其连接到你的HTML。

记住，我们在HTML中定义了keyboard 的id。另外，.join('') ，以消除字母表按钮之间的逗号。

然后你用下面的代码调用上述函数。

generateButtons();

下面是游戏在这一点上的样子。the-game-buttons

我们将更新错误的猜测，也就是说，设置玩家每局的最大错误猜测次数。你可以用下面的代码来做。

document.getElementById('maxWrong').innerHTML = maxWrong;

The guessedWord()函数

这个函数负责处理要猜的字。首先，你必须定义wordStatus ，并默认渲染为null 。以下是代码。

let wordStatus = null;

这个函数帮助把要猜测的单词的每个字母设置为下划线(' _ ')，利用它们被正确猜测。

然后你把它连接到包含wordSpotlight id的HTML标签上。

下面是代码的样子。

function guessedWord() {
  wordStatus = answer.split('').map(letter => (guessed.indexOf(letter) >= 0 ? letter : " _ ")).join('');

  document.getElementById('wordSpotlight').innerHTML = wordStatus;
}

然后使用这一行运行该函数。

guessedWord();

这里是它在这一点上的模样。

the-game-image

现在我们来实际猜测一下这些字母。

handleGuess()函数

首先，我们要传递一个chosenLetter 。handleGuess() 函数处理要猜的字母，并确定答案是真还是假。

在该函数中，如果所选的字母不存在，我们就去把chosenLetter 推到数组中，但如果它存在，就不做任何事情。接下来，你运行一个if 语句：if (answer.indexOf(chosenLetter) >= 0) 。意思是说，如果它存在，那么就运行guessed() 函数来更新字母。

现在，如果玩家猜错了，我们要开始递增猜错的数量。我们可以通过在这个函数内使用else if 语句，并传入answer.indexOf(chosenLetter) === -1 。这样，错误将被逐一增加。

下面是代码的样子。

function handleGuess(chosenLetter) {
  guessed.indexOf(chosenLetter) === -1 ? guessed.push(chosenLetter) : null;
  document.getElementById(chosenLetter).setAttribute('disabled', true);

  if (answer.indexOf(chosenLetter) >= 0) {
    guessedWord();
  } else if (answer.indexOf(chosenLetter) === -1) {
    mistakes++;
    updateMistakes();
    checkIfGameLost();
    updateHangmanPicture();
  }
}

updateMistakes()函数

你还必须运行updateMistakes() ，这样它才能真正更新数字，因为我们没有使用任何像ReactJS这样的框架。下面是它在代码中的样子。

function updateMistakes() {
  document.getElementById('mistakes').innerHTML = mistakes;
}

现在，错误猜测的数量将始终保持+1的更新。

接下来要做的是检查赢和输，这样玩家就不会无休止地玩下去。要做到这一点，你在handleGuess() 函数的if 语句中运行checkifGameWon() ，在相应的else if 语句中运行checkIfGameLost() 。

checkIfGameWon()函数

我们将首先创建一个if语句，检查wordStatus 是否等于答案，然后打印出 "你赢了！！"。

下面是代码。

function checkIfGameWon() {
  if (wordStatus === answer) {
    document.getElementById('keyboard').innerHTML = 'You Won!!!';
  }
}

checkIfGameLost()函数

这里是检查玩家是否输了的代码。

function checkIfGameLost() {
  if (mistakes === maxWrong) {
    document.getElementById('wordSpotlight').innerHTML = 'The answer was: ' + answer;
    document.getElementById('keyboard').innerHTML = 'You Lost!!!';
  }
}

在上面的代码中，我们设置游戏在玩家猜错的次数达到上限时打印出 "你输了！！"。我们还设置了游戏也要打印出正确答案。

reset()函数

在这个函数中，我们要把一切都设置为默认值。下面是它的样子。

function reset() {
  mistakes = 0;
  guessed = [];
  document.getElementById('hangmanPic').src = 'images/0.jpg';

  randomWord();
  guessedWord();
  updateMistakes();
  generateButtons();
}

updateHangmanPicture()函数

首先，我们要在else if 语句中调用handleGuess() 函数中的updateHangmanPicture() ，这样每次玩家错了一个字母，图片就会更新。

function updateHangmanPicture() {
  document.getElementById('hangmanPic').src = 'images/' + mistakes + '.jpg';
}

在上面的代码中，我们将图像设置为在玩家每次答错时连续更新。我把所有六张图片都命名为(0-6).jpg，我们最多可以有6个错误的数量。

这方便地帮助我们设置图片在玩家每错一个字母的时候都会更新。

最后，我们需要让那些希望用键盘导航的玩家能够进入游戏。

首先，你需要用下面的代码定义键盘上的字母键。

let alphabets=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

接下来，你需要创建一个函数，将你键盘上的这些键与游戏联系起来，并使它们在被点击时显示为有效的猜测，使用document.onkeypress 。

以下是代码。

document.onkeypress = function (e) {
  e = e || window.event;
  var charCode = e.charCode || e.keyCode,
      character = String.fromCharCode(charCode);

  if (alphabets.includes(character))
  handleGuess(character);
};

上面的代码翻译成。"在一个键被按下的情况下，将其作为游戏中的一个猜测处理。

下面是在使用鼠标和键盘的情况下游戏的视频。

结论

我们使用了vanilla JavaScript和Bootstrap CDN来构建一个吊死鬼游戏。我们还使用了onkeypress 事件，让那些希望使用键盘的玩家也能玩这个游戏。

这样一来，你就有了一个完全交互式的刽子手游戏。如果你愿意的话，你还可以在游戏中添加其他功能。

avatar
文章
阅读
粉丝