web前端打地鼠小游戏

 <style>html,body{height: 100%;}body{margin: 0;overflow: hidden;background-image: url(image/bg.jpg);/* 用户不能选择内容 */user-select: none;/* 火狐浏览器的私有属性 */-moz-user-select: none;/* 谷歌和safaif浏览器的私有属性 */-webkit-user-select: none;/* ie 浏览器 */-ms-user-select: none;/* 设置鼠标样式 如果自定义图片必须加auto */cursor: url(image/cursor.png),auto;}p{background-color: red;position: absolute;top: 30px;border-radius: 0px 5px 5px 0px;font-size: 20px;font-weight: bold;font-family: 楷体;color: white;left: 30px;padding: 10px;}table{border: 1px solid black;width: 600px;height: 600px;margin: 40px auto;border-collapse: collapse;}td{width: 150px;height: 150px;border: 1px solid red;/* 合并边框 */background-image: url(image/hole.png);background-repeat: no-repeat;background-size: 120px 60px;background-position: center bottom;text-align: center;/* 数值对齐方式 */vertical-align: bottom;}td>img{width: 80px;height: 0px;position: relative;top: -10px;}/* 使用老师上去的动画效果 以后再js对一个元素对象添加这个up类，这个元素对象就是这个类的效果 */.up{animation: mouseUp 0.3s linear forwards;}.down{animation: mouseDown 0.3s linear forwards;}/* 地鼠上升和地鼠下去  添加两个动画效果 上去的动画效果：height 从0到70 下去的动画效果：height 从70到0 */@keyframes mouseUp{from{height: 0;}to{height: 70px;}}@keyframes mouseDown{from{height: 70px;}to{height: 0px;}}</style>

<body><!-- 背景音乐  autopplay 自动播放loop  循环--><audio src="music.mp3" autopplay loop></audio><!-- 打中的声音 点击地鼠的图片需要播放声音 --><audio id="dazhong"></audio><!-- 显示得分 --><p id="score">分数:0分</p><table><tr><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td></tr><tr><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td></tr><tr><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td></tr><tr><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td><td><img src="data:image/mouse.png" alt=""></td></tr></table></body>

<script src="jquery.js"></script><script>// 随机出现一个地鼠function show() {// 先随机一个0-15之间的数字var index = Math.random()*16index = Math.floor(index)// 把index集合找到所有的img的索引// eq(index)匹配指定索引的元素$("img").eq(index).addClass("up").removeClass("down")// 过一段时间地鼠下去 添加down类，移除up类setTimeout(function () {$("img").eq(index).addClass("down").removeClass("up")},5000)}setInterval(function () {for (let i = 0; i < 2; i++) {show()}},1000)// 鼠标按下设置鼠标的样式$("body").mousedown(function () {$(this).css("cursor","url(image/cursor-down.png),auto")})// 鼠标松开的时候 鼠标样式改成原来的图片$("body").mouseup(function () {$(this).css("cursor","url(image/cursor.png),auto")})// 得分var score = 0// 点击地鼠的时候$("img").click(function () {// 播放打中声音$("#dazhong").attr("src","audio/dazhong.wav").get(0).play()// 分数加10score+=10// 显示p标签上$("#score").text("分数："+score+"分")// 点击的时候地鼠下去$(this).addClass("down").removeClass("up")})</script>

web前端打地鼠小游戏相关推荐

linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
java android 打地鼠_Android实现打地鼠小游戏
本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下实现结果代码实现 playmouse.java package com.example.playmouse; ...
如何用python制作五子棋游戏_Python制作打地鼠小游戏
原文链接 Python制作小游戏(二十一)mp.weixin.qq.com 效果展示打地鼠小游戏https://www.zhihu.com/video/1200492442610450432 简介 ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
重磅：微信官方推出 Web 前端和小程序统一框架
大家好,我是你们的校长. 说实话,小程序真的是越来越火了.而市面上也有很多小程序的开发框架,尤其是针对 Vue 的,大家的想法很简单,就是想通过做 Web 的项目,能不能直接转换成小程序呢?这样,可以 ...
【180730】WinForm打地鼠小游戏源码
本源码是采用WinForm进行开发的一个并非简单的打地鼠小游戏,有动画效果哈!有打地鼠.计分.过关等功能. 菜单功能: 1.运行游戏后,输入玩家姓名,点击开始 2.用鼠标点击从洞中钻出的地鼠给予打击 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
Python 和 PyQt5 实现打地鼠小游戏
Python 和 PyQt5 实现打地鼠小游戏实现效果: 视频效果: https://live.csdn.net/v/264602https://live.csdn.net/v/264602 代码: ...

web前端打地鼠小游戏

web前端打地鼠小游戏相关推荐

最新文章

热门文章

web前端 打地鼠小游戏

web前端 打地鼠小游戏相关推荐

最新文章

热门文章

web前端打地鼠小游戏

web前端打地鼠小游戏相关推荐