当单击不同数组中的另一个单独项目同时从第一个数组中删除该项目时，从一个数组中随机显示项目？

Question

我正在开发我的第一个真正的项目，一个“刽子手”风格的游戏。我正在尝试执行此操作，但不确定我哪里出错了：如果单击了“错误的字母”，则随机显示一个“身体部位”并从数组中删除，这样它就不会重复。

let wrongAmount = 0
let wrongLettersArray = ["#alphabetLetterA", "#alphabetLetterB", "#alphabetLetterC", "#alphabetLetterD", "#alphabetLetterE", "#alphabetLetterF", "#alphabetLetterG", "#alphabetLetterH", "#alphabetLetterJ", "#alphabetLetterK", "#alphabetLetterM", "#alphabetLetterN", "#alphabetLetterQ", "#alphabetLetterR", "#alphabetLetterU", "#alphabetLetterV", "#alphabetLetterW", "#alphabetLetterX", "#alphabetLetterY", "#alphabetLetterZ"]
let bodyPartsArray = ["#losingTorso", "#losingRightArm", "#losingLeftArm", "#losingRightLeg", "#losingLeftLeg"]
let correctLettersArray = ["#correctLetterP", "#correctLetterI", "#correctLetterS", "#correctLetterT", "#correctLetterO", "#correctLetterL"]

function wrongGuess() {
    $(wrongLettersArray).on('click', function () {
        $(bodyPartsArray).show()
        wrongGuess()
    })
}

//if a wrong letter is clicked show one of the body parts at random
//remove from list so it cannot repeat
//add 1 to the wrong amount

Answer 1

如果我的理解正确，您想从 body parts 数组中选择一个项目并将其删除，这样就不能再次选择它了？你可以使用splice()。

const ar = [0, 1, 2, 3, 4, 5, 6]
const idx = Math.floor(Math.random() * ar.length)
const item = ar.splice(idx, 1)

console.log(item, ar)

在上面，我们有一个数组（在这种情况下就是你的身体部位数组）。然后我们选择一个索引，该索引位于该数组的长度范围内。然后，splice 从数组中删除该索引处的项目并将其返回。

Answer 2

您的代码的第一个问题是它永远不会被执行。你需要设置你的代码来运行，但是因为你从不在函数本身之外执行函数，所以它永远不会设置观察者。

你可以这样做：

$(document).ready(function () {
  wrongGuess();
});

很遗憾，您编写的代码没有正确执行您需要它执行的操作，因此我为您提供了如下解决方案。

首先，我设置了一些基本的 HTML 来说明坏信和好信：

<h2>wrong</h2>
<button id="a">A</button>
<button id="b">B</button>

<h2>correct</h2>
<button id="p">P</button>
<button id="s">S</button>

<hr>

<h1 id="torso">torso</h1>
<h1 id="right-arm">right arm</h1>

<hr>

wrong count: <span id="wrong">0</span>

然后，我设置了一个函数来隐藏所有的身体部位：

function hideAllBodyParts() {
  var bodyPartsSelector = bodyPartsArray.join(', ');

  $(bodyPartsSelector).hide();
}

您不能将数组作为选择器传递给 jQuery，它必须是字符串，即 '#a, #b' 而不是 ['#a', '#b']。

然后你的主要功能是一次显示一个身体部位并增加错误的计数：

function watchForWrongGuesses() {
  // Your selector needs to be a string, e.g. '#a, #b' not an array ['#a', '#b']
  var wrongLettersSelectors = wrongLettersArray.join(', ');

    $(wrongLettersSelectors).on('click', function () {
      // Choose one body part and show it
      var bodyPart = bodyPartsArray.pop();
      $(bodyPart).show();

      // Increment wrong count
      wrongAmount++;
      $('#wrong').text(wrongAmount);
    });
}

然后，最后但最重要的部分是在文档加载时将其链接起来：

$(document).ready(function () {
  hideAllBodyParts();
  watchForWrongGuesses();
});

此方法最初隐藏所有正文部分，然后设置按钮点击的观察者。

解决方案：https://codepen.io/tinacious/pen/xmOgJj