H5练手小游戏

最新推荐文章于 2024-08-29 21:44:06 发布

Static_Xiao

最新推荐文章于 2024-08-29 21:44:06 发布

阅读量94

点赞数 1

分类专栏：技术分享文章标签： css css3 html

本文链接：https://blog.csdn.net/XD_356A/article/details/140578592

版权

技术分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Game</title>
	<style>
		body, html {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: skyblue; /* 添加背景颜色 */
		}

		#counter {
			position: absolute;
			top: 15px;
			left: 10px;
			font-size: 2em;
		}
		.yellowDiv {
			position: absolute;
			display: flex; /* 添加flex布局 */
			justify-content: center; /* 水平居中 */
			align-items: center; /* 垂直居中 */
			background-color: yellow;
			width: 50px;
			height: 50px;
			transition: all 0.5s ease;
		}
		.orangeDiv {
			background-color: orange;
			width: 25px; /* 调整尺寸以适应 */
			height: 25px; /* 调整尺寸以适应 */
		}
		.disappearing {
			top: 10px !important;
			left: 10px !important;
			transition: all 0.5s ease;
		}
	</style>
</head>
<body>
	<div id="head">请为24届大一新生收集阳光</div>
	<div id="counter">0</div>

	<script>
		document.addEventListener('DOMContentLoaded', function() {
			const counter = document.getElementById('counter');
			let count = 0;

			function createYellowDiv() {
				const div = document.createElement('div');
				div.className = 'yellowDiv';
				const boundary = window.innerWidth * 0.1;		//控制范围
				div.style.left = Math.floor(Math.random() * (window.innerWidth - boundary * 2)) + boundary + 'px';

				// 创建橙色div
				const orangeDiv = document.createElement('div');
				orangeDiv.className = 'orangeDiv';
				div.appendChild(orangeDiv);

				div.addEventListener('click', () => {
					div.classList.add('disappearing');
					setTimeout(() => {
						div.remove();
						count++;
						counter.textContent = count;
					}, 500);
				});

				document.body.appendChild(div);
				animateFall(div);
			}

			function animateFall(div) {
				let currentTop = 0;
				const intervalId = setInterval(() => {
					currentTop += 10;
					div.style.top = currentTop + 'px';
					if (currentTop > window.innerHeight) {
						clearInterval(intervalId);
						div.remove();
					}
				}, 100);
			}

			setInterval(createYellowDiv, 1000);
		});
	</script>
</body>
</html>