所以我做了一个石头剪刀游戏。一切都正常工作(按钮工作正常，按键事件也正常(，但当你选择石头/纸/剪刀时，它不会玩游戏。它可以发送控制台消息(如果你编码的话(，但游戏不起作用。
//yes
var choices = ["rock", "paper", "scissors"]
let gameStart = false
let userchoice;
let userwin = 0
let pcchoice1 = Math.floor(Math.random() * choices.length)
var pcchoice = choices[pcchoice1]
let pcwin = 0
//yes
// TODO checks if user won or not
function win(userchoice, pcchoice) {
if (userchoice == "rock") {
if (pcchoice == "rock") {
alert("Both equal!")
}
if (pcchoice == "paper") {
alert("PC won!")
pcwin += 1
}
if (pcchoice == "scissors") {
alert("User won!")
userwin += 1
}
}
if (userchoice == "paper") {
if (pcchoice == "rock") {
alert("User won!")
userwin += 1
}
if (pcchoice == "paper") {
alert("Both equal!")
}
if (pcchoice == "scissors") {
alert("PC won!")
pcwin += 1
}
}
if (userchoice == "scissors") {
if (pcchoice == "rock") {
alert("PC won!")
pcwin += 1
}
if (pcchoice == "paper") {
alert("User won!")
userwin += 1
}
if (pcchoice == "scissors") {
alert("Both equal!")
}
}
}
// TODO hiding elements
function hide(x, y) {
var x = document.getElementById(y)
x.style.display = "none"
}
// TODO unhiding elements
function show(x, y) {
var x = document.getElementById(y)
x.style.display = "block"
}
// TODO hides elements at start
window.onload = () => {
hide(back, "back"), hide(rock, "rock"), hide(paper, "paper"), hide(scissors, "scissors"), hide(ChooseAnOption, "ChooseAnOption"), hide(r, "r"), hide(p, "p"), hide(s, "s")
}
// TODO play button functions
document.getElementById("play").onclick = () => {
hide(info, "info"), hide(title, "title"), hide(play, "play")
show(ChooseAnOption, "ChooseAnOption"), show(r, "r"), show(p, "p"), show(s, "s")
gameStart = true
// TODO keyboard keys
window.addEventListener("keydown", (event) => {
if (gameStart == true) {
if (event.key === "r") {
userchoice = "rock"
console.log("rock")
}
if (event.key === "p") {
userchoice = "paper"
console.log("paper")
}
if (event.key === "s") {
userchoice = "scissors"
console.log("scissors")
}
}
})
// TODO game loop
win(userchoice, pcchoice)
}
// TODO info button functions
document.getElementById("info").onclick = () => {
hide(info, "info"), hide(title, "title"), hide(play, "play")
show(back, "back"), show(rock, "rock"), show(paper, "paper"), show(scissors, "scissors")
}
// TODO back button functions
document.getElementById("back").onclick = () => {
hide(back, "back"), hide(rock, "rock"), hide(paper, "paper"), hide(scissors, "scissors")
show(info, "info"), show(title, "title"), show(play, "play")
}
// TODO rock
document.getElementById("r").onclick = () => {
userchoice = "rock"
console.log("rock")
}
// TODO paper
document.getElementById("p").onclick = () => {
userchoice = "paper"
console.log("paper")
}
// TODO scissors
document.getElementById("s").onclick = () => {
userchoice = "scissors"
console.log("scissors")
}body {
font-family: 'JetBrains Mono', monospace;
}
button {
font-family: 'JetBrains Mono', monospace;
text-decoration: none;
border: none;
padding: 10px 40px;
background-color: rgb(128, 0, 0);
color: #fff;
outline: none;
box-shadow: 3px 6px 6px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
transform: scale(1);
transition: transform ease 1s;
}
button:hover {
transform: scale(0.82);
background-color: rgba(156, 29, 29, 0.74);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
</head>
<body style="background-color:#f7ce5e">
<center>
<h1 id="title"><br>Welcome to Rock-Paper-Scissors!</h1>
<button class="button" id="play">Play</button><button class="button" id="info">Info</button>
<center><button class="button" id="back">< Back</button>
<p class="p" id="rock"><br>Rock: Can beat Scissors. <br>Loses to Paper.</p>
<p class="p" id="paper"><br>Paper: Can beat Rock. <br>Loses to Scissors.</p>
<p class="p" id="scissors"><br>Scissors: Can beat paper. <br>Loses to Rock.</p>
<p class="p" id="ChooseAnOption">Choose an Option (you can use keyboard keys)</p>
<button class="button" id="r">Rock (R)</button><button class="button" id="p">Paper (P)</button><button class="button" id="s">Scissors (S)</button></center>
<script src="index.js"></script>
</body>
</html>在设置userchoice之后没有调用win。你可以检查我用win调用和randomizePCChoice调用嵌入所有事件的完整实现(随机选择PC(
//yes
var choices = ["rock", "paper", "scissors"]
let gameStart = false
let userchoice;
let userwin = 0
let pcwin = 0
//yes
//adding a new function to randomize PC choice
function randomizePCChoice() {
let pcchoice1 = Math.floor(Math.random() * choices.length)
var pcchoice = choices[pcchoice1]
return pcchoice
}
// TODO checks if user won or not
function win(userchoice, pcchoice) {
if (userchoice == "rock") {
if (pcchoice == "rock") {
alert("Both equal!")
}
if (pcchoice == "paper") {
alert("PC won!")
pcwin += 1
}
if (pcchoice == "scissors") {
alert("User won!")
userwin += 1
}
}
if (userchoice == "paper") {
if (pcchoice == "rock") {
alert("User won!")
userwin += 1
}
if (pcchoice == "paper") {
alert("Both equal!")
}
if (pcchoice == "scissors") {
alert("PC won!")
pcwin += 1
}
}
if (userchoice == "scissors") {
if (pcchoice == "rock") {
alert("PC won!")
pcwin += 1
}
if (pcchoice == "paper") {
alert("User won!")
userwin += 1
}
if (pcchoice == "scissors") {
alert("Both equal!")
}
}
}
// TODO hiding elements
function hide(x, y) {
var x = document.getElementById(y)
x.style.display = "none"
}
// TODO unhiding elements
function show(x, y) {
var x = document.getElementById(y)
x.style.display = "block"
}
// TODO hides elements at start
window.onload = () => {
hide(back, "back"), hide(rock, "rock"), hide(paper, "paper"), hide(scissors, "scissors"), hide(ChooseAnOption, "ChooseAnOption"), hide(r, "r"), hide(p, "p"), hide(s, "s")
}
// TODO play button functions
document.getElementById("play").onclick = () => {
hide(info, "info"), hide(title, "title"), hide(play, "play")
show(ChooseAnOption, "ChooseAnOption"), show(r, "r"), show(p, "p"), show(s, "s")
gameStart = true
// TODO keyboard keys
window.addEventListener("keydown", (event) => {
if (gameStart == true) {
if (event.key === "r") {
userchoice = "rock"
console.log("rock")
}
if (event.key === "p") {
userchoice = "paper"
console.log("paper")
}
if (event.key === "s") {
userchoice = "scissors"
console.log("scissors")
}
//after user choice, we randomize PC choice
const pcchoice = randomizePCChoice()
//check who wins
win(userchoice, pcchoice)
}
})
// TODO game loop
//win(userchoice, pcchoice) //this call is not applied correctly
}
// TODO info button functions
document.getElementById("info").onclick = () => {
hide(info, "info"), hide(title, "title"), hide(play, "play")
show(back, "back"), show(rock, "rock"), show(paper, "paper"), show(scissors, "scissors")
}
// TODO back button functions
document.getElementById("back").onclick = () => {
hide(back, "back"), hide(rock, "rock"), hide(paper, "paper"), hide(scissors, "scissors")
show(info, "info"), show(title, "title"), show(play, "play")
}
// TODO rock
document.getElementById("r").onclick = () => {
userchoice = "rock"
//after user choice, we randomize PC choice
const pcchoice = randomizePCChoice()
//check who wins
win(userchoice, pcchoice)
console.log("rock")
}
// TODO paper
document.getElementById("p").onclick = () => {
userchoice = "paper"
//after user choice, we randomize PC choice
const pcchoice = randomizePCChoice()
//check who wins
win(userchoice, pcchoice)
console.log("paper")
}
// TODO scissors
document.getElementById("s").onclick = () => {
userchoice = "scissors"
//after user choice, we randomize PC choice
const pcchoice = randomizePCChoice()
//check who wins
win(userchoice, pcchoice)
console.log("scissors")
}body {
font-family: 'JetBrains Mono', monospace;
}
button {
font-family: 'JetBrains Mono', monospace;
text-decoration: none;
border: none;
padding: 10px 40px;
background-color: rgb(128, 0, 0);
color: #fff;
outline: none;
box-shadow: 3px 6px 6px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
transform: scale(1);
transition: transform ease 1s;
}
button:hover {
transform: scale(0.82);
background-color: rgba(156, 29, 29, 0.74);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
</head>
<body style="background-color:#f7ce5e">
<center>
<h1 id="title"><br>Welcome to Rock-Paper-Scissors!</h1>
<button class="button" id="play">Play</button><button class="button" id="info">Info</button>
<center><button class="button" id="back"> Back</button>
<p class="p" id="rock"><br>Rock: Can beat Scissors. <br>Loses to Paper.</p>
<p class="p" id="paper"><br>Paper: Can beat Rock. <br>Loses to Scissors.</p>
<p class="p" id="scissors"><br>Scissors: Can beat paper. <br>Loses to Rock.</p>
<p class="p" id="ChooseAnOption">Choose an Option (you can use keyboard keys)</p>
<button class="button" id="r">Rock (R)</button><button class="button" id="p">Paper (P)</button><button class="button" id="s">Scissors (S)</button>
</center>
<script src="index.js"></script>
</center>
</body>
</html>