我正在用 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 >
<img class= "winner" src="/noun-fist-477918.png" alt="顯示剪刀石頭布游戲結果 - JavaScript">
</div>
<div >
<img src="/noun-scissors-477919.png" alt="顯示剪刀石頭布游戲結果 - JavaScript">
</div> -->
我想要做什么
- 用戶選擇他們的選擇。（選擇是 selection.icon）
- 在使用 JavaScript 創建的 div 中，它將顯示選擇和獲勝者。（我有一些課程可以區分贏家和輸家）
- 如果計算機是獲勝者，則右側圖示將具有獲勝者類，左側圖示將具有 playerLost 類。與玩家成為贏家相反。
我是否必須創建一個作為 div 子級的變數，然后附加該子級？
還是只使用 if 陳述句并使用 innerHTML？
實作這一目標的最佳方法是什么？
uj5u.com熱心網友回復：
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);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/491511.html
標籤：javascript 数组 目的 游戏开发 附子