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

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

效果图:

利用JS的Canves实现打砖块小游戏_第1张图片
做出来之后还被你找出了许多的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和2
PI,他们是圆开始画的角度和结束时的角度,左后一个参数是表示是否逆时针画,如果是就填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

你可能感兴趣的:(网页设计,javascript,html,jquery,css)