时间戳

首页 > 解决方案 > 石头剪刀布使用 JS 但不是玩家赢了多少次不起作用

javascript - 石头剪刀布使用 JS 但不是玩家赢了多少次不起作用

问题描述

JS新手，遇到问题。问题是一个球员赢了多少次并不能很好地发挥作用。如果看代码很无聊，那就告诉我一种编辑它的方法。我在 python 中编写了完全相同的代码，并且运行良好，IDK JS 有什么问题或其他什么...

我知道 UI 设计还有其他问题，请忽略它：D。

const rpsGame = (user) => {
  userChoise = user.id;

  var bot = Math.floor(Math.random() * 3);

  if (bot == 0) {
    var botChoise = "rock";
  } else if (bot == 1) {
    botChoise = "paper";
  } else {
    botChoise = "scissors";
  }

  let userWins = 0;
  let botWins = 0;

  if (userChoise == botChoise) {
    document.querySelector(".choose").textContent = "You Tied!";
  } else if (userChoise == "rock" && botChoise == "scissors") {
    let won = (document.querySelector(".choose").textContent = "You Won!");
    userWins += 1;
    document.querySelector(".userWins").textContent = userWins;
  } else if (userChoise == "rock" && botChoise == "paper") {
    document.querySelector(".choose").textContent = "You Lost!";
    botWins += 1;
    document.querySelector(".userWins").textContent = botWins;
  } else if (userChoise == "paper" && botChoise == "rock") {
    document.querySelector(".choose").textContent = "You Won!";
    userWins += 1;
    document.querySelector(".userWins").textContent = userWins;
  } else if (userChoise == "paper" && botChoise == "scissors") {
    document.querySelector(".choose").textContent = "You Lost!";
    botWins += 1;
    document.querySelector(".userWins").textContent = botWins;
  } else if (userChoise == "scissors" && botChoise == "paper") {
    document.querySelector(".choose").textContent = "You Won!";
    userWins += 1;
    document.querySelector(".userWins").textContent = userWins;
  } else if (userChoise == "scissors" && botChoise == "rock") {
    document.querySelector(".choose").textContent = "You Lost!";
    botWins += 1;
    document.querySelector(".userWins").textContent = botWins;
  }

  if (botChoise == "rock") {
    let rock = document.querySelector("#scissors");
    rock.setAttribute("src", "/rockPaperScissors/img/rock.jpg");
  } else if (botChoise == "paper") {
    let paper = document.querySelector("#scissors");
    paper.setAttribute("src", "/rockPaperScissors/img/paper.jpg");
  } else {
    let scissors = document.querySelector("#scissors");
    scissors.setAttribute("src", "/rockPaperScissors/img/scissors.jpg");
  }

  if (userChoise == "rock") {
    let rock = document.querySelector("#rock");
    rock.setAttribute("src", "/rockPaperScissors/img/rock.jpg");
  } else if (userChoise == "paper") {
    let paper = document.querySelector("#rock");
    paper.setAttribute("src", "/rockPaperScissors/img/paper.jpg");
  } else {
    let scissors = document.querySelector("#rock");
    scissors.setAttribute("src", "/rockPaperScissors/img/scissors.jpg");
  }
};
.main {
  width: 70%;
  margin: auto auto;
}

.main h1 {
  animation: color-change 10s infinite;
}

@keyframes color-change {
  0% {
    color: blue;
  }
  10% {
    color: #8e44ad;
  }
  20% {
    color: #1abc9c;
  }
  30% {
    color: #d35400;
  }
  40% {
    color: blue;
  }
  50% {
    color: #34495e;
  }
  60% {
    color: blue;
  }
  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }
  90% {
    color: #2980b9;
  }
  100% {
    color: pink;
  }
}

.container {
  display: flex;
  justify-content: space-around;
  margin-top: 75px;
}

.container #rock,
.container #paper,
.container #scissors {
  transition: 0.1s;
}

.container #rock:hover,
.container #paper:hover,
.container #scissors:hover {
  cursor: pointer;
  box-shadow: rgba(220, 20, 60, 0.7) 0px 0px 40px;
}

.header {
  display: flex;
  justify-content: space-around;
}

.header .choose {
  font-family: sans-serif;
  margin: auto 0 0px 0;
  color: cadetblue;
}

.header .result {
  margin: auto 0;
  font-family: sans-serif;
  font-size: 40px;
}
<div class="main">
  <h1 style="font-family: sans-serif; text-align: center; margin-top: 50px">
    Rock Paper Scissors
  </h1>
  <div class="header">
    <h2 class="userWins result">0</h2>
    <h2 class="choose">Choose One</h2>
    <h2 class="botWins result">0</h2>
  </div>
  <div class="container">
    <img src="img/rock.jpg" alt="rock" width="150" height="150" id="rock" onclick="rpsGame(this)" draggable="false" />
    <img src="img/paper.jpg" alt="paper" width="150" height="150" id="paper" onclick="rpsGame(this)" draggable="false" />
    <img src="img/scissors.jpg" alt="scissors" width="150" height="150" id="scissors" onclick="rpsGame(this)" draggable="false" />
  </div>
</div>

标签： javascripthtmlcss

解决方案

回答：

保存获胜次数的变量botWins和userWins需要从rpsGame函数中移出。目前，每次调用该函数时它们都设置为零。

正在为 更新错误的元素botWins。替换userWins为botWins当前编码为的行内：

 document.querySelector('.userWins').textContent = botWins

