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

Question

I am working on a rock paper scissor game. I'm very new to javascript and only know the basics. The code is a little sloppy. What I want is to be able to continue playing the game after a choice is selected. For example, right now if I click rock, the CPU will randomize a result, but then if I click on paper, the result will stay on the screen and the new result will overlap the old one.

I was thinking of adding another condition to the if statements. Also, I was thinking of adding another function to the return of the if statement that might reset it.

html

<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>

js

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))

css

.cpu-scissors {
  display: none;
}

.cpu-paper {
  display: none;
}

.cpu-rock {
  display: none;
}

.cpu-result img {
  position: absolute;
  height: 11rem;
}

Answer 1

Firstly, you need to remove position: absolute; for img which was causing the overlapping.

Secondly, each time you call cpuChoice() , you need to hide the previous element before showing the current element.

 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

You don't need all those IDs and Classes.
Use Indexes!

Using indexes you can also retrieve the winner
See this answer: https://stackoverflow.com/a/53983473/383904

 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 } 

 <div class="main-container"> <div class="score"> <span>You: <span id="PLScore">0</span></span> <span>Computer: <span id="AIScore">0</span></span> </div> <div class="user-choice"> <img data-user="0" src="//placehold.it/50x50/888?text=ROCK"> <img data-user="1" src="//placehold.it/50x50/eee?text=PAPER"> <img data-user="2" src="//placehold.it/50x50/0bf?text=SCISSORS"> </div> <div class="cpu-result"> <img class="ai" src="//placehold.it/50x50/888?text=ROCK"> <img class="ai" src="//placehold.it/50x50/eee?text=PAPER"> <img class="ai" src="//placehold.it/50x50/0bf?text=SCISSORS"> </div> <div id="result"></div> </div>