基于JavaScript制作一个骰子游戏
时间：2022-12-25 15:22:00 | 栏目：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()方法等。