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

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

    SuperBall
     ├──index.html     //游戏显示画面
     ├──js
     ├   ├─vlues.js    //游戏使用数值，参数
     ├   ├─gameDb.js   //游戏webSQL
     ├   ├─suport.js   //辅助函数
     ├   ├─main.js     //主逻辑函数
     ├   ├─renders.js  //渲染函数
     ├   ├─checkHit.js //碰撞检测函数
     ├   └─update.js   //状态更新函数           
     ├──css
     ├──images         //游戏图片资源
     └──sounds         //游戏声音资源

JavaScript文件顺序

    
        ...
        
        
        
        
        ...
    

values.js文件要在第一个引用。

这里文件载入的顺序之所以讲究，原因在于我们的JavaScript代码虽然在不同的文件中，但是浏览器确实顺序解释，所以当我们还没有涉及到JavaScript的MVC设计理念时，我们的所有JavaScript代码实际上是在一个命名空间的，所以必然要先定义变量或常量再使用。

values.js -- 全局变量，游戏参数

1. 一些游戏常量，例如游戏方块颜色数组

    var BLOCK_COLORS = ["grey", "orange", "blue", "purple", "green"];
   

2. 游戏配置参数，例如游戏画面(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;
    ...
   

3. 游戏运行时的状态变量

   1. UI变量

       //game score board
       var gameBestTimeBoard;
       var gameBestHitNumBoard;
       ... 
      

   2. 游戏状态变量

       var nowGameTime = 0;
       var gameRuntimeInterval,
       ...
      

   3. 小球变量

       var ball = {x : BALL_X, y : BALL_Y, a : 2, vx : BALL_VX, vy : BALL_VY, color : colors[4], speed_up : false};
      

   4. ...

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;
        }
    }

从这个入口文件可以看出基本上控制整个游戏的游戏状态

2. 初始化UI组件
3. 设置运行模式、调用键盘监听
4. 设置游戏运行时循环，游戏时间基准
5. 进入游戏开场状态
6. 将renders.js checkHit.js update.js中的各个函数整合进render() checkHit() update()三个函数中方便游戏循环调用

support.js -- 辅助函数

1. 一些需要计算具体数值的函数

    //get board.x
    function getBoardX(){
        ...
    }
   
    //get board y
    function getBoardY(){
        ...
    }
    
    ...
   

2. 设置属性的函数

    function setGameResultData(){
        ...
    }
    
    function initGameAttr(){
        ...
    }
    
    function initGameRes(){
        ...
    }
    
    ...
   

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