Javascript 我如何制作一个功能，在点击时重置游戏

我正在做一个石头剪纸游戏。我对javascript非常陌生，只知道基本知识。代码有点草率。我想要的是能够在选择后继续玩游戏。例如，现在如果我单击rock，CPU将随机产生一个结果，但是如果我单击paper，结果将保留在屏幕上，新结果将与旧结果重叠

我正在考虑在if语句中添加另一个条件。此外，我还考虑在if语句的返回中添加另一个函数，这可能会重置它

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>

---

首先，需要删除

位置：绝对用于导致重叠的
img

其次，每次调用
cpuChoice（）
，都需要在显示当前元素之前隐藏上一个元素


const userChoice=document.querySelectorAll（'.choice'））
const cpuscisors=document.querySelector（“.cpu剪刀”）
const cpuPaper=document.querySelector（“.cpu paper”）
const cpuRock=document.querySelector（“.cpu rock”）
让当前项目；
函数cpuChoice（）{
const rand=Math.random（）；
如果（当前项目）{
currentItem.style.display='none'；
}
如果（兰特<.34）{
cpuPaper.style.display='inline block'；
currentItem=cpuPaper；
}否则如果（兰特>=.67）{
cpuRock.style.display='inline block'；
currentItem=cpuRock；
}否则{
cpuscisors.style.display='inline block'；
currentItem=CPUSCISSOR；
}
}
userChoice.forEach（userChoice=>
userChoice.addEventListener（'click'，cpuChoice））
.cpu剪刀{
显示：无；
}
.cpu纸{
显示：无；
}
.cpu岩石{
显示：无；
}
.cpu结果img{
身高：5雷姆；
}

你：0

计算机：0

您不需要所有这些ID和类。

使用索引

使用索引还可以检索获胜者

看看这个答案：


const moves=[“石头”、“布”、“剪刀”]，
消息=[“你赢了！”，“AI赢了”，“这是平局！”，//[PL，AI，平局]
得分=[0,0,0]，//[PL，AI，平局]
ELS=sel=>document.queryselectoral（sel），
EL#u result=ELS（“#result”）[0]，
ELU PLScore=ELS（“#PLScore”）[0]，
EL#AIScore=ELS（“#AIScore”）[0]，
ELS_ai=ELS（“.ai”）；
函数游戏（）{
const PL=+this.dataset.user；//将索引作为整数播放
const AI=~（Math.random（）*3）；//您所需要的一切：0、1、2
const result=PL===AI？2:（AI+1）%3==PL？0:1；//0=PLwins 1=AIwins 2=draw
分数[结果]++；//增加PL或AI的分数（也增加抽签次数；）
elu result.innerHTML=`You:${moves[PL]}，AI:${moves[AI]}，${messages[result]}`；
EL_PLScore.textContent=分数[0]；
EL_AIScore.textContent=分数[1]；
ELS_ai.forEach（el=>el.classList.remove（'inline-block'）；//全部隐藏
ELS_ai[ai].classList.add（'inline-block'）；//显示一个
}
//活动：
document.queryselectoral（“[数据用户]”）.forEach（el=>el.addEventListener（“单击”，游戏））
.ai{
显示：无；
}
.ai.inline-block{
显示：内联块
}

你：0
计算机：0
您是否缺少一个css片段？我在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))

.cpu-scissors {
  display: none;
}

.cpu-paper {
  display: none;
}

.cpu-rock {
  display: none;
}

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