mirror of
https://github.com/wanghao221/moyu.git
synced 2026-05-06 21:40:28 +08:00
158 lines
3.4 KiB
HTML
158 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>实验十六 使用 JavaScript 构建骰子游戏</title>
|
|
<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;
|
|
}
|
|
.page-footer {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px;
|
|
color: black;
|
|
background: rgba(255, 255, 255, 0.65);
|
|
}
|
|
|
|
.page-footer a {
|
|
display: flex;
|
|
margin-left: 4px;
|
|
}
|
|
.touxiang{
|
|
width:24px;
|
|
height:24px;
|
|
}
|
|
</style>
|
|
|
|
</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>
|
|
<footer class="page-footer">
|
|
<span>made by </span>
|
|
<a href="https://haiyong.site/moyu" target="_blank">
|
|
<img class="touxiang" src="https://haiyong.site/img/favicon.png" alt="George Martsoukos logo">
|
|
</a>
|
|
</footer>
|
|
</body>
|
|
<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() {
|
|
setTimeout(function () {
|
|
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) {
|
|
document.querySelector("h1").innerHTML = "平局!";
|
|
} else if (randomNumber1 < randomNumber2) {
|
|
document.querySelector("h1").innerHTML = (player2 + "获得胜利!");
|
|
} else {
|
|
document.querySelector("h1").innerHTML = (player1 + "获得胜利!");
|
|
}
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
|
|
</html>
|