HTML5 隨機彈跳的小球

2024-09-05 12:19:06

字體：大中小

來源：轉載

供稿：網友

HTML5 隨機彈跳的小球，使用了html5新功能：可以控制筆記本風扇。狂點addBall 是能聽到筆記本的風扇聲的。效果更你是Flash，挺有意思的。

<!doctype html><html lang="en"><head><title>HTML5學習第5天[亂撞的球]</title><style>body{	font-family: 微軟雅黑;	}body,h1{	margin:0;}canvas{	display:block;margin-left: auto;margin-right: auto;	border:1px solid #DDD;		background: -webkit-linear-gradient(top, #222,#111);}	</style></head><body>	<h1>HTML5第5天[亂撞的球]</h1><canvas id="canvas" >	</canvas><button id="stop">stop</button><button id="run">run</button><button id="addBall">addBall</button><script src="../js/jquery-1.10.1.min.js"></script><script>var nimo={aniamted:null,content:null,data:{	radiusRange:[5,20],	speedRange:[-5,5],	scrollHeight:null,	scrollWdith:null},balls:[],ele:{	canvas:null		},fn:{	creatRandom:function(startInt,endInt){//生產隨機數		var iResult;			iResult=startInt+(Math.floor(Math.random()*(endInt-startInt+1)));		return iResult	},		init:function(){			nimo.data.scrollWdith=document.body.scrollWidth;			nimo.data.scrollHeight=document.body.scrollHeight;			nimo.ele.canvas=document.getElementById('canvas');				nimo.content=nimo.ele.canvas.getContext('2d');						nimo.ele.canvas.width=nimo.data.scrollWdith-50;			nimo.ele.canvas.height=nimo.data.scrollHeight-100;		},		addBall:function(){			var aRandomColor=[];			aRandomColor.push(nimo.fn.creatRandom(0,255));			aRandomColor.push(nimo.fn.creatRandom(0,255));			aRandomColor.push(nimo.fn.creatRandom(0,255));				var iRandomRadius=nimo.fn.creatRandom(nimo.data.radiusRange[0],nimo.data.radiusRange[1]);			var oTempBall={				coordsX:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.width-iRandomRadius),				coordsY:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.height-iRandomRadius),				radius:iRandomRadius,								bgColor:'rgba('+aRandomColor[0]+','+aRandomColor[1]+','+aRandomColor[2]+',0.5)'							};				oTempBall.speedX=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]);			if(oTempBall.speedX===0){				oTempBall.speedX=1			}			if(oTempBall.speedY===0){				oTempBall.speedY=1			}			oTempBall.speedY=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]);			nimo.balls.push(oTempBall)		},		drawBall:function(bStatic){						var i,iSize;			nimo.content.clearRect(0,0,nimo.ele.canvas.width,nimo.ele.canvas.height)			for(var i=0,iSize=nimo.balls.length;i<iSize;i++){				var oTarger=nimo.balls[i];								nimo.content.beginPath();				nimo.content.arc(oTarger.coordsX,oTarger.coordsY,oTarger.radius,0,10);				nimo.content.fillStyle=oTarger.bgColor;								nimo.content.fill();				if(!bStatic){					if(oTarger.coordsX+oTarger.radius>=nimo.ele.canvas.width){						oTarger.speedX=-(Math.abs(oTarger.speedX))					}					if(oTarger.coordsX-oTarger.radius<=0){						oTarger.speedX=Math.abs(oTarger.speedX)					}					if(oTarger.coordsY-oTarger.radius<=0){						oTarger.speedY=Math.abs(oTarger.speedY)					}					if(oTarger.coordsY+oTarger.radius>=nimo.ele.canvas.height){						oTarger.speedY=-(Math.abs(oTarger.speedY))					}					oTarger.coordsX=oTarger.coordsX+oTarger.speedX;					oTarger.coordsY=oTarger.coordsY+oTarger.speedY;								}							}		},		run:function(){			nimo.fn.drawBall();			nimo.aniamted=setTimeout(function(){				nimo.fn.drawBall();				nimo.aniamted=setTimeout(arguments.callee,10)			},10)		},		stop:function(){			clearTimeout(nimo.aniamted)		}	}}window.onload=function(){	nimo.fn.init();	var i;	for(var i=0;i<10;i++){		nimo.fn.addBall();	}	nimo.fn.run();	document.getElementById('stop').onclick=function(){		nimo.fn.stop()	}	document.getElementById('run').onclick=function(){		nimo.fn.stop()		nimo.fn.run()	}	document.getElementById('addBall').onclick=function(){		var i;		for(var i=0;i<10;i++){			nimo.fn.addBall();				}		nimo.fn.drawBall(true);	}}</script></body></html>

上一篇：流行的標簽云JS+html代碼

下一篇：HTML5拾色器選取顏色方便