使用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,,);
HTML5打砖块游戏canvas 来自淘豆网m.daumloan.com转载请标明出处.
