JavaScript骰子游戏

时间:2022-05-28 海拥人气:0

游戏可以通过这个链接进入

完整源码我已经放在GitHub上了

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

知识点

:hover 选择器
querySelector() 方法
setAttribute() 方法

骰子 1-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>

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

<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() 方法创建或改变某个新属性。

到这里我们的骰子游戏就做好了，下面我给出了完整的源代码，同学们可以下载下来试一试：

https://github.com/wanghao221/moyu

总结

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

加载全部内容