html+css+js写一个小游戏
时间: 2023-06-29 18:16:48 浏览: 61
好的,下面是一个使用HTML、CSS和JS写的小游戏示例,名为“打地鼠”:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="game">
<div class="hole hole1"></div>
<div class="hole hole2"></div>
<div class="hole hole3"></div>
<div class="score">得分:<span id="score">0</span></div>
</div>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
```
CSS代码:
```
body {
background-color: #F8F8F8;
font-family: Arial, sans-serif;
}
.game {
margin: 50px auto;
position: relative;
width: 860px;
height: 440px;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.hole {
position: absolute;
width: 200px;
height: 200px;
background-image: url(images/mole.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.hole1 {
top: 0;
left: 0;
}
.hole2 {
top: 0;
left: 330px;
}
.hole3 {
top: 0;
left: 660px;
}
.hole.show {
opacity: 1;
}
.score {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
font-weight: bold;
color: #FFF;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
```
JS代码:
```
var score = 0; // 得分
var holes = document.querySelectorAll('.hole'); // 地鼠洞
var scoreBoard = document.querySelector('#score'); // 得分面板
var lastHole; // 上一个出现的地鼠洞
var timeUp = false; // 时间结束标志
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
var idx = Math.floor(Math.random() * holes.length);
var hole = holes[idx];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
var time = randomTime(500, 1000);
var hole = randomHole(holes);
hole.classList.add('show');
setTimeout(function() {
hole.classList.remove('show');
if (!timeUp) {
peep();
}
}, time);
}
function startGame() {
score = 0;
scoreBoard.textContent = score;
timeUp = false;
peep();
setTimeout(function() {
timeUp = true;
}, 10000);
}
function bonk(event) {
if (!event.isTrusted) { // 防止作弊
return;
}
score++;
this.classList.remove('show');
scoreBoard.textContent = score;
}
holes.forEach(function(hole) {
hole.addEventListener('click', bonk);
});
startGame();
```
这个小游戏的原理是,在一个背景图像中随机显示三个地鼠洞,每隔一段时间,随机从其中一个洞里冒出一个地鼠,玩家需要尽快点击它,每点击一次得一分。游戏时间为10秒,时间结束后得分最高者胜利。
希望这个示例对你有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)