[英]Display results of rock paper scissors game - JavaScript
I am creating a rock paper scissors game with JavaScript.我正在用 JavaScript 创建一个石头剪刀布游戏。 I currently have the selections in an array of objects.
我目前在一组对象中有选择。 What I am trying to do is when the user selects their choice it will display their choice and the computer's choice, but will also show the winner.
我想做的是当用户选择他们的选择时,它将显示他们的选择和计算机的选择,但也会显示获胜者。 I have 3 png image files for rock, paper, and scissors.
我有 3 个用于石头、纸和剪刀的 png 图像文件。
My Code with comments on what I am trying to accomplish我的代码对我要完成的工作进行了评论
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 of What it is supposed to look like它应该是什么样子的 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> -->
What I am trying to do我想要做什么
Would I have to create a variable that is a child of the div and then append the child?我是否必须创建一个作为 div 子级的变量,然后附加该子级?
Or just use if statements and use innerHTML?还是只使用 if 语句并使用 innerHTML?
What is the best way to accomplish this?实现这一目标的最佳方法是什么?
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.