基于JavaScript制作一個骰子游戲

更新時間：2022年04月13日 14:04:02 作者：海擁

這節(jié)實(shí)驗(yàn)我們將使用?HTML、CSS?和?JavaScript?構(gòu)建一個骰子游戲。設(shè)置兩名玩家(一個人玩也行)然后擲骰子，獲得更高點(diǎn)數(shù)的玩家將贏得游戲，感興趣的可以了解一下

知識點(diǎn)

:hover 選擇器
querySelector() 方法
setAttribute() 方法

骰子 1-6 點(diǎn)的圖片都放在這里了，大家可以將這些圖片保存在本地的文件夾中然后用相對地址引用，或者也可以直接使用這些圖片地址。

HTML 部分

HTML 代碼用于設(shè)計項目的基本結(jié)構(gòu)，其中一個 div 包含玩家姓名和初始骰子階段，另一個 div 包含兩個按鈕（一個按鈕用于擲骰子，另一個按鈕用于編輯玩家姓名）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
  <title>使用 JavaScript 構(gòu)建骰子游戲</title>
</head>

<body>
  <div class="container">
    <h1>讓我們開始吧</h1>

    <div class="dice">
      <p class="Player1">玩家 1</p>
      <img class="img1" src="dice6.png">
    </div>

    <div class="dice">
      <p class="Player2">玩家 2</p>
      <img class="img2" src="dice6.png">
    </div>
  </div>

  <div class="container bottom">
    <button type="button" class="butn" onClick="rollTheDice()">
      擲骰子
    </button>
  </div>
  <div class="container bottom">
    <button type="button" class="butn" onClick="editNames()">
      編輯玩家姓名
    </button>
  </div>
</body>
</html>

CSS 部分

在這里我們使用一些 CSS 屬性來設(shè)置骰子游戲的樣式。

<style>
  .container {
    width: 70%;
    margin: auto;
    text-align: center;
  }

  .dice {
    text-align: center;
    display: inline-block;
    margin: 10px;
  }

  body {
    background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
    background-size: 100% 100%;
    height: 95vh;
    margin: 0;
  }

  h1 {
    margin: 30px;
    font-family: "Lobster", cursive;
    text-shadow: 5px 0 #232931;
    font-size: 4.5rem;
    color: #4ecca3;
    text-align: center;
  }

  p {
    font-size: 2rem;
    color: #4ecca3;
    font-family: "Indie Flower", cursive;
  }

  img {
    width: 100%;
  }

  .bottom {
    padding-top: 30px;
  }

  .butn {
    background: #4ecca3;
    font-family: "Indie Flower", cursive;
    border-radius: 7px;
    color: #ffff;
    font-size: 30px;
    padding: 16px 25px 16px 25px;
    text-decoration: none;
  }

  .butn:hover {
    background: #232931;
    text-decoration: none;
  }
</style>

:hover 選擇器可在鼠標(biāo)移到元素上時添加特殊樣式。

JavaScript 部分

JavaScript 代碼包含骰子游戲的兩個功能。第一個功能是在單擊按鈕后重命名玩家姓名。另一個功能是在單擊按鈕后擲骰子。雙方玩家擲骰子后，獲得點(diǎn)數(shù)最高的玩家將獲勝，如果兩個玩家獲得相同的相位值則游戲平局。

<script>
  // 玩家姓名
  var player1 = "Player 1";
  var player2 = "Player 2";

  // 改變玩家姓名的功能
  function editNames() {
    player1 = prompt("更改玩家 1 姓名");
    player2 = prompt("更改玩家 2 姓名");

    document.querySelector("p.Player1").innerHTML = player1;
    document.querySelector("p.Player2").innerHTML = player2;
  }

  // 擲骰子的功能
  function rollTheDice() {
    //設(shè)置了一個 1000 毫秒的延遲
    setTimeout(function () {
      //生成 1-6 的隨機(jī)數(shù)
      var randomNumber1 = Math.floor(Math.random() * 6) + 1;
      var randomNumber2 = Math.floor(Math.random() * 6) + 1;
      //將骰子的圖片改成對應(yīng)隨機(jī)數(shù)
      document.querySelector(".img1").setAttribute("src", "dice" + randomNumber1 + ".png");
      document.querySelector(".img2").setAttribute("src", "dice" + randomNumber2 + ".png");
      //兩個數(shù)相等
      if (randomNumber1 === randomNumber2) {
        //將 h1 的文本改為 "平局!"
        document.querySelector("h1").innerHTML = "平局!";
      } else if (randomNumber1 < randomNumber2) {
        document.querySelector("h1").innerHTML = (player2 + "獲得勝利!");
      } else {
        document.querySelector("h1").innerHTML = (player1 + "獲得勝利!");
      }
    }, 1000);
  }
</script>