演示网站 HTML5版驴子跳
编写代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="UTF-8" /> <title>HTML5版驴子跳</title> <meta name="description" content="这是一个基于HTML5 Canvas和Audio开发的游戏,提供源码下载和详细的注释" /> <meta name="keywords" content="Web前端, 前端开发, JavaScript, HTML, Canvas, Audio, HTML5画布, HTML5游戏, HTML5版驴子跳(Donkey Jump)" /> <link type="text/css" rel="stylesheet" href="css/main.css" /> </head> <body> <div id="donkeyJump"> <!-- 预备界面 --> <div id="gameCover" class="block background"> <!-- 声音控制按钮 --> <a href="javascript:void(0)" id="btnSound" class="icon"> </a> <!-- 成就 --> <a href="javascript:void(0)" id="btnCup" class="icon"> </a> <!-- 排行榜 --> <a href="javascript:void(0)" id="btnScore" class="icon"> </a> <!-- 开始 --> <a href="javascript:void(0)" id="btnPlay" class="icon"> </a> <!-- 更多 --> <a href="javascript:void(0)" id="btnMore" class="icon"> </a> <!-- 分享 --> <a href="javascript:void(0)" id="btnShare" class="icon"> </a> <!-- 加载资源 --> <span id="progressText"></span> </div> <!-- 游戏主体 --> <div id="gameBody" class="block"> <div id="gameCanvas" class="block"> <!-- 天空背景层 --> <canvas width="480" height="800" id="canvasSkyLayer"></canvas> <!-- 远景山丘背景层 --> <canvas width="480" height="800" id="canvasHillLayer"></canvas> <!-- 近景山丘背景层 --> <canvas width="480" height="800" id="canvasHillNearLayer"></canvas> <!-- 房子背景层 --> <canvas width="480" height="800" id="canvasFloorLayer"></canvas> <!-- 白云精灵层 --> <canvas width="480" height="800" id="canvasStairLayer"></canvas> <!-- 驴子精灵层 --> <canvas width="480" height="800" id="canvasDonkeyLayer"></canvas> <!-- 效果精灵层 --> <canvas width="480" height="800" id="canvasEffectLayer"></canvas> </div> <!-- 分数及暂停按钮 --> <div id="numberAndPause" class="block"> <!-- 分数 --> <div id="number" class="icon"></div> <!-- 暂停 --> <a href="javascript:void(0)" id="btnPause" class="icon"> </a> </div> <!-- 预备 --> <div id="beingReady" class="icon"> </div> <!-- 开始 --> <div id="beingGo" class="icon"> </div> <!-- 暂停面板 --> <div id="panelResume" class="icon"> <!-- 返回列表 --> <a href="javascript:void(0)" id="btnResumeExit"> </a> <!-- 继续游戏 --> <a href="javascript:void(0)" id="btnResume"> </a> </div> </div> <!-- 游戏结束 --> <div id="gameOver" class="block background"> <!-- 分享 --> <a href="javascript:void(0)" id="btnShare2" class="icon"> </a> <!-- 名字 --> <span id="name"></span> <!-- 得分 --> <span id="score"></span> <!-- 排行榜 --> <a href="javascript:void(0)" id="btnScore2" class="icon"> </a> <!-- 准备 --> <a href="javascript:void(0)" id="btnRetry" class="icon"> </a> <!-- 更多 --> <a href="javascript:void(0)" id="btnMore2" class="icon"> </a> <!-- 成就 --> <a href="javascript:void(0)" id="btnCup2" class="icon"> </a> </div> </div> <!-- engine --> <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/DisplayObjectContainer.js"></script> <script type="text/javascript" src="myEngine/component/Bitmap.js"></script> <script type="text/javascript" src="myEngine/component/Animation.js"></script> <script type="text/javascript" src="myEngine/component/Sprite.js"></script> <script type="text/javascript" src="myEngine/component/Viewport.js"></script> <script type="text/javascript" src="myEngine/component/Layer.js"></script> <script type="text/javascript" src="myEngine/component/Game.js"></script> <script type="text/javascript" src="myEngine/event/KeyEvent.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> <!-- donkey jump --> <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/prop.js"></script> <script type="text/javascript" src="js/frames/stair.js"></script> <script type="text/javascript" src="js/frames/donkey.js"></script> <script type="text/javascript" src="js/frames/effect.js"></script> <script type="text/javascript" src="js/classes/Prop.js"></script> <script type="text/javascript" src="js/classes/Stair.js"></script> <script type="text/javascript" src="js/classes/Cloud.js"></script> <script type="text/javascript" src="js/classes/Donkey.js"></script> <script type="text/javascript" src="js/classes/DonkeyJump.js"></script> <script type="text/javascript" src="js/classes/UI.js"></script> <script type="text/javascript" src="js/classes/Audio.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>
