“21天好习惯”第一期-6

二十一天——打卡第六天（跑酷小游戏）

今天把完善完的跑酷小游戏代码完整的发出来。

这个代码有点小bug（不知道为什么会偶尔卡死），实在不知道哪里有问题，也不知道怎么改。如果有哪个大佬知道还请和我分享分享。

HTML在昨天发的文章里。

CSS

.groundback {
	width: 100%;
	height: 70%;
	background-color: #CCCCCC;
}
.begin_game {
	padding-top: 10%;
	margin: auto;
	color: #000000;
	width: 20%;
	text-align: center;
	font-size: 30px;
	transition: 0.5s;
}
.begin_game:hover {
	cursor: pointer;
	color: red;
	font-size: 40px;
}
.over_game {
	padding-top: 10%;
	margin: auto;
	color: #000000;
	width: 20%;
	text-align: center;
	font-size: 30px;
	display: none;
}
.ground {
	position: absolute;
	left: 0;
	width:100%;
	height: 30%;
	background-color: bisque;
}
.role {
	position: absolute;
	top: 70%;
	left: 3%;
	width: 50px;
	height: 50px;
	transform: translateY(-100%);
	background-color: #0000FF;
	z-index: 9;
}
.xianjin {
	position: absolute;
	top: 70%;
	width: 10%;
	height: 30%;
	background-color: white;
}

JS

// 生成坑

	function getxianjin() {
		var xianjin = document.createElement("div");
		var box2 = document.querySelector(".box2");
		var xianjin_all = document.querySelectorAll('.xianjin');
		var num
		box2.appendChild(xianjin);
		xianjin.className = 'xianjin';
		if (xianjin_all.length > 0) {
			do {
				num = Math.random() + 0.1;
				if (num < 0.3) num += 0.3;
			} while (num * box2.offsetWidth - xianjin_all[xianjin_all.length - 1].offsetLeft < 2 * xianjin.offsetWidth);
		} else {
			num = Math.random() - 0.1;
			if (num < 0.3) num += 0.3;
		}
		xianjin.style.left = num * box2.offsetWidth + 'px';
	}
	var xianjin_count = 0;
	// 坑移动

	function xianjin_run() {
		var xianjin = document.querySelectorAll(".xianjin");
		var ground = document.querySelector(".ground");
		var i = 0;
		for (i; i < xianjin.length; i++) {
			xianjin[i].style.left = xianjin[i].offsetLeft - ground.offsetWidth * 0.004 + 'px';
		}
	}
	// 背景移动

	function ground_run() {
		var ground = document.querySelector('.ground');
		var ground_width = ground.offsetWidth;
		var time_ground = setInterval(function() {
			ground.style.width = ground.offsetWidth + ground_width * 0.001 + 'px';
			ground.style.left = ground.offsetLeft - ground_width * 0.001 + 'px';
		}, 10);
	}

	//ground_run();

	// 清除坑

	function clear_xianjin() {
		var xianjin = document.querySelectorAll(".xianjin");
		var box2 = document.querySelector(".box2");
		var role = document.querySelector('.role');
		var i = 0;
		for (i; i < xianjin.length; i++) {
			if (xianjin[i].offsetLeft < -xianjin[i].offsetWidth) {
				box2.removeChild(xianjin[i]);

			}

		}
	}
	// 角色跳跃

	function roleup_down() {
		var role = document.querySelector(".role");
		var box2 = document.querySelector(".box2");
		var rolehigh = role.offsetTop;
		var count = 0;
		var time1 = setInterval(function() {
			count += 1;
			rolehigh -= 5;
			role.style.top = rolehigh + 'px';
			if (count == 20) {
				count = 0;
				clearInterval(time1);
				time1 = null;
				var time2 = setInterval(function() {
					if (time1 != null) clearInterval(time2);
					count += 1;
					rolehigh += 5;
					role.style.top = rolehigh + 'px';
					if (count == 20) {
						count = 0;
						clearInterval(time2);
						time2 = null;

					}
				}, 20);
			}
		}, 20);
	}

	function is_on_ground() {
		var ground = document.querySelector('.ground');
		var role = document.querySelector('.role');
		if (role.offsetTop == ground.offsetTop) return 1;
		else return 0;
	}

	// 跳跃触发

	document.onkeydown = function(e) {
		if (e.keyCode == 32 && is_on_ground() == 1) {
			roleup_down();
		}
	}
	var box2 = document.querySelector(".box2");
	box2.onclick = function() {
		if (is_on_ground() == 1) roleup_down();
	}

	// 角色死亡

	function role_die() {
		var role = document.querySelector(".role");
		var ground = document.querySelector(".ground");
		var xianjinAll = document.querySelectorAll(".xianjin");
		if (xianjinAll.length > 0 && role.offsetTop == ground.offsetTop && role.offsetLeft + role.offsetWidth / 2 >
			xianjinAll[0].offsetLeft && role.offsetLeft + role.offsetWidth / 2 < xianjinAll[0].offsetLeft + xianjinAll[0]
			.offsetWidth - role.offsetWidth / 2) //||(role.offsetLeft+role.offsetWidth/2>xianjinAll[1].offsetLeft)
		{
			var role_down_time = setInterval(function() {
				var ground = document.querySelector(".ground");
				if (role.offsetTop > ground.offsetTop + ground.offsetWidth) {
					var over_game = document.querySelector('.over_game');
					var begin_game = document.querySelector('.begin_game');
					over_game.style.display = 'block';
					begin_game.style.display = 'block';
					clearInterval(role_down_time);
					role_die_time = null;
				}
				role.style.top = role.offsetTop + 5 + 'px';
			}, 20);

		}
	}
	
	// 清除计时器，结束游戏
	
	function over_time(a) {
		var role = document.querySelector(".role");
		var ground = document.querySelector(".ground");
		if (role.offsetTop > ground.offsetTop + ground.offsetWidth) {
			clearInterval(a);
			a = null;
		}
	}
	var begin_game = document.querySelector('.begin_game');
	begin_game.onclick = function(e) {
		e.stopPropagation();
		this.style.display = 'none';
		var role = document.querySelector('.role');
		var ground = document.querySelector('.ground');
		role.style.top = ground.offsetTop + 'px';

		var over_game = document.querySelector('.over_game');
		over_game.style.display = 'none';

		var xianjin = document.querySelectorAll('.xianjin');
		var box2 = document.querySelector(".box2");
		for (var i = 0; i < xianjin.length; i++) {
			box2.removeChild(xianjin[i]);
		}
		// 生成坑

		var getxianjin_time = setInterval(function() {
			getxianjin();
			over_time(getxianjin_time);
		}, 2000);

		// 坑移动

		var xianjin_run_time = setInterval(function() {
			xianjin_run();

			over_time(xianjin_run_time);
		}, 20);

		//清除坑

		var gametime = setInterval(function() {
			//xianjin_run();
			clear_xianjin();
			over_time(gametime);
		}, 1);

		//角色死亡

		var role_down_time = setInterval(function() {
			role_die();
		}, 1);

	}

再展示一下效果图吧