SuperBall开发总结(四)-BOSS出场

SuperBall开发总结(三)-加入木板后，似乎是有点游戏的样子了，现在，是时候让BOSS出场了。

完成效果

SuperBall_03-Add_BOSS

添加boss类和BOSS数组

Canvas可以绘制简单的图形，但是这不影响我们想法的表达。我们可以用一些正方形堆积成一个BOSS。

大概是这个样子

Boos.png

要实现这种绘制效果只需要两步

1.创建BOSS_SHAPE数组

    var BOSS_SHAPE =
            [
                [-1,-1,-2,-1,-1,-1,-1,-1,-2,-1,-1],
                [-1,-1,-2, 2, 1,-1, 1, 2,-2,-1,-1],
                [-1,-1,-2, 2, 1,-3, 1, 2,-2,-1,-1],
                [-1, 2, 1, 2,-2,-2,-2, 2, 1, 2,-1],
                [-1, 2, 1, 2,-1,-1,-1, 2, 1, 2,-1],
                [-1,-1,-2,-1,-1,-1,-1,-1,-2,-1,-1],
                [-1, 1, 3, 1,-1,-1,-1, 1, 3, 1,-1],
                [-1,-2,-1,-2,-1,-1,-1,-2,-1,-2,-1]

            ];

这个数组其实就是描述了一个 11 × 7 矩阵，而每个数字代表了一个方块，不同的数字表示不同的方块类型。 -1：此处为空，2. < -1 的为特殊方块，比如，打不烂的方块或者BOSS的小心脏等等。3. > -1 的为不同级别的方块。

2.新建boss

   var boss = {
                margin_left : 50, 
                margin_top : 10, 
                vx : 10, 
                vy : 5,  
                shape : BOSS_SHAPE};

margin_left margin_right用来表示BOSS相对于canvas左边和上边移量。

渲染BOSS

       //render boss
        for(var i = 0; i < boss.shape.length; i++)
            for(var j = 0; j < boss.shape[i].length; j++){

                if(boss.shape[i][j] != -1){
                    context.beginPath();
                    context.rect(boss.margin_left + (15 + 3) * j,
                            boss.margin_top + (15 + 3) * i,
                            15, 15)
                    context.lineWidth = 2;
                    context.strokeStyle = "grey";
                    context.fillStyle = getBlockColor(boss.shape[i][j]);
                    context.stroke();
                    context.fill();
                    context.closePath();
                }

            }

遍历BOSS_SHAPE的每个方块，根据每个方块的i j和boss的margin_left margin_right计算出当前绘制方块的具体位置，15是方块的宽度，而3表示方块之间的间隙。

还有一些辅助数据和函数

1. 添加颜色数组

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

2. 添加辅助函数getBlockColor()

    function getBlockColor(block_type){
        var color;
        switch(block_type){
            case -3:
                color = "red";
                break;
            case -2:
                color = "black";
                break;
            case -1:
                color = "white";
                break;
            default:
                color = COLORS[block_type];
                break;
        }
   
        return color;
    }
   

添加小球碰撞BOSS的检测

//check hit boss

        for(var i = 0; i < boss.shape.length; i++)
            for(var j = 0; j < boss.shape[i].length; j++)
                if(boss.shape[i][j] != -1 && boss.shape[i][j] != 0){
                    if(ball.x >= boss.margin_left + (15 + 3) * j &&
                            ball.x <= boss.margin_left + (15 + 3) * j + 15 ){

                        if(ball.y <= boss.margin_top + (15 + 3) * i + 15 + 10 &&
                                ball.y >= boss.margin_top + (15 + 3) * i + 15 + 10 - 15 &&
                                ball.vy < 0){

                            ball.y = boss.margin_top + (15 + 3) * i + 15 + 10;
                            ball.vy *= -1;
                            boss.shape[i][j]--;


                        }else if(ball.y >= boss.margin_top + (15 + 3) * i - 10 &&
                                ball.y <= boss.margin_top + (15 + 3) * i - 10 + 15&&
                                ball.vy > 0){

                            ball.y = boss.margin_top + (15 + 3) * i - 10;
                            ball.vy *= -1;
                            boss.shape[i][j]--;

                        }

                    }else if(ball.y >= boss.margin_top + (15 + 3) * i &&
                            ball.y <= boss.margin_top + (15 + 3) * i + 15){
                        if(ball.x >= boss.margin_left + (15 + 3) * j - 10 &&
                                ball.x <= boss.margin_left + (15 + 3) * j - 10 + 15 &&
                                ball.vx > 0){

                            ball.x = boss.margin_left + (15 + 3) * j - 10;
                            ball.vx *= -1;
                            boss.shape[i][j]--;

                        } else if(ball.x <= boss.margin_left + (15 + 3) * j + 15 + 10 &&
                                ball.x >= boss.margin_left + (15 + 3) * j + 10 &&
                                ball.vx < 0){

                            ball.x = boss.margin_left + (15 + 3) * j + 15 + 10;
                            ball.vx *= -1;
                            boss.shape[i][j]--;
                        }
                    }
                }

看似有些复杂，其实很简单

1. 遍历每个方块
2. 判断小球撞击方块的那一边，上、下、左、右
3. 若条件成立，改变方块属性，小球属性

添加BOSS移动代码

        //update boss
        boss.margin_left += boss.vx / frequency;

        //ensure the boss is in the canvas
        if(boss.margin_left <= 0){
            boss.margin_left = 0;
            boss.vx *= -1;
        }

        if(boss.margin_left >= 300 - boss.shape[0].length * (15 + 3)){
            boss.margin_left = 300 - boss.shape[0].length * (15 + 3);
            boss.vx *= -1;
        }

不要让小球跑出去啊:-).

总结

在这三的代码积累中，我们的代码质量并不是最优，但是对于现阶段来说，这不重要，因为我们要先将想法用可行的方法实现出来，然后再进行重构，优化。重要的是看到效果，而不是纸上谈兵。

当然对于学习一些新的东西这种方法最为有效，但是若是做一个大项目，前期的架构设计就非常重要了。

所以，下一节我们将讨论一下项目结构的一些问题。
SuperBall开发总结(五)-优化项目结构