HTML5-CANVAS做的打砖块游戏

最新推荐文章于 2024-05-23 17:47:41 发布

橘红色

最新推荐文章于 2024-05-23 17:47:41 发布

阅读量2k

点赞数

分类专栏：游戏源码游戏图片游戏模型文章标签：游戏素材游戏开发 html5游戏

游戏源码同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

游戏图片

2 篇文章 0 订阅

订阅专栏

游戏模型

2 篇文章 0 订阅

订阅专栏

                    最近在学习HTML5，做了一个打砖块游戏。。。。 
　　点我看效果哦
 
 <!DOCUTYPE HTML>  
 
 <html>  
 
 <head>  
 
 <title>  
 
 打砖块. by 一只柯楠  
 
 </title>  
 
 <style type= 
 "text/css" 
 > 
 
 #zn{  
 
 border: 10px red solid;  
 
 margin: 0 auto;  
 
 display: block;  
 
 }  
 
 </style>  
 
 </head>  
 
 <body>  
 
 <h1>打砖块</h1>  
 
 <hr />  
 
 空格键：暂停;<br />  
 
 方向左右键：控制接球板;<br />  
 
 <canvas id= 
 "zn" 
 width= 
 "480" 
 height= 
 "760" 
 ></canvas>  
 
 <script type= 
 "text/javascript" 
 >  
 
 var 
 Brick=  
 function 
 () {  
 
 var 
 requestAnim= window.requestAnimationFrame ||  
 
 window.webkitRequestAnimationFrame ||  
 
 window.mozRequestAnimationFrame ||  
 
 window.oRequestAnimationFrame ||  
 
 window.msRequestAnimationFrame ||  
 
 function 
 (callback) {  
 return 
 setTimeout(callback, 100/6); },  
 
 cancelAnim= window.cancelAnimationFrame ||  
 
 window.webkitCancelAnimationFrame ||  
 
 window.mozCancelAnimationFrame ||  
 
 window.oCancelAnimationFrame ||  
 
 window.msCancelAnimationFrame ||  
 
 function 
 (timeid) {  
 return 
 clearTimeout(timeid); },  
 
 col= 8, row= 8, BW, BH= 30, BS= 1, r= 18, random=  
 function 
 (n1, n2) {    
 return 
 Math.round(Math.random()*(n2- n1))+n1},  
 
 elWidth, elHeight, cycle= 200, N= 0, score= 0,   
 
 randColor=  
 function 
 (c1, c2){  
 return 
 'rgb(' 
 + random(c1 || 0, c2 || 255)+  
 ',' 
 + random(c1 || 0, c2 || 255)+  
 ',' 
 + random(c1 || 0, c2 || 255)+  
 ')' 
 } ,  
 
 init =  
 function 
 (id) {  
 
 var 
 el=  
 this 
 .el= document.querySelector(id);  
 
 elWidth= el.width, elHeight= el.height;  
 
 this 
 .c= el.getContext( 
 '2d' 
 );  
 
 BW= +(elWidth/col-BS).toFixed(2);  
 
 this 
 .RL= (elWidth- BW)/2;  
 
 this 
 .RT= elHeight- BH- BS;  
 
 this 
 .x=  
 this 
 .RL+ (BW/2);  
 
 this 
 .y= elHeight-r- BH- BS;  
 
 this 
 .xv= random(46, 90)* (Math.random()> .5 ? 2 : -2);  
 
 this 
 .yv= -4* 126;  
 
 this 
 .initBricks();  
 
 //暂停  
 
 this 
 .suspend=  
 true 
 ;    
 
 this 
 .listenerEvent();  
 
 }   
 
 init.prototype= {  
 
 start:  
 function 
 (timestamp) {  
 
 var 
 self=  
 this 
 , newTime= Date.now(), diffX, diffY, diffTime= newTime- (timestamp || newTime) , x, y;  
 
 if 
 (++N=== cycle){  
 
 N= 0;  
 
 var 
 ary= [];  
 
 this 
 .tables.unshift(ary);   
 
 for 
 ( 
 var 
 i =0 ; i< col; i++){  
 
 ary.push(1);  
 
 }  
 
 }  
 
 diffX=  
 this 
 .xv* diffTime/1000;  
 
 diffY=  
 this 
 .yv* diffTime/1000;  
 
 this 
 .clearView();  
 
 //绘制砖块  
 
 this 
 .drawBricks();  
 
 //绘制小球  
 
 this 
 .drawBall(0, 0);  
 
 //绘制接球板  
 
 this 
 .drawRacket();  
 
 //绘制得分  
 
 this 
 .showText(score);  
 
 if 
 ( 
 this 
 .downKeyLeft)  
 
 this 
 .RL= Math.max( 
 this 
 .RL- BW/5, 0);  
 
 else 
 if 
 ( 
 this 
 .downKeyRight)  
 
 this 
 .RL= Math.min( 
 this 
 .RL+ BW/5, elWidth- 2*BW);  
 
 x=  
 this 
 .x+ diffX;  
 
 y=  
 this 
 .y+ diffY;  
 
 if 
 (x- r <0 || x+ r > elWidth)  
 
 this 
 .xv *= -1;  
 
 if 
 (y- r< 0)  
 
 this 
 .yv *= -1;  
 
 else 
 if 
 (y+ r>  
 this 
 .RT){  
 
 if 
 (x+ r>  
 this 
 .RL && x-r<  
 this 
 .RL+ 2*BW)  
 
 this 
 .yv *= -1;  
 
 else 
 {  
 
 this 
 .suspend=  
 true 
 ;  
 
 this 
 .clearView();  
 
 this 
 .showText( 
 'GAME OVER' 
 );  
 
 }  
 
 }  
 
 var 
 i= Math.floor(x/(BW +BS)), j= Math.floor(y/(BH +BS));  
 
 if 
 ( 
 this 
 .tables[j] &&  
 this 
 .tables[j][i]===1){  
 
 this 
 .tables[j][i]= 0;  
 
 score+= 100;  
 
 this 
 .yv*=-1;  
 
 }  
 
 if 
 (! 
 this 
 .suspend){  
 
 this 
 .x= x;  
 
 this 
 .y= y;  
 
 this 
 .animID= requestAnim( 
 function 
 () {  
 
 self.start(newTime);  
 
 })  
 
 }  
 
 return 
 this 
 ;  
 
 },  
 
 clearView:  
 function 
 () {  
 
 var 
 c=  
 this 
 .c;  
 
 c.clearRect(0, 0, elWidth, elHeight);  
 
 },  
 
 initBricks:  
 function 
 (){  
 
 this 
 .tables= [];  
 
 for 
 ( 
 var 
 i=0; i< col; i++){  
 
 this 
 .tables.push([]);  
 
 for 
 ( 
 var 
 j=0; j< row; j++){  
 
 this 
 .tables[i][j]= 1;  
 
 }  
 
 }  
 
 },  
 
 drawRacket:  
 function 
 () {  
 
 this 
 .drawRect( 
 this 
 .RL,  
 this 
 .RT, 2*BW, BH, 1, 1);  
 
 },  
 
 drawBall:  
 function 
 (c1, c2){  
 
 var 
 c=  
 this 
 .c;    
 
 c.beginPath();  
 
 c.arc( 
 this 
 .x,  
 this 
 .y, r, 0, 2*Math.PI);  
 
 c.fillStyle=  
 '#000' 
 //randColor(c1 || 150, c2 || 255);  
 
 c.closePath();  
 
 c.fill();  
 
 },  
 
 drawRect:  
 function 
 (x, y, w, h, c1, c2){  
 
 var 
 c=  
 this 
 .c;  
 
 c.beginPath();  
 
 c.fillStyle= randColor(c1 || 0, c2 || 255);  
 
 c.closePath();  
 
 c.fillRect(x, y, w, h);  
 
 },  
 
 drawBricks:  
 function 
 (){  
 
 var 
 i= 0,len=  
 this 
 .tables.length, cur, tables=  
 this 
 .tables;  
 
 for 
 (; i< len; i++){  
 
 cur= tables[i];  
 
 for 
 ( 
 var 
 j= 0; j< cur.length; j++){  
 
 cur[j]===1 &&  
 this 
 .drawRect(j*(BW+ BS), i*(BH+ BS), BW, BH);  
 
 }  
 
 }  
 
 },  
 
 listenerEvent:  
 function 
 (e){  
 
 document.addEventListener( 
 'keydown' 
 ,  
 this 
 ,  
 false 
 );  
 
 document.addEventListener( 
 'keyup' 
 ,  
 this 
 ,  
 false 
 );  
 
 },  
 
 handleEvent:  
 function 
 (e){  
 
 var 
 type= e.type, keycode= e.keyCode;  
 
 if 
 (keycode===37 || keycode=== 39 || keycode=== 32){  
 
 switch 
 (type){  
 
 case 
 'keydown' 
 :  
 
 if 
 (keycode === 37)  
 this 
 .downKeyLeft=  
 true 
 ;  
 
 else 
 if 
 (keycode===39)   
 this 
 .downKeyRight =  
 true 
 ;  
 
 break 
 ;  
 
 case 
 'keyup' 
 :  
 
 if 
 (keycode === 37)   
 
 this 
 .downKeyLeft=  
 false 
 ;  
 
 else 
 if 
  (keycode===39)  
 
 this 
 .downKeyRight =  
 false 
 
 else 
 {  
 
 this 
 .suspend= ! 
 this 
 .suspend;  
 
 ! 
 this 
 .suspend &&  
 this 
 .start();  
 
 }  
 
 }  
 
 }  
 
 },  
 
 showText:  
 function 
 (txt, left, top, size){  
 
 var 
 c=  
 this 
 .c, tw;  
 
 size = size || 60;  
 
 c.beginPath();  
 
 c.font= size+  
 'pt Calibri' 
 ;  
 
 tw= c.measureText(txt).width;   
 
 left= left=== undefined ? (elWidth- tw)/2 : left;   
 
 top= top=== undefined ? (elHeight- size)/2 : top;   
 
 c.fillText(txt, left, top);  
 
 c.closePath();  
 
 },  
 
 }  
 
 return 
 init;  
 
 }();  
 
 b=  
 new 
 Brick( 
 '#zn' 
 );  
 
 b.start();  
 
 </script>  
 
 </body>  
</html>  
转自：www.6m5m.com
6m5m是中国最好的、最安全的游戏素材资源共享与交易网站，提供各种游戏素材下载，游戏素材交易，游戏源码下载，3d游戏模型，2d游戏图片，游戏音效，原创游戏作品等最新的游戏开发资源。