帮我写一个网页,网页上方用文字写上“原神,启动!”,网页正中是一个扫雷小游戏,当扫雷游戏成功时,弹出文字“原神,国产之光!”,当扫雷游戏失败时,弹出文字“我玩原神用你家钱了?”
时间: 2024-06-08 19:12:32 浏览: 99
扫雷小游戏,和window上自带的一模一样(用java编写,可以在各大系统运行).zip
好的,这里提供一个简单的HTML代码,实现网页上方文字和扫雷小游戏,以及成功和失败的提示。
```html
<!DOCTYPE html>
<html>
<head>
<title>原神,启动!</title>
<style>
h1 {
text-align: center;
}
#game-board {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid black;
}
.square {
width: 30px;
height: 30px;
border: 1px solid gray;
text-align: center;
line-height: 30px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>原神,启动!</h1>
<div id="game-board"></div>
<script>
// create game board
var board = document.getElementById("game-board");
var squares = [];
var size = 10; // board size
var mines = 10; // number of mines
for (var i = 0; i < size * size; i++) {
var square = document.createElement("div");
square.classList.add("square");
square.setAttribute("data-id", i);
square.addEventListener("click", function() {
// handle click event
var id = this.getAttribute("data-id");
if (this.classList.contains("mine")) {
alert("我玩原神用你家钱了?");
} else {
this.classList.add("revealed");
var revealed = document.querySelectorAll(".revealed").length;
if (revealed == size * size - mines) {
alert("原神,国产之光!");
}
}
});
board.appendChild(square);
squares.push(square);
}
// add mines
for (var i = 0; i < mines; i++) {
var id = Math.floor(Math.random() * squares.length);
squares[id].classList.add("mine");
squares.splice(id, 1);
}
</script>
</body>
</html>
```
解释一下代码:
- 首先使用`<h1>`标签添加网页上方的文字“原神,启动!”。
- 然后用一个`<div>`标签作为扫雷小游戏的容器,设置了宽度、高度和边框等样式。
- 使用JavaScript动态创建了10×10的方格,并且每个方格都有一个独立的编号。
- 在JavaScript中添加了点击事件,当点击方格时,根据是否是地雷来进行相应的处理,并且如果全部非地雷方格都被揭示了,就弹出提示“原神,国产之光!”。
- 最后通过CSS样式设置了方格的样式,包括大小、边框、字体等,并且添加了光标样式,以及当方格被揭示时的样式。
阅读全文