是的，為了豐富我們的游戲內容，是時候規劃一下我們的項目結構了。
SuperBall
├──index.html //游戲顯示畫面
├──js
├ ├─vlues.js //游戲使用數值，參數
├ ├─gameDb.js //游戲webSQL
├ ├─suport.js //輔助函數
├ ├─main.js //主邏輯函數
├ ├─renders.js //渲染函數
├ ├─checkHit.js //碰撞檢測函數
├ └─update.js //狀態更新函數
├──css
├──images //游戲圖片資源
└──sounds //游戲聲音資源
JavaScript文件順序
<head>
...
<title>SuperBall</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/values.js"></script>
<script src="js/gameDB.js"></script>
...
</head>
values.js文件要在第一個引用。
這里文件載入的順序之所以講究，原因在于我們的JavaScript代碼雖然在不同的文件中，但是瀏覽器確實順序解釋，所以當我們還沒有涉及到JavaScript的MVC設計理念時，我們的所有JavaScript代碼實際上是在一個命名空間的，所以必然要先定義變量或常量再使用。
values.js -- 全局變量，游戲參數
-
一些游戲常量，例如游戲方塊顏色數組
var BLOCK_COLORS = ["grey", "orange", "blue", "purple", "green"]; -
游戲配置參數，例如游戲畫面(canvas)的大小，小球的屬性
//canvas var CANVAS_HEIGHT = 500; var CANVAS_PADDING = 30; //ball var SUPER_BALL_R = 10; var BALL_X = CANVAS_HEIGHT/2; var BALL_Y = CANVAS_HEIGHT * 0.7; ... -
游戲運行時的狀態變量
-
UI變量
//game score board var gameBestTimeBoard; var gameBestHitNumBoard; ... -
游戲狀態變量
var nowGameTime = 0; var gameRuntimeInterval, ... -
小球變量
var ball = {x : BALL_X, y : BALL_Y, a : 2, vx : BALL_VX, vy : BALL_VY, color : colors[4], speed_up : false}; ...
-
mian.js -- JavaScript中控制入口
window.onload = function(){
initGameRes();
//select the develop mode
developMode(PLAY);
document.onkeydown = checkKeyDown;
gameRuntimeInterval = setInterval(
function(){
gameTime++;
},
10
);
gameBeginning();
}
function gameBeginning(){
...
}
function countDown(){
...
}
function gameStart(){
...
}
function gamePause(){
...
}
function gameWin(){
...
}
function gameOver(type, words){
...
}
function gameBug(){
...
}
function render(context){
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
renderBlocks(context);
renderBall(context);
...
}
function checkHit(){
checkGameState();
checkHitBorder();
...
}
function update(){
updateBlocks();
updateSuperBall();
...
}
function checkKeyDown(event){
switch (event.keyCode) {
case 37:
board.x -= 20;
break;
...
default:break;
}
}
從這個入口文件可以看出基本上控制整個游戲的游戲狀態
- 初始化UI組件
- 設置運行模式、調用鍵盤監聽
- 設置游戲運行時循環，游戲時間基準
- 進入游戲開場狀態
- 將
renders.js checkHit.js update.js中的各個函數整合進render() checkHit() update()三個函數中方便游戲循環調用
support.js -- 輔助函數
-
一些需要計算具體數值的函數
//get board.x function getBoardX(){ ... } //get board y function getBoardY(){ ... } ... -
設置屬性的函數
function setGameResultData(){ ... } function initGameAttr(){ ... } function initGameRes(){ ... } ... -
UI動態效果的函數
function showBossDialogSoon(left, words){ ... } function showGameResultBoard(){ ... } ...
gameDB -- 游戲比分存儲
superBallDB = openDatabase("super_ball_db", "1.0", "game_score_table", 1024 * 1024 * 5);
...
gameScoreFunction.game_score_functions = function(){}
...
