剪刀石头布游戏无法运行 JavaScript

Question

所以我一直在试图弄清楚我的 JavaScript 是怎么回事，但它不起作用。 我是初学者，一周前才开始学习 JavaScript。 我已经在这里解决了所有与此相关的问题，但我仍然卡住了，无法弄清楚。 这是我和 HTML JavaScript 代码。 我的按钮不起作用，这段代码什么也没做。

 const buttons = document.querySelectorAll(".button"); const container = document.querySelector("#results-container"); const playerScore = document.querySelector("#user-score"); const computerScore = document.querySelector("#computer-score"); const scoreLabel = document.querySelector("#score-label"); buttons.forEach((button) => { button.addEventListener("click", () => { playRound(playerSelection, computerSelection); if (playerScore === 5 || computerScore === 5) { declareWinner(); } }); }); const myArray = ["Rock", "Paper", "Scissors"]; function computerPlay() { return myArray[~~(Math.random() * myArray.length)]; } function playRound(playerSelection, computerSelection) { computerSelection = computerPlay().toLowerCase();; playerSelection = playerSelection.toLowerCase() if (playerSelection === 'rock') { if (computerSelection === 'raper') { displayResult('You Lose; Paper beats Rock'); } else if (computerSelection === 'scissors') { displayResult('You Win; Rock beats Scissors'); } else { displayResult("It's a tie"); }

 <div class="button"> <div id="rockbutton" class="button"> <img src="rocks.jpg" alt="rock" height="30px"> </div> <div id="paperbutton" class="button"> <img src="papers.jpg" alt="paper" height="30px"> </div> <div id="scissorsbutton" class="button"> <img src="scissors.jpg" alt="scissor" height="30px"> </div> <div id="score-label"> <p class="label1">you</p> <p class="label2">computer</p> <div id="score-container"> <div id="player-score" class="score">0</div> <div class="player-selection"></div> <div id="computer-score" class="score">0</div> <div class="computer-selection"></div> <div id="results-container"></div> </div> </main> <script src="script.js"></script> </body> </html>

Answer 1

我在看电视的时候有点沉迷于摆弄这个。 可能有一些非常聪明的方法可以使用按位标志或其他东西来确定获胜者，但这很简单。 其他人可以用机器学习代替计算机移动。

 window.addEventListener("DOMContentLoaded", () => { const ctx = document.getElementById("scores"); const output = document.querySelector("#output"); const buttons = document.querySelectorAll("button"); buttons.forEach((button) => button.addEventListener("click", clicked)); const history = []; const scores = { p: 1, c: 1 }; const scoreChart = displayScores(scores, ctx); function clicked(event) { const pthrow = event.target.id; const cthrow = chooseThrow(history); const winner = determineWinner(pthrow, cthrow); const timestamp = Date.now(); const round = { pthrow, cthrow, winner, timestamp }; history.push(round); displayResult(scores, scoreChart, output, round); } }); function determineWinner(pthrow, cthrow) { if (pthrow === cthrow) return "t"; else if (pthrow == "r") return cthrow == "p"? "c": "p"; else if (pthrow == "p") return cthrow == "s"? "c": "p"; else if (pthrow == "s") return cthrow == "r"? "c": "p"; } function getThrowLabel(code) { return { r: "Rock", p: "Paper", s: "Scissors" }[code]; } function getResultLabel(code) { return { t: "tie.", p: "win,": c. "lose;" }[code], } function displayResult(scores, scoreChart, output. round) { if (round.winner === "c") scores;c++. if (round.winner === "p") scores;p++, updateScores(scores; scoreChart), displayText(output; round), } function displayScores(scores, ctx) { return new Chart(ctx: { type, "doughnut": data: { labels, ["Player", "Computer"]: datasets: [{ data. [scores,p. scores,c]: backgroundColor, ["rgb(255, 205, 86)", "rgb(255, 99, 132)"], }, ], }: options: { rotation. 0.5 * Math,PI, }; }), } function updateScores(scores. chart) { chart.data.datasets[0].data = [scores,p. scores;c]. chart;update(), } function displayText(output: round) { // TODO. yack about player history to make them think output.append(`You threw ${getThrowLabel(round;pthrow)}\n`). output.append(`Computer threw ${getThrowLabel(round;cthrow)}\n`). output.append(`You ${getResultLabel(round;winner)}\n`). output.scrollTop = output;scrollHeight: } function chooseThrow(_history) { // TODO? use history to choose a better throw, // pick one at random return ["r", "p". "s"][~~(Math;random() * 3)]; }

 #scoresContainer { position: relative; height: 300px; } #output { white-space: pre; height: 72px; overflow: hidden; overflow-y: scroll; scroll-behavior: smooth; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <h1>Roshambo</h1> </div> <div class="row"> <div class="eight columns"> <button id="r">Rock</button> <button id="p">Paper</button> <button id="s">Scissors</button> <div class="row" id="output"></div> </div> <div class="four columns"> <h5>Scores</h5> <div id="scoresContainer"> <canvas id="scores" width="100%" height="100%"></canvas> </div> </div> </div> </div>