• 当前标签:animation-fill-mode

程序开发 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

2017-03-20 20:54:51 26 0 0
阅读详情
  • 1
前往