SuperBall开发总结(三)-加入木板后，似乎是有点游戏的样子了，现在，是时候让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表示方块之间的间隙。
还有一些辅助数据和函数
-
添加颜色数组
var COLORS = ["grey", "orange", "blue", "purple", "green"]; -
添加辅助函数
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]--;
}
}
}
看似有些复杂，其实很简单
- 遍历每个方块
- 判断小球撞击方块的那一边，上、下、左、右
- 若条件成立，改变方块属性，小球属性
添加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开发总结(五)-优化项目结构
