H5学习之制作打地鼠游戏

黄良钵

分类: 程序开发 38 0

H5学习之制作打地鼠游戏

打地鼠游戏,挺不错的,可以在你网站的404页面做一个,这里面自个写的包含一个html文件和一个js文件。

代码如打地鼠:

<html>

<head>

    <meta charset="UTF-8">

    <title>打地鼠</title>

    <style>

        body{

            margin: 0;

            background-image: url(image/bg.jpg);

            /*更改鼠标样式时可以设置值 也可以设置图片 但当使用图片链接时后面必须加上逗号*/

            cursor: url(image/cursor.png), auto;

            /*禁止用户选中html文件*/

            -moz-user-select: none;

        }

        table{

            width: 600px;

            height: 600px;

            margin: 0 auto;

        }

        td{

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

            background-repeat: no-repeat;

            background-size: 120px 50px;

            height: 150px;

            background-position: center bottom;

            text-align: center;

            vertical-align: bottom;

        }

        img{

            height: 0;

            width: 80px;

            position: relative;

            bottom: 8px;

            animation-timing-function: linear;

            /*当动画结束时 保持当前状态 不恢复到开始状态*/

            animation-fill-mode: both;

        }

        .mouseDown{

            animation-name: down;

            animation-duration: 0.3s;

        }

        .mouseUp{

            animation-name: up;

            animation-duration: 0.3s;

        }

        @keyframes down{

            0%{

                height: 70px;

            }

            100%{

                height: 0;

            }

        }

        @keyframes up{

            0%{

                height: 0;

            }

            100%{

                height: 70px;

            }

        }

        #score{

            font-size: 30px;

            position: absolute;

            top: 50px;

            background-color: rgba(100, 100, 100, 0.6);

            line-height:50px;

            padding-left: 10px;

            padding-right:15px;

            border-top-right-radius: 5px;

            border-bottom-right-radius: 5px;

        }

    </style>

</head>

<body>

    <!--autoplay自动播放 loop当视频播放结束时重新播放-->

    <audio src="audio/22222.mp3" autoplay loop></audio>

    <audio id="dazhong"></audio>

    <p id="score">得分:0</p>

    <!--table定义表格-->

    <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 src="index.js"></script>

</body>

</html>

javascript代码:

var mouses = $('img')

var score = 0

function show(){

    // 取值0-15总共16个数

    var a = Math.floor(Math.random()*16)

    // 获取到每个老鼠

    var mouse = mouses.get(a)

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

    // 延时执行

    setTimeout(function() {

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

    },2500);

}

function play(){

    show()

    show()

    show()

    show()

    show()    

}

setInterval(play,2000)

// 打中地鼠

$('img').click(function(){

    // 当地鼠被打中时 添加一个打中的声音并且出现一批老鼠

    $('#dazhong').attr('src','audio/dazhong.wav').get(0).play()

    // this指当前被鼠标打中的这个老鼠 让被打中的老鼠隐藏起来

    $(this).addClass('mouseDown').removeClass('mouseUp')

    // score = score + 10

    score +=10

    $('#score').text('得分:'+ score)

})

// 当鼠标点下去的时候改变鼠标的样式

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

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

    // 当鼠标松开时切换到原来的样式

}).mouseup(function(){

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

})

素材下载:2017-03-20 dadishu.tar

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
animation-fill-mode、cursor、H5学习

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “H5学习之制作打地鼠游戏”

Loading...