首页
其他
教主弹弓游戏制作

教主弹弓游戏制作

作者：田大才子2016-10-2 12:15分类：其他

闲来无事，做的玩玩，需要的朋友直接拿走不送，嘿嘿~

本文所有文字解释都在代码中以注释的方式存在。

请复制代码到自己喜欢的文本编辑器中观看。

温馨提示如有转载或引用以上内容之必要，敬请将本文链接作为出处标注，谢谢合作！

以下为全部代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<meta http-equiv=Content-Type content="text/html;charset=gb2312">
	<title>教主弹弓</title>
</head>

<body onLoad="Init();">
	<h1>田哥制作！</h1>
	<div>拉弹簧尖试试看吧！</div>
	<div>小球停下后，还可以继续拉弹簧尖，小球会自动回到弹簧上面！</div>
	<div style="width:600px;height:400px;margin:0 auto;">
		<canvas id="canvas" width="600px" height="400px">
			您的浏览器不支持html5标签，请更换浏览器。
		</canvas>
	</div>

	<script>
			//画布的长宽，清除画布用
			var cWidth = 600;
			var cHeight = 400;
			
			//画布
			var ctx = document.getElementById('canvas').getContext('2d');
			
			//一个包含所有元素的数组
			var everything = [];
			
			//子弹的初始水平垂直位置
			var iBallX = 20;
			var iBallY = 260;
			
			//子弹的水平垂直速度
			var hSpeed = 20;
			var vSpeed = -10;
			
			//垂直位移的该变量
			var gravity = 2;
			
			//定时器变量
			var tid;
			
			//触摸小球flag
			var flag = 1;
			
		   /*
			* 初始化
			*/
			function Init(){
				//获取canvas标签，为其增加鼠标事件
				var canvas = document.getElementById('canvas');
				canvas.addEventListener('mousedown',findBall,false);
				canvas.addEventListener('mousemove',moveIt,false);
				canvas.addEventListener('mouseup',fire,false);
				
				drawAll();
			}

			function getPointOnCanvas(pageX, pageY) { 
				var bbox =canvas.getBoundingClientRect(); 
				return { x: pageX - bbox.left * (canvas.width / bbox.width), 
						 y: pageY - bbox.top * (canvas.height / bbox.height)}; 
			} 
						
		   /*
			* 是否触摸到弹弓检测
			*/
			function findBall(ev){
				if(flag == 1){
					//鼠标的位置
					var mx,my;
					
					var mouse = getPointOnCanvas(ev.pageX,ev.pageY);
					mx = mouse.x;
					my = mouse.y;
					
					if(mx >= sling.s4X - cBall.rad &&
					   mx <= sling.s4X + cBall.rad &&
					   my >= sling.s4Y - cBall.rad &&
					   my <= sling.s4Y + cBall.rad ){
					   	flag = 2;
					   	cBall.sX = sling.s4X;
						cBall.sY = sling.s4Y;
					   }
				   }
			}
			
			function moveIt(ev){
				
				if(flag == 2){
					var mx,my;
					
					var mouse = getPointOnCanvas(ev.pageX,ev.pageY);
					mx = mouse.x;
					my = mouse.y;
					
					cBall.sX = mx;
					cBall.sY = my;
					sling.s4X = mx;
					sling.s4Y = my;
					
					drawAll();
				}
			}
			
//#Region "小球类"
			
		   /*
			* 子弹的类
			*/
			function Ball(sX,sY,rad,styleString){
				this.sX = sX;					//球心X坐标
				this.sY= sY;					//球心Y坐标
				this.rad = rad; 				//球半径
				this.fillStyle = styleString;	//球样式
				
				//球移动的函数
				this.moveBall = function(dX,dY){
					this.sX += dX;
					this.sY += dY;
				}
				
				//球绘制的函数	
				this.draw = function(){
					ctx.fillStyle = this.fillStyle;
					ctx.arc(this.sX,this.sY,this.rad,0,360*Math.PI/180,false);
					ctx.fill();
				}
			}
//#End Region

//#Region "矩形类"
			
		   /*
			* 矩形的类
			*/
			function Rectangle(sX,sY,sWidth,sHeight,styleString){
				this.sX = sX;					//矩形X坐标
				this.sY = sY;					//矩形Y坐标
				this.sWidth = sWidth;			//矩形宽度
				this.sHeight = sHeight;			//矩形高度
				this.fillStyle = styleString;	//矩形样式
				
				//绘制矩形函数
				this.draw = function(){
					ctx.fillStyle = this.fillStyle;
					ctx.beginPath();	//非常重要的一句话，否则小球会出现重影
					ctx.fillRect(this.sX,this.sY,this.sWidth,this.sHeight);
				}
			}
//#End Region
			
