Question

我正在做剪刀石头布游戏。我对javascript很陌生，只了解基础知识。代码有点草率。我想要的是能够在选择一个选项后继续玩游戏。例如，现在如果我单击岩石，CPU将随机化结果，但是如果我在纸上单击，结果将保留在屏幕上，新结果将与旧结果重叠。

我当时正在考虑向if语句添加另一个条件。另外，我还在考虑向if语句的返回添加另一个函数，该函数可能会将其重置。

html

dataset = read.csv("data-marketing-budget-12mo.csv", header=T)
simple.fit = lm(dataset[[3]] ~ dataset[[2]])
summary(simple.fit)

js

<div class="main-container">
  <div class="score">
    <p>You:0</p>
    <p>Computer:0</p>
  </div>

  <div class="user-choice">
    <img id="rock" class="choice" src="icons/rock.png">
    <img id="paper" class="choice" src="icons/paper.png">
    <img id="scissors" class="choice" src="icons/scissors.png">
  </div>
  <div class="cpu-result">
    <img class="cpu-rock" src="icons/rock.png">
    <img class="cpu-paper" src="icons/paper.png">
    <img class="cpu-scissors" src="icons/scissors.png">
  </div>
</div>

css

const userChoice = document.querySelectorAll('.choice')
const cpuScissors = document.querySelector('.cpu-scissors')
const cpuPaper = document.querySelector('.cpu-paper')
const cpuRock = document.querySelector('.cpu-rock')


function cpuChoice() {
  const rand = Math.random()
  if (rand < .34) {
    cpuPaper.style.display = 'inline-block'
  } else if (rand >= .67) {
    cpuRock.style.display = 'inline-block'
  } else {
    cpuScissors.style.display = 'inline-block'
  }
}

userChoice.forEach(userChoice =>
userChoice.addEventListener('click', cpuChoice))

Answer 1

首先，您需要删除position: absolute;中引起重叠的img。

第二，每次调用cpuChoice()时，需要先隐藏上一个元素，然后才能显示当前元素。

const userChoice = document.querySelectorAll('.choice')
const cpuScissors = document.querySelector('.cpu-scissors')
const cpuPaper = document.querySelector('.cpu-paper')
const cpuRock = document.querySelector('.cpu-rock')
let currentItem;

function cpuChoice() {
  const rand = Math.random();
  if (currentItem) {
    currentItem.style.display = 'none';
  }
  if (rand < .34) {
    cpuPaper.style.display = 'inline-block';
    currentItem = cpuPaper;
  } else if (rand >= .67) {
    cpuRock.style.display = 'inline-block';
    currentItem = cpuRock;
  } else {
    cpuScissors.style.display = 'inline-block';
    currentItem = cpuScissors;
  }
}

userChoice.forEach(userChoice =>
  userChoice.addEventListener('click', cpuChoice));

.cpu-scissors {
  display: none;
}

.cpu-paper {
  display: none;
}

.cpu-rock {
  display: none;
}

.cpu-result img {
  height: 5rem;
}

<div class="main-container">
  <div class="score">
    <p>You:0</p>
    <p>Computer:0</p>
  </div>

  <div class="user-choice">
    <img id="rock" class="choice" src="icons/rock.png">
    <img id="paper" class="choice" src="icons/paper.png">
    <img id="scissors" class="choice" src="icons/scissors.png">
  </div>
  <div class="cpu-result">
    <img class="cpu-rock" src="icons/rock.png">
    <img class="cpu-paper" src="icons/paper.png">
    <img class="cpu-scissors" src="icons/scissors.png">
  </div>
</div>

Answer 2

您不需要所有这些ID和类。
使用索引！

使用索引，您还可以检索获胜者
查看此答案：https://stackoverflow.com/a/53983473/383904

Integer

const moves  = ["Rock", "Paper", "Scissors"],
  messages   = ["You won!", "AI won", "It's a draw!"], // [PL, AI, draw]
  score      = [0, 0, 0],                              // [PL, AI, draw]
  ELS        = sel => document.querySelectorAll(sel),
  EL_result  = ELS("#result")[0],
  EL_PLScore = ELS("#PLScore")[0],
  EL_AIScore = ELS("#AIScore")[0],
  ELS_ai     = ELS(".ai");

function game() {
  const PL = +this.dataset.user;        // Get played index as integer
  const AI = ~~(Math.random() * 3);     // All you need: 0, 1, 2
  const result = PL === AI ? 2 : (AI + 1) % 3 === PL ? 0 : 1; // 0=PLwins 1=AIwins 2=draw 

  score[result]++; // Increment PL or AI's score (Increments number of draws too ;) )
  EL_result.innerHTML = `You: ${moves[PL]}, AI: ${moves[AI]}, ${messages[result]}`;
  EL_PLScore.textContent = score[0];
  EL_AIScore.textContent = score[1];
  
  ELS_ai.forEach(el => el.classList.remove('inline-block')); // Hide all
  ELS_ai[AI].classList.add('inline-block');                  // Show one
}

// EVENTS:
document.querySelectorAll("[data-user]").forEach(el => el.addEventListener("click", game));

.ai {
  display: none;
}

.ai.inline-block {
  display: inline-block
}

我如何制作一个可以在点击时重置游戏的功能

2 个答案: