js手头剪刀布小游戏

最新推荐文章于 2024-08-27 13:38:21 发布

要讲故事

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量128

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/Wzc0720/article/details/130273932

版权

HTML

<!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>石头剪刀布</title>
    <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/base.css" />
</head>
<body>
    <div id="container">
        <h2>石头剪刀布</h2>
        <div id="game-container">
          
          <div id="buttons">
            <button class="btn">石头</button>
            <button class="btn">布</button>
            <button class="btn">剪刀</button>
          </div>
          <div id="choice">
            <div id="playerChoice">
              <img src="img/top.png" alt="" id="playerChoiceImg">
              <h3 id="playerChoiceTxt"></h3>
            </div>
            <h1>VS</h1> 
            <div id="computerChoice">
              <img src="img/top.png" alt="" id="computerChoiceImg">
              <h3 id="computerChoiceTxt"></h3>
            </div>
          </div>
          <div id="points">
            <label for="playerPoints">玩家分数：</label>
            <span class="playerPoints"></span>
            <h1>:</h1>
            <label for="computerPoints">电脑分数：</label>
            <span class="computerPoints"></span>
          </div>
        </div>
      </div>
      <script src="js/script.js"></script>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}


body {
  background-color: #0093E9;
  background-image: linear-gradient(160deg, yellow 0%, #80D0C7 100%);
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 1rem;
}

#container h2 {
  margin-bottom: 5rem;
  padding-bottom: 5px;
  border-bottom: solid 2px #404040;
}

#points {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#points label {
  border-bottom: solid 2px #404040;
  padding-bottom: 2px;
}

#choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0rem;
}

#choice img {
  width: 50%;
}

#computerChoice,
#playerChoice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 130px;
  max-height: 130px;
}

#computerChoiceTxt,
#playerChoiceTxt {
  margin-top: 1rem;
}

#buttons {
  max-width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.btn {
  border: none;
  background: #404040;
  color: #ffffff !important;
  font-weight: 100;
  padding: 15px;
  text-transform: uppercase;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  margin: 0rem .3rem;
}

.btn:hover {
  color: #404040 !important;
  font-weight: 700 !important;
  background: white;
  transition: all 0.3s ease 0s;
}

.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
  color: black;
  background: rgba(255, 255, 255, 0.65);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

.touxiang {
  width: 24px;
  height: 24px;
}

JS


const choices = [
    {
        id: 1,
        name: "石头",
        image: "./img/rock.png"
    },
    {
        id: 2,
        name: "布",
        image: "./img/paper.png"
    },
    {
        id: 3,
        name: "剪刀",
        image: "./img/scissors.png"
    }]


var playerPoints = document.querySelector(".playerPoints")
var computerPoints = document.querySelector(".computerPoints")
var playerChoiceImg = document.querySelector("#playerChoiceImg")
var playerChoiceTxt = document.querySelector("#playerChoiceTxt")
var computerChoiceImg = document.querySelector("#computerChoiceImg")
var computerChoiceTxt = document.querySelector("#computerChoiceTxt")
var buttons = document.querySelectorAll(".btn")
var points = [0, 0]
var randomNumber;



buttons.forEach((button) => {
    button.addEventListener("click", () => {
        if (button.textContent === "石头") {
            playerChoiceImg.src = choices[0].image;
            playerChoiceTxt.textContent = choices[0].name;
        } else if (button.textContent === "布") {
            playerChoiceImg.src = choices[1].image;
            playerChoiceTxt.textContent = choices[1].name;
        } else if (button.textContent === "剪刀") {
            playerChoiceImg.src = choices[2].image;
            playerChoiceTxt.textContent = choices[2].name;
        }
        getComputerChoice();
        console.log(points);
    })
})


function getComputerChoice() {
    computerChoiceImg.src = "./img/gif.gif"
    setTimeout(() => {
        randomNumber = Math.floor(Math.random() * 3);
        computerChoiceImg.src = choices[randomNumber].image;
        computerChoiceTxt.textContent = choices[randomNumber].name;
        gameRules();
        playerPoints.textContent = points[0];
        computerPoints.textContent = points[1];
        whoWon();
    }, 1000);
}

function gameRules() {
    if (playerChoiceTxt.textContent === choices[0].name && computerChoiceTxt.textContent === choices[1].name) {
        points[1]++;
    } else if (playerChoiceTxt.textContent === choices[1].name && computerChoiceTxt.textContent === choices[2].name) {
        points[1]++;
    } else if (playerChoiceTxt.textContent === choices[2].name && computerChoiceTxt.textContent === choices[0].name) {
        points[1]++;
    } else if (playerChoiceTxt.textContent === computerChoiceTxt.textContent) {
        console.log("draw");
    } else {
        points[0]++;
    }
}

function whoWon() {
    if (points[0] === 10) {
        alert("你干掉了AI成功取得胜利!")
        points = [0, 0];
    } else if (points[1] === 10) {
        alert("你被人工智能打败了!")
        points = [0, 0];
    }
}