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

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

    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 -- 全局变量,游戏参数

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

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

  1. 初始化UI组件
  2. 设置运行模式、调用键盘监听
  3. 设置游戏运行时循环,游戏时间基准
  4. 进入游戏开场状态
  5. 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(){}
    
    ...
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 223,126评论 6 520
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,421评论 3 400
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 169,941评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,294评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,295评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,874评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,285评论 3 424
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,249评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,760评论 1 321
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,840评论 3 343
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,973评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,631评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,315评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,797评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,926评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,431评论 3 379
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,982评论 2 361

推荐阅读更多精彩内容