是的，为了丰富我们的游戏内容，是时候规划一下我们的项目结构了。
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(){}
...
