给我几个html摸鱼小游戏的代码,在加载中有加载中的提示,加载完毕后自动关闭,要好玩的,能用的,测试没问题的
时间: 2023-07-16 11:11:41 浏览: 69
以下是几个简单的 HTML 摸鱼小游戏示例,包含了加载中提示和加载完毕自动关闭的功能。
1. 弹球游戏
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹球游戏</title>
<style>
canvas {
border: 1px solid #ccc;
background-color: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="loading">游戏正在加载中,请稍候...</div>
<canvas id="canvas" width="480" height="320"></canvas>
<script>
window.onload = function() {
document.getElementById('loading').style.display = 'none';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 游戏代码
// ...
}
</script>
</body>
</html>
```
2. 扫雷游戏
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扫雷游戏</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid #ccc;
width: 30px;
height: 30px;
text-align: center;
font-size: 20px;
cursor: pointer;
}
.hidden {
background-color: #eee;
}
.visible {
background-color: #fff;
}
.mine {
background-color: #f00;
}
</style>
</head>
<body>
<div id="loading">游戏正在加载中,请稍候...</div>
<table id="gameTable"></table>
<script>
window.onload = function() {
document.getElementById('loading').style.display = 'none';
var gameTable = document.getElementById('gameTable');
// 游戏代码
// ...
}
</script>
</body>
</html>
```
3. 俄罗斯方块
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>俄罗斯方块</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid #ccc;
width: 30px;
height: 30px;
text-align: center;
font-size: 20px;
}
.hidden {
background-color: #eee;
}
.visible {
background-color: #fff;
}
.mine {
background-color: #f00;
}
</style>
</head>
<body>
<div id="loading">游戏正在加载中,请稍候...</div>
<table id="gameTable"></table>
<script>
window.onload = function() {
document.getElementById('loading').style.display = 'none';
var gameTable = document.getElementById('gameTable');
// 游戏代码
// ...
}
</script>
</body>
</html>
```
以上三个示例均为简单的摸鱼小游戏,具体实现和细节需要自行补充完善。