一．游戏实现的流程
a) 游戏界面和背景音乐的实现
b) 设置按钮的点击效果
c) 地鼠的隐藏与出现
d) 地鼠的随机出现
e) 设置小锤跟随鼠标移动
f) 小锤和地鼠的碰撞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>打地鼠</title>
<style>
body {
margin: 0;
background-image: url(image/bg.jpg);
cursor: url(image/cursor.png), auto;
}
table{
width: 600px;
height: 600px;
/* 外边距：上、下为0，左、右为auto */
margin: 0 auto;
}
td{
height: 150px;
background-image: url(image/hole.png);
background-repeat: no-repeat;
background-size: 120px 50px;
background-position: center bottom;
text-align: center;
vertical-align: bottom;
}
img{
width: 80px;
height: 0;
/* 使用相对定位+底部属性可以是标签偏离原来的位置 */
position: relative;
bottom: 8px;
/* 既需要在img标签上添加地鼠出现的动画又要添加消失的动画 */
/* animation-name: up; */
/* animation-duration: 3s; */
animation-timing-function: linear;
/* 保留动画效果 */
animation-fill-mode: both;
}
.mouseUp{
animation-name: up;
animation-duration: 0.3s;
}
.mouseDown{
animation-name: down;
animation-duration: 0.1s;
}
/* 地鼠出现的动画 */
@keyframes up{
from{height: 0;}
to{height: 70px;}
}
/* 地鼠消失的动画 */
@keyframes down{
from{height: 70px;}
to{height: 0;}
}
</style>
</head>
<body>
<audio src="audio/music.mp3" autoplay loop></audio>
<audio id="dazhong"></audio>
<p>得分：0</p>
<table>
<tr>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
</tr>
<tr>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
</tr>
<tr>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
</tr>
<tr>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
<td><img src="image/mouse.png" alt=""></td>
</tr>
</table>
<script src="jquery.js"></script>
<script>
var score = 0
// $('img')：是jQuery中查找标签的方法，会找到所有img标签
var mouses = $('img')
// 原生js查找标签
// document.getElementsByTagName('img')
// show函数用来显示一批地鼠，过一会儿隐藏
function show() {
// Math.random()是js中产生随机数函数，产生的随机数在0~1之间
// Math.floor()是js中取整数的函数
var index = Math.floor(Math.random() * 16)
// console.log(index)
var mouse = mouses.get(index)
// addClass()是jquery中给标签添加类名的函数
// 作用是在某个标签上添加class='mouseUp'这样的类名
$(mouse).addClass('mouseUp').removeClass('mouseDown')
// 一段时间后添加消失在动画
// setTimeout()是延迟函数
// 参数1：函数
// 参数2：延迟的时间，单位为毫秒
setTimeout(() => {
$(mouse).addClass('mouseDown').removeClass('mouseUp')
}, 2500);
}
// 调用show函数跳出一批地鼠
function play(){
show()
show()
show()
show()
show()
show()
}
setInterval(play, 2000)
// 打中地鼠
// click()是jquery中给某个标签添加单击事件的函数
// 在该标签上单击时会调用click()里的函数
$('img').click(function(){
// $('#dazhong')是jquery中查找id为dazhong的标签
// attr()是jquery中给某个标签添加属性的函数，这里需要添加src属性
$('#dazhong').attr('src', 'audio/dazhong.wav').get(0).play()
// 原生js查找具有id属性的标签
// document.getElementById('dazhong')
// 被打中的地鼠添加消失的动画
$(this).addClass('mouseDown').removeClass('mouseUp')
score += 10
console.log(score)
$('p').text('得分：' + score)
})
// 先找到body标签，再在body标签上添加鼠标按下事件
// 含义就是：在body上按下鼠标后会调用mousedown里的函数
$('body').mousedown(function(){
$('body').css('cursor', 'url(image/cursor-down.png),auto')
}).mouseup(function(){
$('body').css('cursor', 'url(image/cursor.png),auto')
})
</script>
</body>
</html>
代码效果：
image：
audio：
8594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
