文档介绍:使用canvas+js<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> </head> <body> <divid=""style="text-align:center;"> <canvasid=""width="480"height="320"></canvas> </div> <scripttype="text/javascript"> varcanvas=("canvas"); varpaint=("2d"); //画出游戏画布:黑色 ="black"; (0,0,,); /* *游戏中每个元素:1,小球、2,砖块、3,挡板; */ //小球:先画一个小球,让小球滚动起来; varball_x=40; varball_y=190; varball_r=10; varball_speed_x=5; varball_speed_y=5; //砖块:定义砖块类,创建砖块对象; functionBrick(x,y,width,height){ =x; =y; =width; =height; =true; } //创建砖块 varbrick_x=23; varbrick_y=20; varbrick_width=50; varbrick_height=10; varx_off=5; vary_off=5; //首先,创建一个砖块// varbrick=newBrick(brick_x,brick_y,brick_width,brick_height); //创建50个砖块 varbricks=newArray(); for(i=0;i<50;i++){ //focuson:注意if里面的条件 if(brick_x+brick_width>){ brick_x=23; brick_y+=brick_height+y_off; } //focuson:注意顺序,先创建一个砖块,然后再给x坐标++; varbrick=newBrick(brick_x,brick_y,brick_width,brick_height); brick_x+=brick_width+x_off; (brick); } //挡板:创建挡板 varbox_x=10; varbox_y=280; varbox_width=80; varbox_height=15; //定义方法,让挡板跟随鼠标移动 =function(e){ box_x=-+200; } //清除小球轨迹 functionclearcanvas(){ (); ="black"; (0,0,,); (); } setInterval(function(){ //清除小球移动痕迹 clearcanvas(); //绘制小球 ="aqua"; (ball_x,ball_y,ball_r,0,2*,false); (); //绘制一个砖块// ="aqua";// (,,,); //绘制50个砖块 ="aqua"; for(i=0;i<;i++){ //如果砖块是显示状态,才显示; if(bricks[i].isShow){ (bricks[i].x,bricks[i].y,bricks[i].width,bricks[i].height); } /* *判断并设置砖块的显示状态*1,判断if(&&球_x+球_r>&&球_x-球_r<+) 2,再判断if(球_y+球_r>&&球_y-球_r<+){ 球_速_y=-球_速_y; =false; } */ if(bricks[i].isShow&& ball_x+