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

问题描述

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

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.

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

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

推荐答案

首先，您需要删除导致重叠的 img 的 position:absolute; .

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

其次，每次调用 cpuChoice()时，您需要先隐藏上一个元素，然后再显示当前元素.

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>

这篇关于我如何制作一个可以在点击时重置游戏的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！