Question

我正在使用vanilla Javascript重新创建Fallout终端游戏 - 游戏的主要元素之一是将您选择的单词与计算机选择的单词进行比较。

黑客游戏类似于棋盘游戏Mastermind。你将会   提供了一个单词列表，所有相同的字符长度......一个   这些词是正确的密码，你的目标是猜测它。

您可以通过单击选择一个单词。如果你没有正确猜测，   终端将显示＆＃34; x / y正确＆＃34;其中x是数字   正确的字母，y是单词长度。只有当一封信是正确的   它在正确的位置。

我在控制台中使用了比较方面，我最近能够将案例0部分显示在屏幕上，但是当我点击另一个字时，它不会加载下一行＆＃34;剩下三次尝试。＆＃34;

我不确定我的代码是否显而易见，或者我是否完全错过了某些内容，所以我想我会在这里问一下。

.js文件：

var giantArray = []; // combination of var garbage and var words

var goalWord = ""; // word that the computer chose to be the "goal"  // STRING

var userWord = ""; // the current word that the user selected // STRING

var playerAttempts = 0; // how many past attempts the user has made

var shuffledWords = shuffle(words); // randomly pick an index between 0 and 35

document.addEventListener("DOMContentLoaded", function(event) {
  createAttempt();

});

function createAttempt() {
  switch (playerAttempts) {
    case 0:
      attempts.innerHTML = "Four attempts remaining. [] [] [] []";
      break;
    case 1:
      attempts.innerHTML += "Three attempts remaining. [] [] []<br>";
      break;
    case 2:
      attempts.innerHTML += "Two attempts remaining. [] []<br>";
      break;
    case 3:
      attempts.innerHTML += "!! Warning: Lock out pending !! []<br>";
      break;
    default:
      attempts.innerHTML += "This terminal has been locked. Please contact your administrator.";
      break;
  }
  playerAttempts++;

}

createAttempt();

function clickFunc(evt) {
  if (evt.target.innerText.slice(1) === goalWord) { // need .slice method to eliminate space character
  console.log('Welcome back' + '. ');
  } else {
  console.log('try again')
  }
}

clickFunk（）;

HTML：

   <div class="panels"> <!-- level 3 -->

        <div class="top-text"> <!-- level 4 -->
          <ul>
            <li>______ INDUSTRIES (TM) TERMALINK PROTOCOL</li>
            <li>ENTER YOUR PASSWORD</li>
          </ul>
        </div>

    <div id="attempts"></div> <!-- level 4 -->

Answer 1

but when I click on another word it doesn't load the next line "Three attempts remaining."是您问题的关键字。它第一次加载，因为你只调用一次。当你实际点击某些东西（调用你的点击功能）时，你不会再次调用它。您需要在单击函数中调用它来重新调用该函数。就这样：

createAttempt();

function clickFunc(evt) {
  createAttempt();
  if (evt.target.innerText.slice(1) === goalWord) { // need .slice method to eliminate space character
  console.log('Welcome back' + '. ');

  } else {
  console.log('try again')
  }
}

现在您将发现每次单击时都会打印，具体取决于交换机的值。

<强>更新

在您发布的实际调用clickFunc调用的代码中没有看到任何内容。您需要告诉它在您点击某些内容时要调用的函数。因此，在目标元素中，只需将onclick属性设置为指向您的函数，如下所示：

onclick="clickFunc(event)"

案例/开关未激活onClick事件

1 个答案: