原生javascript制作盖房子小游戏

最新推荐文章于 2022-05-01 22:42:35 发布

shuffle_boy

最新推荐文章于 2022-05-01 22:42:35 发布

阅读量503

点赞数

分类专栏： javascript css3 文章标签： css3 javascript html5

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.csdn.net/shuffle_boy/article/details/105390632

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盖房子</title>
		<style>
			@keyframes diaoluo {
				from {
					opacity: 1;
					margin-top: 0;
					transform: rotate(0);
				}
				to {
					opacity: 0;
					margin-top: 100px;
					transform: rotate(720deg);
				}
			}
			
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.wrap {
				width: 800px;
				height: 500px;
				border: 1px solid red;
				margin: 0 auto;
				position: relative;
			}
			
			ul {
				width: 400px;
				height: 20px;
				position: absolute;
			}
			
			li {
				width: 20px;
				height: 20px;
				box-sizing: border-box;
				background-color: cyan;
				border: 1px solid darkcyan;
				float: left;
			}
			
			.remove {
				animation: diaoluo 2s linear infinite;
			}
		</style>
	</head>

	<body>
		<div class="wrap"></div>
	</body>
	<script>
		var wrap = document.querySelector(".wrap");
		var timer = null;
		var gap = 500; //间隔时间
		var speed = 20;
		var row = 0; //行数 
		var lisNum = 20;

		//创建ul
		function createUl() {
			var ul = document.createElement("ul");
			ul.style.bottom = 20 * row + 'px';
			ul.style.width = 20 * lisNum + 'px';
			for(var i = 0; i < lisNum; i++) {
				ul.innerHTML += "<li>" + (i + 1) + "</li>";
			}
			wrap.appendChild(ul);
		}
		createUl();

		function begin() {
			clearInterval(timer);
			timer = setInterval(function() {
				//获取wrap中最后一个ul
				var ul = wrap.lastElementChild || wrap.lastChild;
				ul.style.left = ul.offsetLeft + speed + 'px';
				if(ul.offsetLeft + ul.offsetWidth >= wrap.offsetWidth - 2 || ul.offsetLeft <= 1) {
					speed *= -1;
				}
			}, gap);
		}
		begin();

		//		给wrap添加点击事件
		wrap.onclick = function() {
			speed = Math.abs(speed);
			if(wrap.children.length > 1) {
				jstj()
			}
			row++;
			createUl();
			gap -= 50;
			begin();
		}

		//计算是否向下掉落多余的li
		function jstj() {
			//			当前运动的ul
			var ul1 = wrap.lastElementChild || wrap.lastChild;
			//			获取上一个ul
			var ul2 = ul1.previousElementSibling || ul1.previousSibling;

			var cha = ul1.offsetLeft - ul2.offsetLeft;
			var n = Math.abs(cha / 20);
			console.log(n);
			lisNum -= n;
			if(lisNum <= 0) {
				clearInterval(timer);
				alert("gameOver");
			} else if(cha > 0) {
				// 右边多出
				var lis = ul1.children;
				for(var i = lis.length - n; i < lis.length; i++) {
					var li = lis[i];
					li.className = "remove";
				}
				//2秒后执行删除操作
				setTimeout(function(){
					for (var i=0; i<n; i++) {
						var li = ul1.lastElementChild || ul1.lastChild;
						ul1.removeChild(li);
					}
				},2000)
			} else if(cha < 0) { // 左边多出
				var lis = ul1.children;
				for (var i=0; i<n; i++) {
					var li = lis[i];
					li.className = "remove";
				}
				setTimeout(function(){
					for(var i = 0; i < n; i++) {
						var li = ul1.firstElementChild || ul1.firstChild
						ul1.removeChild(li);
						//修改ul1的位置
						ul1.style.left = ul2.offsetLeft + 'px';
					}
				},2000)
			}
		}
	</script>

</html>

shuffle_boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生javascript制作盖房子小游戏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盖房子</title> <style> @keyframes diaoluo { from { opacity: 1; margin-top: 0;...
复制链接

扫一扫