【原創】使用JS封裝的一個小型遊戲引擎及原始碼分享
阿新 • • 發佈:2018-12-15
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Game 1.0</title> <!--引入需要的css檔案, 注意這裡的引入使用的是link方式來引入css檔案--> <link rel='stylesheet' type='text/css' href='css/Main.css'/> </head> <body> <!--canvas畫布--> <canvas id="gameCanvas" width="580" height="600"> Canvas not supported in your browser! </canvas> <!--canvas上方的懸浮div--> <div id="loadingToast"> <span id="gameTitle">Engine Development</span> <span id="loadingContents"> <p class="mainFunctions"> 主要功能: </p> <ul class="Contents"> <li>1.資源載入的畫面</li> <li>2.遊戲資源的管理</li> <li>3.聲音的播放</li> <li>4.具有視差動畫的滾動背景</li> <li>5.生命數量的顯示</li> <li>6.高分榜的維護</li> <li>7.按鍵的監聽與處理</li> <li>8.暫停功能與自動暫停機制實現</li> <li>9.遊戲結束的流程處理</li> </ul> </span> <span id="loadButtonSpan"> <button autofocus="true" id="loadButton">載入引擎...</button><br/> <span id="loadingMessage">Loading……</span> </span> <!--用於顯示進度條--> <div id="progressDiv"> </div> </div> <!--左上角計時器--> <div id="gameTimerDiv"> <span>000</span> </div> <!--右上角生命值--> <div id="leftLives"> <span id="lifeValue">生命值:100</span> </div> <!--中部的暫停--> <div id="pausedToast"> <span>暫停</span><br/> <span>點選此區域任意位置繼續</span> </div> <!--中下位置的點選按鈕--> <div id="loseLifePanel"> <button id="loseLifeButton" onmouseover="this.style.backgroundColor='#00aced'" onmouseleave="this.style.backgroundColor = ''">開殺 </button> </div> <!--遊戲結束及高分榜--> <div id="gameoverPan"> <div id="topPan"> <span id="scoreText">140</span> </div> <div id="middlePan"> <span>High Score!</span><br/> <span class="Name">What's your name?</span><br/> <input id='playerName' type='text' autofocus='true'><button id="addMyScoreButton">新增</button><button id="newGameButton">新遊戲</button> </div> <div id="downPan"> <span>Previous High Scores</span> <ul id="highScoreList"> </ul> </div> </div> <!--遊戲播放音樂需要使用的音訊檔案; preload 屬性規定是否在頁面載入後載入音訊。--> <audio id="pop" preload="auto"> <source src="sounds/pop.ogg" type="audio/ogg"> <source src="sounds/pop.mp3" type="audio/mp3"> </audio> <audio id="whoosh" preload="auto"> <source src="sounds/whoosh.ogg" type="audio/ogg"> <source src="sounds/whoosh.mp3" type="audio/mp3"> </audio> <!--引入需要的js檔案--> <script type="text/javascript" src="Engine/progressbar.js"></script> <script type="text/javascript" src="Engine/requestNextAnimationFrame.js"></script> <script type="text/javascript" src="Engine/GameEngine1.0.js"></script> <script type="text/javascript" src="js/Main.js"></script> </body> </html>