SuperBall开发总结(五)-优化项目结构

2014-09-06 本文已影响32人王谙然

是的，为了丰富我们的游戏内容，是时候规划一下我们的项目结构了。

    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(){}
    
    ...