//#Region "弹弓类"

		   /*
			* 弹弓的类
			*/
			function Sling(s1X,s1Y,s2X,s2Y,s3X,s3Y,s4X,s4Y,styleString){
				this.s1X = s1X;					//弹弓第一个点的X坐标
				this.s1Y = s1Y;					//弹弓第一个点的Y坐标
				this.s2X = s2X;					//弹弓第二个点的X坐标
				this.s2Y = s2Y;					//弹弓第二个点的Y坐标
				this.s3X = s3X;					//弹弓第三个点的X坐标
				this.s3Y = s3Y;					//弹弓第三个点的Y坐标
				this.s4X = s4X;					//弹弓第四个点的X坐标
				this.s4Y = s4Y;					//弹弓第四个点的Y坐标
				this.strokeStyle = styleString;	//弹弓的样式
				
				//绘制弹弓函数
				this.draw = function(){
					ctx.strokeStyle = this.strokeStyle;
					ctx.lineWidth = 4;
					ctx.beginPath();	//非常重要的一句话
					ctx.moveTo(this.s1X,this.s1Y);
					ctx.lineTo(this.s2X,this.s2Y);
					ctx.lineTo(this.s3X,this.s3Y);
					ctx.lineTo(this.s4X,this.s4Y);
					ctx.lineTo(this.s2X,this.s2Y);
					ctx.stroke();
				}
			}
			
//#End Region

			//目标
			var target = new Rectangle(300,200,80,100,"rgb(0,5,90)");
			
			//大地
			var ground = new Rectangle(0,300,600,30,"rgb(10,250,0)");
			
			//子弹
			var cBall = new Ball(iBallX,iBallY,10,"rgb(250,0,0)");
			
			//弹弓
			var sling = new Sling(60,300,60,220,60,250,iBallX,iBallY);
			
			everything.push(target);
			everything.push(ground);
			everything.push(cBall);
			everything.push(sling);
			
		   /*
			* 绘制所有事物
			*/
			function drawAll(){
				//清除画布
				ctx.clearRect(0,0,cWidth,cHeight);
				
				//循环绘制
				for(var i = 0;i < everything.length;i++){
					everything[i].draw();
				}
			}
			
		   /*
			* 开炮
			*/
			function fire(ev){
				if(flag == 2){
					
					var mx,my;
					
					var mouse = getPointOnCanvas(ev.pageX,ev.pageY);
					mx = mouse.x;
					my = mouse.y;
					
					flag = 3;
					drawAll();
					
					
					hSpeed = (60 - mx)/2;
					vSpeed = (235 - my)/2;
					
					tid = setInterval(change,100);	//开始定时
					return false;					//避免html刷新页面
				}
			}
			
		   /*
			* 小球的改变
			*/
			function change(){
				var dx = hSpeed;					 //水平速度
				var dy = (vSpeed * 2 + gravity)*0.5; //垂直的平均速度
				vSpeed = vSpeed + gravity;			 //受重力影响垂直速度改变
				cBall.moveBall(dx,dy);				 //重新计算小球的坐标圆心
				
				if(cBall.sX + cBall.rad >= target.sX && 
				   cBall.sX + cBall.rad <= target.sX + target.sWidth && 
				   cBall.sY + cBall.rad >= target.sY){
				   
				   if(cBall.sX - cBall.rad > target.sX && 
				      cBall.sX  + cBall.rad < target.sX + target.sWidth){
				   		cBall.sY = target.sY - cBall.rad/2;
				   }else{
				   		cBall.sX = target.sX - cBall.rad/2;
				   }
				   	
				   	clearInterval(tid);
				   	flag = 1;
				   }
				
				if(cBall.sY + cBall.rad >= ground.sY){
					cBall.sY = ground.sY - cBall.rad/2;
					clearInterval(tid);
					flag = 1;
				}
				
				drawAll();							 //绘制画面
			}
			
	</script>
	
</body>
</html>

Plugins by ewCEO.com

« 04：内置过滤器和自定义过滤器 | 03：module、controller、$scope和ng-model的结合使用 »

已有 4/5518 人参与

评论：

axydas 2022-09-18 02:21

超级文章 <a href="https://okna-pcv-plastikowe-pila-2022.premiumwroclaw.eu/">https://okna-pcv-plastikowe-pila-2022.premiumwroclaw.eu/</a>

ysovy 2022-09-18 01:35

最好的文章 <a href="https://okna-kielce-2022.premiumwroclaw.eu/">https://okna-kielce-2022.premiumwroclaw.eu/</a>

umajyqe 2022-09-13 20:38

酷的文章 <a href="https://aumentarela-massa-muscolare.eu/">aumentarela-massa-muscolare.eu aumento testosterone</a> 酷的文章

老二增大 2022-09-06 14:02

写得非常好的作品。 <a href="http://bigenlargement-top.cn/">http://bigenlargement-top.cn/</a> 陰莖增大丸

发表评论：

教主弹弓游戏制作

已有 4/5518 人参与

搜索

日历

最新文章

热门文章

随机文章

教主弹弓游戏制作

相关文章

已有 4/5518 人参与

搜索

日历

最新文章

热门文章

随机文章