打地鼠

最新推荐文章于 2020-09-04 21:18:41 发布

叶萝莉

最新推荐文章于 2020-09-04 21:18:41 发布

阅读量547

点赞数 2

分类专栏：前端h5 文章标签： html js css

本文链接：https://blog.csdn.net/weixin_43283797/article/details/84995950

版权

前端h5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一．游戏实现的流程
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>