HTML5-CANVAS做的打砖块游戏。。。
最近在学习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 ></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.fill#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.fill| 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>
- 上一篇 »java打飞机游戏完整代码
- 下一篇 »HTML5 canvas开发详解,第2版