文章/答案/技术大牛

发布

社区首页 >问答首页 >减去表示游戏中生活的图像

问减去表示游戏中生活的图像
EN

Stack Overflow用户

提问于 2021-09-30 16:06:36

回答 2查看 67关注 0票数 1

我正在尝试编写一个迷你游戏。这个游戏有两个你可以点击的框。为这些长方体分配一个介于1和2之间的随机数。

当游戏开始时，你有5条生命。这些生命被表现为一个小个子人类的5张照片。

当玩家得到3,5和7点正确的分数时，你会获得额外的生命。我已经做到了。

现在，每当玩家点击错误的方框时，我都试图减去一个生命。

function setRandomNumber() {
  randomNumber = Math.floor(Math.random() * 2 + 1);

  if (randomNumber === 1) {

    numberOfRightAnswersSpan.innerHTML = `${++correctNumber}`;

    outputDiv.innerHTML = `Det er riktig svar.`;

    if (correctNumber === 3 || correctNumber === 5 || correctNumber === 7) {
      numberOfLivesDiv.innerHTML += `<img src="images/person1.jpg"/>`

    }
  } else {

    numberOfWrongAnswersSpan.innerHTML = `${++wrongNumber}`;
    outputDiv.innerHTML = `Det er feil svar.`;

  }

}

var

javascript

html

function

if-statement

回答 2

Stack Overflow用户

发布于 2021-09-30 16:29:29

我对您的代码做了一些更改，但尽量使其与您的原始代码非常相似。我把你的模板文字改成了字符串。我把你的.innerHTML修改改成了.innerText修改。我重构了一些空格，使if语句更具可读性。我没有通过附加html字符串来添加img元素，而是使用.appendChild方法和createElement方法来创建img元素。我还向元素添加了一个类，以便以后更容易获取。

function setRandomNumber() {
    randomNumber = Math.floor(Math.random() * 2 + 1);
    if (randomNumber === 1) {
        numberOfRightAnswersSpan.innerText = ++correctNumber;
        outputDiv.innerText = "Det er riktig svar.";
        if (
          correctNumber === 3 ||
          correctNumber === 5 ||
          correctNumber === 7
        ) {
            const newLife = document.createElement("img");
            newLife.src = "images/person1.jpg";
            newLife.classList.add("life");
            numberOfLivesDiv.appendChild(newLife);
        }
    } else {
        numberOfWrongAnswersSpan.innerText = ++wrongNumber;
        outputDiv.innerText = "Det er feil svar.";

        const aLife = document.querySelector(".life");
        aLife.remove();
    }
}

重要的是要注意，在这一点上，没有逻辑来检查有多少生命存在，或者当生命耗尽时该怎么做。最终，您可能会遇到错误，因为没有具有生命类的元素。

票数 1

Stack Overflow用户

发布于 2021-09-30 16:33:52

每当生命的数量发生变化时，我都会重新渲染生命。

let number_of_lives = 5;
const lives_container = document.getElementById("user-lives");

function draw_lives(){
  lives_container.innerHTML = "";
  for(let i = 0; i < number_of_lives; i++){
    const img = document.createElement("img");
    img.setAttribute("alt", "life.png");
    const new_life = img;
    lives_container.appendChild(new_life);
  };
  if(number_of_lives <= 0) lives_container.innerText = number_of_lives;
};

function remove_life() {
  number_of_lives--;
  draw_lives();
};

function add_life() {
  number_of_lives++;
  draw_lives();
};


draw_lives();

#user-lives > * {
  margin: 10px;
  background: #7f7;
}

<div id="user-lives"></div>
<button onclick="add_life();">Add life</button>
<button onclick="remove_life();">Remove life</button>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69395510

复制

相似问题

问减去表示游戏中生活的图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问减去表示游戏中生活的图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问减去表示游戏中生活的图像
EN