【原創】使用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>