《游戏学习》经典打地鼠html小游戏whack-a-mole代码详解

源码下载地址：https://download.csdn.net/download/weixin_40986713/18549340

下载解压后，文件如下

index.html页面源码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>打地鼠游戏</title>
<link href="css/body_text.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="script/js.js">
</script></head><body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"src="data:images/bgsound.MP3">
</audio>
<div id="mainBody"><table width="450" border="0" cellpadding="0" cellspacing="0" style="margin-top: 30px;"><tr><td height="25">--倒计时间:--</td><td><span id="timeOut">60</span>秒</td></tr><td height="50">--得分情况:--</td><td><span id="score">0</span>分</td></tr><tr></table><table width="300" height="300" border="1" cellpadding="0" cellspacing="5" bgcolor="#FFFFFF"><tr><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td></tr><tr><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td></tr><tr><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td></tr><tr><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td></tr><tr><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td><td><img src="data:images/00.jpg" width="64" height="64" onclick="mouse_hidden(this)" /></td></tr></table><form name="form1" id="form1"><table width="450" border="0" cellpadding="0" cellspacing="0" style="margin-top: 30px;"><tr><td align="center"><input name="btn_start" type="button" class="button_style" id="btn_start" onclick="startGame()" value="开始游戏" /></td><td align="center"><input name="btn_end" type="reset" class="button_style" id="btn_end" onclick="stopGame()" value="退出游戏" disabled="disabled"/></td></tr></table></form>
</div>
</body>
</html>

点击index.html文件用浏览器打开

dia

点击开始游戏，就可以畅快玩耍了

你也可以将代码上传到gitee仓库上，启用gitee pages服务，就可以在线玩耍了，若果觉得不错的就点击下载吧，如果你几分不够，又想有源码，可以关注我的微信号：vxhqqh，索取代码。

《游戏学习》经典打地鼠html小游戏whack-a-mole代码详解相关推荐

《游戏学习》| 3d网页小游戏 | 公路赛车源码
游戏介绍基于three.js实现的3d网页游戏,适配移动端和pc端网页,可以选择简单.普通.困难.地狱四个游戏难度等级,通过控制左右,超过其他车辆得分. 游戏截图游戏主页游戏界面结束界面项目 ...
Cocos 2d-X Lua 游戏添加苹果内购(二) OC和Lua交互代码详解
这是第二篇 Cocos 2d-X Lua 游戏添加苹果内购(一) 图文详解准备流程这是前面的第一篇,详细的说明了怎样添加内购项目以及填写银行信息提交以及沙盒测试员的添加使用以及需要我们注意的东西,结 ...
SLAM学习笔记（二十）LIO-SAM流程及代码详解（最全）
写在前面关于安装配置,博客LIO_SAM实测运行,论文学习及代码注释[附对应google driver数据] 我觉得已经写的比较完善了.但是我觉得在注释方面,这位博主写的还不够完善,因此在学习以后, ...
《游戏学习》| 射击类小游戏 html5 打野鸭子
整合游戏是由html.js. css等代码完成的,无后端数据保存功能. 项目目录 css 文件夹是游戏样式控制文件 js文件夹是游戏事件控制文件 sounds文件夹是游戏声音控制文件 sprites ...
深度学习经典网络（4）ResNet深度残差网络结构详解
0.引言 ResNet在2015年被提出,在ImageNet比赛classification任务上获得第一名,因为它"简单与实用"并存,之后很多方法都建立在ResNet50或者Re ...
微信小程序支付 Java后端代码详解
微信小程序发起支付 Java后台处理代码---- 直接上代码吧! 我把自己的业务逻辑代码删了,但是都有注释的莫慌! package com.mvc.controller;import java.io ...
微信小程序api，带代码详解
微信小程序内置api 1.界面 1.wx.showToast(Object object)显示消息提示框 wx.showToast({title: '你好',icon:"none" ...
【案例学习】使用ThreadLocal计算Java接口执行时间（代码详解）
[辰兮要努力]:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端.后台.数据 ...
用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

《游戏学习》经典打地鼠html小游戏whack-a-mole代码详解

《游戏学习》经典打地鼠html小游戏whack-a-mole代码详解相关推荐

最新文章

热门文章