JS打地鼠游戏 - 素材火

一款JS打地鼠游戏，鼠标移动锤子，敲击从地洞里钻出来的地鼠，敲中得分并满足一定条件后过关。

分类：游戏 > 益智难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/main.css" />

页面的body部分，需设置好游戏的各类div容器，代码如下：

<div id="hitmouse">
	<!-- 预备界面 -->
	<div id="gameCover" class="block background">
		<!-- 声音控制按钮 -->
		<a href="javascript:void(0)" id="btnSound" class="icon">&nbsp;</a>
		<!-- 开始 -->
		<a href="javascript:void(0)" id="btnPlay" class="icon">&nbsp;</a>
		<!-- 帮助 -->
		<a href="javascript:void(0)" id="btnHelp" class="icon">&nbsp;</a>
		<!-- 加载资源 -->
		<span id="progressText"></span>		
	</div>	
	<!-- 帮助界面 -->
	<div id="HelpDiv" >
	  <!-- 帮助图片 -->
	  <img src="images/help.png"/>
	  <a href="javascript:void(0)" id="btnBack" class="icon">&nbsp;</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">&nbsp;</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">&nbsp;</a>
		<!-- 返回主菜单 -->
		<a href="javascript:void(0)" id="btnBackToMenu" class="icon">&nbsp;</a>			
	</div>
</div>

页面的底部，需要引入多个JS文件，代码如下：

<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>