基于canvas 十滴水小游戏改造--彩色豆豆

最近在写一个canvas小游戏，十滴水游戏的改造版本，一样是点击球会变大，变到最大之后会爆开变成四个小球，我写成了彩色豆豆的样式，下面就把我的思路大概讲一下。

游戏规则：
每关的难度随机，每关减少两个球，为0是则game over

一.首先是页面的布局，在顶部是关卡数和剩余球数，中间是核心的canvas画布，底部是重新开始游戏的按钮。
二.canvas画布上逻辑的实现
1）首先个人觉得不要一下在就想着把所有球的排布一下子做好，第一步要先绘制出一个球，在这个球的基础上可以点击变大最后变成四个小球，并且四个小球可以上下左右匀速移动；

2）当一个球的动作都写好之后，需要考虑进行封装对象，由于在球碰撞之后需要有新的样式，所以后续有碰撞检测，需要知道每个球的坐标，并且小球是移动的，所以我建立了两个对象，一个存放大球 Drop，一个存放小球SmallDrop，具体球的方法上代码：

function Drop(x,y){this.x = x;this.y = y;this.style = 1;//通过style判断什么形状的大水滴this.color = getRandomColor();//水滴随机色this.r1 = null;//横轴半径this.r2 = null;//纵轴半径
}Drop.prototype = {draw:function(){switch(this.style){case 1:this.draw1();break;case 2:this.draw2();break;case 3:this.draw3();break;case 4:this.draw4();break;default:break;}},//绘制不同球的函数draw1:function(){this.style = 1;ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x,this.y,this.r1,this.r2,0,0,2 * Math.PI,true);ctx.fill();this.r1 = 15;this.r2 = 20;},draw2:function(){this.style = 2;ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x,this.y,this.r1,this.r2,0,0,2 * Math.PI,true);ctx.fill();this.r1 = 20;this.r2 = 20;},draw3:function(){this.style = 3;ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x,this.y,this.r1,this.r2,0,0,2 * Math.PI,true);ctx.fill();this.r1 = 40;this.r2 = 35;},draw4:function(){this.style = 4;ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x,this.y,this.r1,this.r2,0,0,2 * Math.PI);ctx.fill();this.r1 = 50;this.r2 = 50;}
};//小球
function smallDrop(x,y,dir){this.x = x;this.y = y;this.color = getRandomColor();this.dir = dir;//小球的方向
}
smallDrop.prototype = {draw:function(){//通过小球的dir绘制小球的移动switch (this.dir){case 'left':ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x-=4,this.y,10,10,0,0,2 * Math.PI,true);ctx.fill();break;case 'right':ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x+=4,this.y,10,10,0,0,2 * Math.PI,true);ctx.fill();break;case 'up':ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x,this.y-=4,10,10,0,0,2 * Math.PI,true);ctx.fill();break;case 'down':ctx.beginPath();ctx.fillStyle = this.color;ctx.ellipse(this.x,this.y+=4,10,10,0,0,2 * Math.PI,true);ctx.fill();break;default:break;}}
};

3）本游戏的核心：

（1）this.style进行球的变化，点击球球的样式会根据style来变化
（2）this.dir进行小球的变化，小球会根据dir来决定运动方向

（3）碰撞检测
（4）本地存储

源代码在github上传，欢迎大家参阅，https://github.com/chancejl/colorful-beans.git

有很多不足，有问题请随时指点，我们一块学习。