基于JavaScript制作一个骰子游戏

来源：互联网收集：自由互联发布时间：2023-01-19

目录知识点 HTML 部分 CSS 部分 JavaScript 部分总结游戏可以通过这个链接进入完整源码我已经放在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()方法等。

到此这篇关于基于JavaScript制作一个骰子游戏的文章就介绍到这了,更多相关JavaScript骰子游戏内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！

上一篇：微信小程序实现拍照功能
下一篇：没有了