利用JS的Canves实现打砖块小游戏

转眼又期末了，朋友的作业就是用JS的canves实现打砖块小游戏，但是她作业蛮多的，有点忙不过来，所以就让我帮帮敲了这东西！！！

效果图：

做出来之后还被你找出了许多的BUG，惭愧啊！

画砖块：

	for(var i=0;i<10;i++)
	{
		for(var j=0;j<grade;j++)
		{
			if(brick[i][j]==1)
			{
				var brick_x=brick_margin+i*(brick_margin+brick_width);
				var brick_y=brick_margin+(j+1)*(brick_margin+brick_width);
				switch(j%3)
				{
					case 0:
						viwe.fillStyle="chocolate";
						viwe.fillRect(brick_x,brick_y,brick_width,brick_width);
						break;
					case 1:
						viwe.fillStyle="cornflowerblue";
						viwe.fillRect(brick_x,brick_y,brick_width,brick_width);
						break;
					case 2:
						viwe.fillStyle="darkorange";
						viwe.fillRect(brick_x,brick_y,brick_width,brick_width);
						break;
				}
			}
		}
	}

为了让砖块看起来不同，我们给每排砖不同的颜色！！！
这里主要用到了canves的画矩形的方法fillRect(x,y,width,height);
这里x和y是砖块的左上角的坐标，width和height是画的矩形的宽和高。

画挡板：

viwe.fillStyle="#FF8C00";
	viwe.fillRect(wood_x,height-brick_margin-brick_width/2,2*brick_width,brick_width/2);

挡板的画法和砖块的相同，就是它们的坐标不同罢了。

画球：

	viwe.fillStyle="chocolate";
	viwe.beginPath();
	viwe.arc(x,y,brick_margin,0,Math.PI*2,false);
	viwe.fill();
	viwe.closePath();

画圆形和画矩形差不多，它用的是arc（x,y,r,0,2PI,false）方法.
x和y是画的圆的圆心坐标，r是画的圆的半径，第四和第五个参数一般都填0和2PI，他们是圆开始画的角度和结束时的角度，左后一个参数是表示是否逆时针画，如果是就填true，否则填false。

碰撞检测：

for(var i=0;i<10;i++)
	{
		for(var j=0;j<grade;j++)
		{
			if(brick[i][j]==1)
			{
				var x1=i*(brick_margin+brick_width);
				var y1=(j+1)*(brick_margin+brick_width);
				var x2=(i+1)*(brick_width+brick_margin)+brick_margin;
				var y2=(j+2)*(brick_margin+brick_width)+brick_margin;
				//与砖块的四条边之一相碰
				if(ball_x>=x1+brick_margin&&ball_x<=x2-brick_margin&&ball_y>=y2-brick_margin&&ball_y<=y2)//与砖块底边相碰
				{
					brick[i][j]=0;
					sorce++;
					ball_vy=-ball_vy;
					continue;
				}
				if(ball_x<=x1+brick_margin&&ball_x>=x1&&ball_y<=y2-brick_margin&&ball_y>=y1+brick_margin)//与砖块的左边相碰
				{
					brick[i][j]=0;
					sorce++;
					ball_vx=-ball_vx;
					continue;
				}
				if(ball_x>=x1+brick_margin&&ball_x<=x2-brick_margin&&ball_y<=y1+brick_margin&&ball_y>=y1)//与砖块的上边相碰
				{
					brick[i][j]=0;
					sorce++;
					ball_vy=-ball_vy;
					continue;
				}
				if(ball_x>=x2-brick_margin&&ball_x<=x2&&ball_y<=y2-brick_margin&&ball_y>=y1+brick_margin)//与砖块的右边相碰
				{
					brick[i][j]=0;
					sorce++;
					ball_vx=-ball_vx;
					continue;
				}
				//与砖块的四个角的顶点相碰
				if(ball_x>=x1&&ball_x<=x1+brick_margin&&ball_y<=y2&&ball_y>=y2-brick_margin&&Math.sqrt(Math.pow(ball_x-(x1+brick_margin),2)+Math.pow(ball_y-(y2-brick_margin),2))<=brick_margin)//左下角
				{
					brick[i][j]=0;
					sorce++;
					ball_vx=-ball_vx;
					ball_vy=-ball_vy;
					continue;
				}
				if(ball_x>=x1&&ball_x<=x1+brick_margin&&ball_y>=y1&&ball_y<=y1+brick_margin&&Math.sqrt(Math.pow(ball_x-(x1+brick_margin),2)+Math.pow(ball_y-(y1+brick_margin),2))<=brick_margin)//左上角
				{
					brick[i][j]=0;
					sorce++;
					ball_vx=-ball_vx;
					ball_vy=-ball_vy;
					continue;
				}
				if(ball_x<=x2&&ball_x>=x2-brick_margin&&ball_y>=y1&&ball_y<=y1+brick_margin&&Math.sqrt(Math.pow(ball_x-(x2-brick_margin),2)+Math.pow(ball_y-(y1+brick_margin),2))<=brick_margin)//右上角
				{
					brick[i][j]=0;
					sorce++;
					ball_vx=-ball_vx;
					ball_vy=-ball_vy;
					continue;
				}
				if(ball_x<=x2&&ball_x>=x2-brick_margin&&ball_y<=y2&&ball_y>=y2-brick_margin&&Math.sqrt(Math.pow(ball_x-(x2-brick_margin),2)+Math.pow(ball_y-(y2-brick_margin),2))<=brick_margin)//右下角
				{
					brick[i][j]=0;
					sorce++;
					ball_vx=-ball_vx;
					ball_vy=-ball_vy;
					continue;
				}
			}
		}
	}

为了更加的模拟现实，我们让小球和边碰和与角碰出现不同的情况，与边碰的话，小球只改变一个方向的速度，但是如果和角碰的话，那么x方向和y方向的速度都会改变。

还有一些事件处理，所有的源代码都在这里：打砖块小游戏.zip