Question

我正在尝试用 html 和 js 制作一个游戏，其中屏幕上显示的单词是新的或之前显示过的，您需要按正确的按钮（“看过”或“新”），否则您失去生命。

我的问题是，目前决定您是否失去生命的词是您按下按钮后出现的词，这使游戏无法玩，因为您无法提前知道下一个词。

var word_bank = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9", "test10", "test11", "test12", "test13", "test14", "test15"];

var old_words = [];
var dec = word_bank;
var lives = 3;

function updateLives() {
  document.getElementById("lives").innerHTML = "Lives: " + lives;
}

function thing(v) {

  var rndn = Math.floor(Math.random() * (1 - 0 + 1)) + 0;

  if (rndn == 1) {
    var dec = word_bank
  } else {
    var dec = old_words
  }

  var word = dec[Math.floor(Math.random() * dec.length)];

  document.getElementById("word").textContent = word;

  if (v == 1) {
    if (old_words.includes(word)) {

    } 
    else {
      --lives
      updateLives();
    }
  } 
  else {
    if (old_words.includes(word)) {
      --lives
      updateLives();
    }
  }

  old_words.push(word);

  var forDeletion = [word];

  word_bank = word_bank.filter(item => !forDeletion.includes(item))

};

var word = dec[Math.floor(Math.random() * dec.length)];

document.getElementById("word").textContent = word;

updateLives();
old_words.push(word);

var forDeletion = [word];

word_bank = word_bank.filter(item => !forDeletion.includes(item))

<span id="lives"></span>

<div id="center">
  <span id="word"></span>
</div>

<div>
  <div>
    <button name="submit" class="action_btn_left seen" type="submit" value="seen" onclick="thing(1)">Seen</button>
    <button name="submit" class="action_btn_right new" type="submit" value="new" onclick="thing(0)">New</button>
  </div>
</div>

Answer 1

你用一个词开始你的程序 - 假设它是 test10
然后用户选择一个选项黑白看到或未看到
在 thing 函数中，您正在为下一轮生成一个单词，让我们说 test2，同时您正在判断该单词的玩家 (test2) 而不是 { {1}}

因此您需要将 test10 保存在变量中。然后当用户采取行动时，你首先用这个变量评估他。最后，您生成下一个循环词。

检查下面的脚本以获取一些参考

test10

const livesCountElement = document.getElementById("lives");
const wordElement = document.getElementById("word");
const scoreElement = document.getElementById("score");
const playAgain = document.getElementById("playAgainBtn");
const playBtns = document.getElementById("playBtns");

const wordsBank = [
  "Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8", "Test 9", "Test 10", "Test 11", "Test 12", "Test 13", "Test 14", "Test 15", "Test 16"
];

let oldWords = [];

let lives = 3;
let score = -1;
let currentWord = "";

function updateLives() {
  livesCountElement.innerHTML = "Lives: " + lives;
  if (lives <= 0) {
    death();
  }
}

function updateWord(wordToDisplay) {
  wordElement.innerHTML = "Word is: " + "<b>" + wordToDisplay + "</b>";
}

function updateScore() {
  score++;
  scoreElement.innerHTML = "Score: " + score;
}

function death() {
  wordElement.innerHTML = "<b> You died:( </b>";
  playAgain.style.display = "block";
  playBtns.style.display = "none";
}

function getRandomWord() {
  return wordsBank[Math.floor(Math.random() * wordsBank.length)];
}

function thing(v) {
  // Player already died :(
  if (lives <= 0) {
    return;
  }

  // Evaluate the current round  :: START -------------------
  const userSaidSeen = v === 1;
  const isAlreadySeen = oldWords.includes(currentWord);

  if ((userSaidSeen && !isAlreadySeen) || (!userSaidSeen && isAlreadySeen)) {
    --lives;
    updateLives();
  } else {
    updateScore(); // Success! -> Increase score and display
  }

  if (!isAlreadySeen) {
    // If it is a new word push it to {oldWords}
    oldWords.push(currentWord);
  }
  // Evaluate the current round  :: END -------------------

  // Next round preperation BELOW

  // If player is already dead :( you dont need to show any new word
  if (lives <= 0) {
    return;
  }

  // Show new word and set it as currentWord
  currentWord = getRandomWord();
  updateWord(currentWord);
}

function start() {
  lives = 3;
  score = -1;
  oldWords = [];

  updateLives();
  updateScore();

  currentWord = wordsBank[Math.floor(Math.random() * wordsBank.length)];
  updateWord(currentWord);

  playAgain.style.display = "none";
  playBtns.style.display = "block";
}

start();

Answer 2

这就是你要找的东西

var word_bank = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9", "test10", "test11", "test12", "test13", "test14", "test15"];

var old_words = {};
let lives = 3;
let score = 0;

function updateLives() {
  document.getElementById("lives").innerHTML = `Lives:  ${lives}    Score: ${score}`;
}

function getRandomWord() {
  const rndm = Math.floor(Math.random() * word_bank.length);
  return word_bank[rndm];
}

function displayNewWord() {
  const word = getRandomWord();
  document.getElementById("word").textContent = word;
}

function thing(v) {
  const currentWord = document.getElementById("word").textContent;
  if ((v === 1 && !old_words[currentWord]) || (v === 0 && old_words[currentWord])) {
    --lives;
  } else {
    ++score;
  }
  updateLives();
  if (!lives) {
    document.getElementById("game-container").textContent = 'Game over!';
    return;
  }

  old_words[currentWord] = true;
  displayNewWord();
};

displayNewWord();
updateLives();

<html>

<head>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <span id="lives"></span>

  <div id="game-container">
    <div id="center">

      <span id="word"></span>

    </div>

    <div>

      <div>

        <button name="submit" class="action_btn_left seen" type="submit" value="seen" onclick="thing(1)">Seen</button>

        <button name="submit" class="action_btn_right new" type="submit" value="new" onclick="thing(0)">New</button>

      </div>

    </div>
  </div>

</body>

<script src="main.js"></script>

</html>

是什么导致了这个错误，我该如何修复它？

2 个答案: