HTML5-CANVAS做的打砖块游戏。。。

最新推荐文章于 2024-04-20 11:50:28 发布

R芮R

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量307

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webzhangnan/archive/2013/02/27/2935534.html

版权

最近在学习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>

转载于:https://www.cnblogs.com/webzhangnan/archive/2013/02/27/2935534.html

R芮R

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5-CANVAS做的打砖块游戏。。。

最近在学习HTML5，做了一个打砖块游戏。。。。点我看效果哦<!DOCUTYPE HTML><html> <head> <title> 打砖块. by 一只柯楠 </title> <style type="text/css"> #zn{ border: ...
复制链接

扫一扫