Question

我正在研究一个猜字母游戏，我在底部有一个记分牌，显示玩家在输掉游戏前还剩下多少生命。我有一个屏幕键盘，用户可以单击以选择他们想猜的字母。

一切正常，除了消除玩家的“生命”。我的生活就像一张有序列表中的图片一样。每次单击按钮时，一个函数都会检查该按钮的按下是否与短语中的字母匹配。如果不是，则需要从有序列表中删除生命，并在未命中计数上加1。

每按一次错误按钮，就将未命中计数加1，但是移开心脏仅对其他每一次按钮起作用，我不确定为什么。任何帮助将不胜感激。

function checkLetter(clickedButton) {
  const letters = document.getElementsByClassName('letter');
  let letterFound = null;
  for (let i = 0; i < letters.length; i += 1) {
    if (clickedButton === letters[i].textContent) {
      letters[i].classList.add('show');
      letterFound = true;
    }
  }
  return letterFound;
}

function changeScore() {
  let scoreboardList = document.querySelector('ol');
  scoreboardList.removeChild(scoreboardList.childNodes[0]);
}

qwerty.addEventListener('click', (e) => {
  const button = e.target;
  const buttonText = button.textContent;
  checkLetter(buttonText);
  if (checkLetter(buttonText) == null) {
    missed += 1;
    changeScore();
    console.log(missed);
  } else {
    button.classList.add('chosen');
  }
});

   

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Wheel of Success!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="main-container">
      <div id="overlay" class="start">
        <h2 class="title">Wheel of Success</h2>
        <a class="btn__reset">Start Game</a>
      </div>

      <div id="banner" class="section">
        <h2 class="header">Wheel of Success</h2>
      </div>

      <div id="phrase" class="section">
        <ul></ul>
      </div>
      <div id="qwerty" class="section">
        <div class="keyrow">
          <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
        </div>
        <div class="keyrow">
          <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
        </div>
        <div class="keyrow">
          <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
        </div>
      </div>

      <div id="scoreboard" class="section">
        <ol>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
        </ol>
      </div>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

Answer 1

据我所知，您对scoreboardList.removeChild(scoreboardList.childNodes[0]);的呼叫将删除第一个节点。在您的情况下，这不一定是元素，也可以是仅包含空格的文本节点。这可能就是原因，为什么只有第二个电话看起来像是在做某事。另一个是删除空白。我更改了代码以显式删除第一个“心脏”节点。而且，当然，刘易斯在他的评论中提到的内容：不要两次叫checkLetter。只需直接在if中使用它即可。

let missed = 0;

function changeScore() {
  let scoreboardList = document.querySelector('ol');

  // !!!!!! These two lines are the important changes:
  let heart = scoreboardList.querySelector('li:first-child'); // find first heart item
  scoreboardList.removeChild(heart); // remove the heart
}

document.addEventListener('click', (e) => {
  //const button = e.target;
  //const buttonText = button.textContent;
  //if (checkLetter(buttonText) == null) {
    missed += 1;
    changeScore();
    console.log(missed);
  //} else {
  //  button.classList.add('chosen');
  //}
});

<div id="scoreboard" class="section">
  <ol>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
  </ol>
</div>

Answer 2

只需更新您的changeScore()方法，如下所示：

function changeScore() {
  let scoreboardList = document.querySelector('ol');

  // Replace this
  // scoreboardList.removeChild(scoreboardList.childNodes[0]);

  // By this 'EDIT'
  scoreboardList.removeChild(scoreboardList.querySelector('li:first-child'));
}

每当答案错误时，都会消除心脏。

JavaScript函数仅每隔两次执行一次

2 个答案: