案例-多个小球碰撞

最新推荐文章于 2024-07-04 23:34:27 发布

kaiking_g

最新推荐文章于 2024-07-04 23:34:27 发布

阅读量3.2k

点赞数 1

分类专栏： javascript js-案例

本文链接：https://blog.csdn.net/u013299635/article/details/78513248

版权

javascript 同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

js-案例

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		div{
			position: absolute; top:10px;left:0;
			width:50px; height:50px; border-radius:50%; 
			background:-webkit-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
			background:linear-gradient(top, red, rgba(0, 0, 255, 0.5));
		}
	</style>
</head>
<body>
	<script>
		for(var i=1;i<=10;i++){
			// var num = (Math.random()*10+5).toFixed();
			// console.info('num',num);
			createBoll(i);
		}
		function createBoll(num){
			var obj = document.createElement('div');
			obj.style.width = num+20+'px';//设置不一样的大小
			obj.style.height = num+20+'px';//设置不一样的大小
			document.body.appendChild(obj);
			var initX = obj.offsetLeft;
			var initY = obj.offsetTop;
			var maxX = document.documentElement.clientWidth - obj.offsetWidth;
			var maxY = document.documentElement.clientHeight - obj.offsetHeight;
			// var num = 5;
			var speedX = num;
			var speedY = num;

			// console.log('initX',initX, ',clientWidth',document.documentElement.clientWidth,',offsetWidth:',obj.offsetWidth,',maxX:',maxX);
			// console.log('initY',initY, 'clientHeight',document.documentElement.clientHeight,',offsetHeight:',obj.offsetHeight,',maxY:',maxY);

			(function run(){
				initX +=speedX;
				initY +=speedY;
				// if(initX>maxX){
				// 	initX=maxX;
				// 	speedX=-speedX;//速度取反
				// }else if(initX<0){
				// 	initx=0;
				// 	speedX=-speedX;//速度取反
				// }

				// if(initY>maxY){
				// 	initY=maxY;
				// 	speedY=-speedY;//速度取反
				// }else if(initY<0){
				// 	initY=0;
				// 	speedY=-speedY;//速度取反
				// }
				
				// 上面判断代码优化
				if(initX>=maxX || initX<=0){
					initX = Math.min(initX,maxX);
					initX = Math.max(initX,0);
					speedX = -speedX;
					obj.style.background = 'linear-gradient(180deg, '+color()+', '+color()+')';//设置随机渐变色
				}

				if(initY>maxY || initY<=0){
					initY = Math.min(initY,maxY);
					initY = Math.max(initY,0);
					speedY = -speedY;
					obj.style.background = 'linear-gradient(180deg, '+color()+', '+color()+')';//设置随机渐变色
				}
				obj.style.left = initX+'px';
				obj.style.top = initY+'px';
				requestAnimationFrame(run);
			})();
		}

		// console.log(color());
		// 随机颜色
        function color(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var a = Math.random().toFixed(1);

            return 'rgba('+r+','+g+','+b+','+a+')';
        }
			
	</script>
</body>
</html>