利用JavaScript制作简单的掷骰子游戏

这节实验我们将使用 HTML、CSS 和 JavaScript 构建一个骰子游戏。设置两名玩家(一个人玩也行)然后掷骰子，获得更高点数的玩家将赢得游戏。

知识点

:hover 选择器
querySelector() 方法
setAttribute() 方法骰子 1-6 点的图片都放在这里了，大家可以将这些图片保存在本地的文件夹中然后用相对地址引用，或者也可以直接使用这些图片地址。

1 点
2 点
3 点
4 点
5 点
6 点

HTML 部分

HTML 代码用于设计项目的基本结构，其中一个 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 构建骰子游戏</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>

利用JavaScript制作简单的掷骰子游戏

CSS 部分

在这里我们使用一些 CSS 属性来设置骰子游戏的样式。

<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 选择器可在鼠标移到元素上时添加特殊样式。

利用JavaScript制作简单的掷骰子游戏

JavaScript 部分

JavaScript 代码包含骰子游戏的两个功能。第一个功能是在单击按钮后重命名玩家姓名。另一个功能是在单击按钮后掷骰子。双方玩家掷骰子后，获得点数最高的玩家将获胜，如果两个玩家获得相同的相位值则游戏平局。

<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() {    //设置了一个 1000 毫秒的延迟    setTimeout(function () {      //生成 1-6 的随机数      var randomNumber1 = Math.floor(Math.random() * 6) + 1;      var randomNumber2 = Math.floor(Math.random() * 6) + 1;      //将骰子的图片改成对应随机数      document.querySelector(".img1").setAttribute("src", "dice" + randomNumber1 + ".png");      document.querySelector(".img2").setAttribute("src", "dice" + randomNumber2 + ".png");      //两个数相等      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>

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

setAttribute() 方法创建或改变某个新属性。
利用JavaScript制作简单的掷骰子游戏
到这里我们的骰子游戏就做好了，下面我给出了完整的源代码，同学们可以下载下来试一试：github.com/wanghao221/…顺带给个星星吧

总结

相信通过上面的教程，大家已经学会了如何使用 JavaScript 构建骰子游戏。同时我们又学习/复习了一些知识，如：:hover 选择器、querySelector()和setAttribute()方法等。

同学们也动起手来做一个掷骰子小游戏吧！

知识点