显示岩石剪刀游戏的结果 - JavaScript

Question

我正在用JavaScript创建岩石剪刀游戏。我目前在一系列对象中有选择。我要做的是当用户选择自己的选择时，它将显示他们的选择和计算机的选择，但也将显示获奖者。我有3个用于岩石，纸和剪刀的PNG图像文件。

我的代码带有关于我要完成的工作的评论

const selectionButtons = document.querySelectorAll('[data-selection]')
const finalColumn = document.querySelector('[data-final-column]')
const SELECTIONS = [{
  
  name: 'rock',
  icon: document.querySelector('#uRock'),
  beats: 'scissors'
},
{
  
  name: 'paper',
  icon: document.querySelector('#uPaper'),
  beats: 'rock'
},
{
  
  name: 'scissors',
  icon: document.querySelector('#uScissors'),
  beats: 'scissors'
}
]
selectionButtons.forEach(selectionButton => {

    selectionButton.addEventListener('click', e =>{
     const selectionName = selectionButton.dataset.selection
     
     const selection = SELECTIONS.find(selection => selection.name === selectionName)
     makeSelection(selection)
    })
})
function makeSelection(selection) {
  const computerSelection = randomSelection();
  const yourWinner = isWinner(selection, computerSelection)
  const computerWinner = isWinner(computerSelection, selection)
  
  addSelectionReult(computerSelection, computerWinner)
addSelectionReult(selection, yourWinner)    
}


function addSelectionReult(selection, winner){
  const div = document.createElement('div')
  div.innerHTML = 
  // add icon from selection to div child
  div.classList.add('result-selection') 
  if(winner) div.classList.add('winner')
  if(computerWinner) //add computerLost class to icon img element
  if(yourWinner) //add playerWinner class to icon img element
  finalColumn.after(div)
}

function isWinner(selection, computerSelection){
  return selection.beats === computerSelection.name
}

function randomSelection() {
  const random = Math.floor(Math.random() * SELECTIONS.length) 
  return SELECTIONS[random]
}

html应该看起来像

<!-- <div class="result-selection">
      <img class= "winner" src="/noun-fist-477918.png" alt="">
    </div>
    <div class="result-selection">
      <img class="computerLost" src="/noun-scissors-477919.png" alt="">
    </div> -->

我想做的

1. 用户选择他们的选择。 （选择是选择
2. 。 （我的课程将与获胜者与失败者区分开来）
3. 如果计算机是获胜者，则正确的图标将拥有冠军班，左图将具有PlayerLost类。球员是获胜者的相反。

我是否必须创建一个是Div的孩子然后附加孩子的变量？

还是只使用语句使用InnerHTML？

完成此操作的最佳方法是什么？

Answer 1

function addSelectionReult(selection, winner, computerSelection){
  const div = document.createElement('div')
  const createDisplay = document.createElement('img')
  createDisplay.src = selection.icon
  div.classList.add('result-selection') 
  if(winner) {createDisplay.classList.add('winner')}
  else{createDisplay.classList.add('loser')}
  
  finalColumn.after(div)
  div.appendChild(createDisplay);
}