（多行受到影响，可能是剪切和粘贴错误。@MarkM 在评论中提出）

建议：如果你在严格模式下编写 JavaScript，编译器会告诉你一些未被注意到的错误——比如没有userChoise在代码中声明。

（如果你在草率模式下编写 JavaScript，分配给未声明的变量会自动在全局范围内创建变量！）

关于代码片段： 您可以将代码格式化为代码片段，以便读者可以运行它来查看它的作用。请参阅格式化帮助并搜索“代码片段”。

代码片段示例使用更正的代码和一个console.log获胜和做出的选择：

"use strict";
  let userWins = 0;
  let botWins = 0;
  const rpsGame = (user) => {
    const userChoise = user.id;

    var bot = Math.floor(Math.random() * 3);

    if (bot == 0) {
        var botChoise = "rock";
    } else if (bot == 1) {
        botChoise = "paper";
    } else {
        botChoise = "scissors";
    }

    if (userChoise == botChoise) {
        document.querySelector(".choose").textContent = "You Tied!";
    } else if (userChoise == "rock" && botChoise == "scissors") {
        let won = document.querySelector(".choose").textContent = "You Won!";
        userWins += 1
        document.querySelector('.userWins').textContent = userWins
    } else if (userChoise == "rock" && botChoise == "paper") {
        document.querySelector(".choose").textContent = "You Lost!";
        botWins += 1
        document.querySelector('.botWins').textContent = botWins
    } else if (userChoise == "paper" && botChoise == "rock") {
        document.querySelector(".choose").textContent = "You Won!";
        userWins += 1
        document.querySelector('.userWins').textContent = userWins
    } else if (userChoise == "paper" && botChoise == "scissors") {
        document.querySelector(".choose").textContent = "You Lost!";
        botWins += 1
        document.querySelector('.botWins').textContent = botWins
    } else if (userChoise == "scissors" && botChoise == "paper") {
        document.querySelector(".choose").textContent = "You Won!";
        userWins += 1
        document.querySelector('.userWins').textContent = userWins
    } else if (userChoise == "scissors" && botChoise == "rock") {
        document.querySelector(".choose").textContent = "You Lost!";
        botWins += 1
        document.querySelector('.botWins').textContent = botWins
    }

console.clear();
console.log("botChoise: %s, userChoise: %s, botWins: %s, userWins: %s", botChoise, userChoise, botWins, userWins);

    if (botChoise == "rock") {
        let rock = document.querySelector("#scissors");
        rock.setAttribute("src", "/rockPaperScissors/img/rock.jpg");
    } else if (botChoise == "paper") {
        let paper = document.querySelector("#scissors");
        paper.setAttribute("src", "/rockPaperScissors/img/paper.jpg");
    } else {
        let scissors = document.querySelector("#scissors");
        scissors.setAttribute("src", "/rockPaperScissors/img/scissors.jpg");
    }

    if (userChoise == "rock") {
        let rock = document.querySelector("#rock");
        rock.setAttribute("src", "/rockPaperScissors/img/rock.jpg");
    } else if (userChoise == "paper") {
        let paper = document.querySelector("#rock");
        paper.setAttribute("src", "/rockPaperScissors/img/paper.jpg");
    } else {
        let scissors = document.querySelector("#rock");
        scissors.setAttribute("src", "/rockPaperScissors/img/scissors.jpg");
    }

};
.main {
    width: 70%;
    margin: auto auto;
}

.main h1 {
    animation: color-change 10s infinite;
}

@keyframes color-change {
    0% {
        color: blue;
    }
    10% {
        color: #8e44ad;
    }
    20% {
        color: #1abc9c;
    }
    30% {
        color: #d35400;
    }
    40% {
        color: blue;
    }
    50% {
        color: #34495e;
    }
    60% {
        color: blue;
    }
    70% {
        color: #2980b9;
    }
    80% {
        color: #f1c40f;
    }
    90% {
        color: #2980b9;
    }
    100% {
        color: pink;
    }
}

.container {
    display: flex;
    justify-content: space-around;
    margin-top: 75px;
}

.container #rock,
.container #paper,
.container #scissors {
    transition: 0.1s;
}

.container #rock:hover,
.container #paper:hover,
.container #scissors:hover {
    cursor: pointer;
    box-shadow: rgba(220, 20, 60, 0.7) 0px 0px 40px;
}

.header {
    display: flex;
    justify-content: space-around;
}

.header .choose {
    font-family: sans-serif;
    margin: auto 0 0px 0;
    color: cadetblue;
}

.header .result {
    margin: auto 0;
    font-family: sans-serif;
    font-size: 40px;
}
<div class="main">
    <h1 style="font-family: sans-serif; text-align: center; margin-top: 50px;">Rock Paper Scissors</h1>
    <div class="header">
        <h2 class="userWins result">0</h2>
        <h2 class="choose">Choose One</h2>
        <h2 class="botWins result">0</h2>
    </div>
    <div class="container">
        <img src="img/rock.jpg" alt="rock" width="150" height="150" id="rock" onclick="rpsGame(this)"
            draggable="false">
        <img src="img/paper.jpg" alt="paper" width="150" height="150" id="paper" onclick="rpsGame(this)"
            draggable="false">
        <img src="img/scissors.jpg" alt="scissors" width="150" height="150" id="scissors" onclick="rpsGame(this)"
            draggable="false">
    </div>
</div>

推荐阅读