实例介绍
【实例简介】
html5打地鼠游戏源码
【实例截图】
【核心代码】
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.5,maximum-scale=2,user-scalable=yes"/>
<meta charset="UTF-8" />
<title>HTML5版打地鼠- 海角在眼前博客 -HTML5游戏</title>
<meta name="description" content="这是一个基于HTML5 Canvas和Audio开发的游戏" />
<meta name="keywords" content="HTML5,Canvas,HTML5游戏, HTML5版打地鼠" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="hitmouse">
<!-- 预备界面 -->
<div id="gameCover" class="block background">
<!-- 声音控制按钮 -->
<a href="javascript:void(0)" id="btnSound" class="icon"> </a>
<!-- 开始 -->
<a href="javascript:void(0)" id="btnPlay" class="icon"> </a>
<!-- 帮助 -->
<a href="javascript:void(0)" id="btnHelp" class="icon"> </a>
<!-- 关于我 -->
<a href="javascript:void(0)" id="btnAboutMe" class="icon"> </a>
<!-- 加载资源 -->
<span id="progressText"></span>
</div>
<!-- 帮助界面 -->
<div id="HelpDiv" >
<!-- 帮助图片 -->
<img src="images/help.png"/>
<a href="javascript:void(0)" id="btnBack" class="icon"> </a>
</div>
<!-- 游戏主体 -->
<div id="gameBody" class="block">
<div id="gameCanvas" class="block">
<!-- Main背景层 -->
<canvas width="750" height="550" id="maincanvas" ></canvas>
</div>
<!-- 分数及暂停按钮 -->
<div id="numberAndPause" class="block">
<!-- 分数 -->
<div id="numberBefore" class="icon"></div>
<div id="number" ></div>
<!-- 暂停 -->
<a href="javascript:void(0)" id="btnPause" class="icon"> </a>
</div>
<!-- 下一关提示 -->
<div id="nextLoding">
<!-- 分数 -->
<span id="currentScore"></span>
<spqn id="requireScore" ></span>
</div>
</div>
<!-- 游戏结束 -->
<div id="gameOver" class="block">
<!-- 得分 -->
<span id="score"></span>
<!-- 准备 -->
<a href="javascript:void(0)" id="btnRetry" class="icon"> </a>
<!-- 返回主菜单 -->
<a href="javascript:void(0)" id="btnBackToMenu" class="icon"> </a>
</div>
</div>
<!--我使用这个框架的代码并不多，主要是工具类使用-->
<script type="text/javascript" src="myEngine/core/my.js"></script>
<script type="text/javascript" src="myEngine/component/Component.js"></script>
<script type="text/javascript" src="myEngine/component/DisplayObject.js"></script>
<script type="text/javascript" src="myEngine/component/Bitmap.js"></script>
<script type="text/javascript" src="myEngine/utils/ImageManager.js"></script>
<script type="text/javascript" src="myEngine/utils/DOM.js"></script>
<script type="text/javascript" src="myEngine/utils/Math.js"></script>
<script type="text/javascript" src="myEngine/utils/buzz.js"></script>
<script type="text/javascript" src="js/resources/images.js"></script>
<script type="text/javascript" src="js/resources/audios.js"></script>
<script type="text/javascript" src="js/frames/mouse.js"></script>
<script type="text/javascript" src="js/frames/star.js"></script>
<script type="text/javascript" src="js/frames/score.js"></script>
<script type="text/javascript" src="js/classes/Audio.js"></script>
<script type="text/javascript" src="js/classes/Animation.js"></script>
<script type="text/javascript" src="js/classes/star.js"></script>
<script type="text/javascript" src="js/classes/score.js"></script>
<script type="text/javascript" src="js/classes/hammer.js"></script>
<script type="text/javascript" src="js/classes/mouse.js"></script>
<script type="text/javascript" src="js/classes/MouseHit.js"></script>
<script type="text/javascript" src="js/classes/UI.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论