首页
其他
教主小球制作

教主小球制作

作者：田大才子2016-10-7 18:41分类：其他

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

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

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

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

以下为全部代码：

<!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();" onClick="SpeedChange();">
	<h1>田哥制作</h1>
	<div style="width:340px;margin:0 auto;">
		<canvas id="canvas" width="400px" height="300px">
			您的浏览器不支持html5标签，请更换浏览器。
		</canvas>
	</div>
	
	<script>
		
		//1.获得画布
		var ctx = document.getElementById('canvas').getContext('2d');
		
		//盒子坐标及其宽高
		var boxX = 20;
		var boxY = 30;
		var boxWidth = 350;
		var boxHeight = 250;
		
		//小球的半径
		var ballRad = 10;
			
		//小球的初始坐标
		var ballX = 50;
		var ballY = 60;
		
		//球心最大的X坐标
		var ballHeartMaxX = boxX+boxWidth-ballRad;
		//球心最小的X坐标
		var ballHeartMinX = boxX+ballRad;
		//球心最大的Y坐标
		var ballHeartMaxY = boxY+boxHeight-ballRad;
		//球心最小的Y坐标
		var ballHeartMinY = boxY+ballRad;
		
		//小球的水平位移和竖直位移
		var ballVx = 4;
		var ballVy = 8;
		
		//小球的图片
		var img  = new Image();
		img.src = "xq.png";
		
		//创建一个线性梯度
		var grad;
		
		//存储梯度的颜色值
		var color;
		
		//红黄绿青蓝紫数组
		var hue=[
			[255,0,0],[255,255,0],
			[0,255,0],[0,255,255],
			[0,0,255],[255,0,255]
		];
	   /*
		* 初始化
		*/
		function Init(){
			
			Touch();
			
			//梯度的获取
			grad = ctx.createLinearGradient(boxX,boxY,boxX+boxWidth,boxY+boxHeight);
			for(var i = 0; i< hue.length; i++){
				color = 'rgb(' + hue[i][0] + ',' + hue[i][1] + ',' + hue[i][2] + ')';
				grad.addColorStop(i/6,color);
			}
			ctx.fillStyle = grad;
			
			//小球开始移动
			Move();
			
			//每100毫秒，重新绘制一次
			setInterval(Move,100);	
		}
		
	   /*
		* 小球移动
		*/
		function Move(){
			
			//1.清除画布
			ctx.clearRect(boxX,boxY,boxWidth,boxHeight);
			
			//2.小球移动检测(实际上是重新计算了小球的坐标)
			MoveAndCheck();
			
			//3.绘制小球
			DrowBall();
			
			//4.绘制盒子
			DrowBoxBorder();
		}
		
	   /*
		* 绘制小球
		*/
		function DrowBall(){
			ctx.beginPath();
		  	ctx.arc(ballX,ballY,ballRad,0,360*Math.PI/180,false);
		  	ctx.closePath();
		  	ctx.fill();
		  	//ctx.drawImage(img,ballX-ballRad,ballY-ballRad,2*ballRad,2*ballRad);
		}
		
		/*
		* 绘制边框
		*/
		function DrowBoxBorder(){
		  	/*ctx.lineWidth = 5;
		  	ctx.beginPath();
		  	ctx.strokeRect(boxX,boxY,boxWidth,boxHeight);
		  	ctx.closePath();
		  	ctx.stroke();*/
		  	
		  	//左右上下四面墙的绘制
		  	ctx.fillRect(boxX-ballRad,boxY-ballRad,ballRad,boxHeight+ballRad*2);
		  	ctx.fillRect(boxX+boxWidth,boxY-ballRad,ballRad,boxHeight+ballRad);
		  	ctx.fillRect(boxX,boxY-ballRad,boxWidth,ballRad);
		  	ctx.fillRect(boxX,boxY+boxHeight,boxWidth+ballRad,ballRad);
		}
		
	   /*
		* 小球移动和检查是否到了边界
		*/
		function MoveAndCheck(){
		
			//1.计算小球下一次运动到的X和Y位置
			var nballX = ballX + ballVx;
			var nballY = ballY + ballVy;
			
			// 是否越界flag，默认为false:不越界 true:越界
			var flag = false;
			
			//2.1.如果下一次小球的X位置大于小球最大X位置，则
			//	1.小球的水平运动方向相反
			//  2.小球的X坐标变为小球最大X坐标
			//  3.越界flag设置为true
			if(nballX > ballHeartMaxX){
				ballVx = -ballVx;
				ballX = ballHeartMaxX;
				var flag = true;
			}
			
			//2.2.如果下一次小球的X位置小于小球最小X位置，则
			//	1.小球的水平运动方向相反
			//  2.小球的X坐标变为小球最小X坐标
			//  3.越界flag设置为true
			if(nballX < ballHeartMinX){
				ballVx = -ballVx;
				ballX = ballHeartMinX;
				var flag = true;
			}
			
			//2.3.如果下一次小球的Y位置小于小球最小Y位置，则
			//	1.小球的竖直运动方向相反
			//  2.小球的Y坐标变为小球最小Y坐标
			//  3.越界flag设置为true
			if(nballY < ballHeartMinY){
				ballVy = -ballVy;
				ballY = ballHeartMinY;
				var flag = true;
			}
			
			//2.4.如果下一次小球的Y位置大于小球最大Y位置，则
			//	1.小球的竖直运动方向相反
			//  2.小球的Y坐标变为小球最大Y坐标
			//  3.越界flag设置为true
			if(nballY > ballHeartMaxY){
				ballVy = -ballVy;
				ballY = ballHeartMaxY;
				var flag = true;
			}
			
			//3.越界flag没有越界的情况，则默认移动
			if(!flag){
				ballX += ballVx;
				ballY += ballVy;
			}
		}
		
		function Touch (){
		    document.addEventListener('touchstart',touch, false);
		    document.addEventListener('touchmove',touch, false);
		    document.addEventListener('touchend',touch, false);
		     
		    function touch (event){
		    	var startX,startY,endX,endY;
		        var event = event || window.event;
		        switch(event.type){
	            case "touchstart":
		            startX = event.touches[0].clientX;
		            startY = event.touches[0].clientY;
	                break;
	            case "touchend":
	                break;
	            case "touchmove":
					endX = event.touches[0].clientX;
		            endY = event.touches[0].clientY;
		            
		            if( Math.abs(endX - startX) >= Math.abs(endY - startY)){
		            	if(endX - startX > 0){
		            		if(ballVx < 16){
		            			ballVx *= 2;
		            		}
		            	}else{
			            	if(ballVx > 4){
			            		ballVy /= 2;
			            	}
		            	}
		            }else{
		            	if(endY - startY> 0){
		            		if(ballVy < 32){
		            			ballVy *= 2;
		            		}
		            	}else{
			            	if(ballVy > 8){
			            		ballVy /= 2;
			            	}
		            	}
		            }
                	break;
		        }
			}
		}
	</script>
	
</body>
</html>

Plugins by ewCEO.com

« 15：Activiti创建新模型 | 01.JavaScript创建命名空间 »

已有 0/5820 人参与

发表评论：

教主小球制作

已有 0/5820 人参与

搜索

日历

最新文章

热门文章

随机文章

教主小球制作

相关文章

已有 0/5820 人参与

搜索

日历

最新文章

热门文章

随机文章