您的位置：首页 > Web前端 > HTML5

H5 打地鼠游戏

2016-08-25 08:51 267 查看

此游戏用到了jQuery，请自行下载

打地鼠

css样式

<style>
body{
height: 100%;

width: 100%;
/*设置背景图片*/
background-image: url(image/bg.jpg);
/*设置外间距为0*/
margin: 0px;
/*更改鼠标样式*/
cursor: url(image/cursor.png),auto;

/*禁止用户选择标签上的文本；*/

-moz-user-select:none;
}
/*表单标签*/
table
{
height: 600px;

width: 600px;

margin: 0px auto;
/*设置背景色为黑色*/
/*background: black;*/

}

/*表单列标签*/
td{
height: 100px;
/*background:blue;*/

background-image: url(image/hole.png);

background-repeat: no-repeat;

background-size: 120px 62px;

background-position: center bottom;
/*设置垂直方向的状态底部垂直*/
vertical-align: bottom;

}

img{
width: 80px;

height:0px;
/*
margin: 18px 45px; */

position: relative;

bottom: 8px;

left:32px;
/*设置动画匀速运动*/

animation-timing-function: linear;
/*让动画处于结束时的动作状态*/
animation-fill-mode: both;
}

#score
{

text-align: center;
/*设置左边内间距*/
padding-left: 15px;
/*设置右边内间距*/
padding-right: 15px;
/*设置該标签到上方的距离*/
top:50px;
/*设置左上角弧度*/
border-top-right-radius: 15px;
/*设置右上角弧度*/
border-bottom-right-radius: 15px;

position: absolute;

/*设置背景色*/
background-color: rgba(100,100,100,0.7);
/*设置文本字体大小*/
font-size: 30px;
/*设置行高*/
line-height: 50px;
}
/*表示地鼠出来时候的操作*/
.mouseUp
{
animation-name:up;

animation-duration: 0.3s;

}
/*地鼠回去时的操作*/
.mouseDown
{
/*地鼠回去时的动画*/
animation-name:down;

animation-duration: 0.1s;

}
/*地鼠上升的具体操作*/
@keyframes up
{
/*动画刚开始的状态*/
0%
{
height:0px;
}
/*动画结束时的状态*/
100%
{
height:70px;
}
}
/*地鼠回洞的动画*/
@keyframes down
{
0%
{
height: 70px;
}
100%
{
height:0px;
}
}
</style>

html
<html>
<head>
<meta charset="UTF-8">
<title>class_打地鼠</title>
<script src="jquery.js"></script>
</head>
<body>
<main>
<p id="score">得分：0</p>
<audio src="audio/music.mp3" autoplay loop></audio>
<audio id="dazhong"></audio>
<table>


<tr>
<td><img src="image/mouse.png" alt="1"></td>
<td><img src="image/mouse.png" alt="2" /></td>
<td><img src="image/mouse.png" alt="2"></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>
</main>
<script src="mouse.js"></script>

</body>
</html>js
// 先获取所有的地鼠图片 $()
var mouses = $('img');
// 设置得分
var score = 0;
function show()
{
// 获取一个0~15的随机数
var a = Math.random() * 16;
// 将获取的数去掉小数位
a = Math.floor(a);

// 从所有地鼠图片中随即获取一张
var mouse = mouses.get(a);
// 让随即获取的地鼠出洞
// addClass 为每一个找到的元素增加一个指定的样式类名
// removeClass 删除一个指定的样式类名

$(mouse).addClass('mouseUp').removeClass('mouseDown');

// setTimeout 延时多长时间后调用一个方法
// 参数一：方法名字参数二：延迟的时长
// 让地鼠显示一段时间后缩回
setTimeout(function(){

$(mouse).addClass('mouseDown').removeClass('mouseUp');

} , 4000);

}
function play()
{
setTimeout(show ,300);

setTimeout(show ,600);

setTimeout(show ,900);

setTimeout(show ,1200);

setTimeout(show ,1500);

setTimeout(show ,1800);

}
setInterval(play,3000);

$('body').mousedown(function(){

$('body').css('cursor','url(image/cursor-down.png),auto');

}).mouseup(function(){
$('body').css('cursor','url(image/cursor.png),auto');
})

$('img').click(function(){
console.log('点击了');
// 播放击中声音
$('#dazhong').attr('src','audio/dazhong.wav').get(0).play();
//地鼠消失
$(this).addClass('mouseDown').removeClass('mouseUp');
var src=$('img').attr('src');

score += 10;

$('#score').text('得分：' + score);

// 地鼠消失

});

源代码请私信微博（TryCatche）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航