当前位置:首页 » 《休闲阅读》 » 正文

JS实现锅打灰太狼小游戏,点击动画以及加分减分_Aurora_sm的博客

11 人参与  2022年01月02日 09:10  分类 : 《休闲阅读》  评论

点击全文阅读


<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Document</title>
	<head>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: "宋体";
			}

			#outer {
				background: url(img/game_bg.jpg) 0 0 no-repeat;
				height: 480px;
				width: 320px;
				position: relative;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
			}

			#scoring {
				position: absolute;
				font-weight: bold;
				font-size: 16px;
				color: white;
				left: 65px;
				top: 13px;
			}

			#countDown {
				position: absolute;
				background: url(img/progress.png) 0 0 no-repeat;
				width: 180px;
				height: 16px;
				left: 63px;
				top: 66px;
			}

			#wolfs img {
				position: absolute;
			}

			#menu {
				position: absolute;
				width: 320px;
				text-align: center;
				left: 0;
				top: 200px;
			}
			#start,
			#handle,
			#gameOver,
			#Rgame {
				line-height: 50px;
				font-size: 30px;
				font-weight: bold;
				color: #ff5500;
				display: block;
				text-shadow: 0 0 5px #ffaa00;
				text-decoration: none;
			}
			#gameOver {
				position: absolute;
				width: 320px;
				text-align: center;
				top: 200px;
				left: 0;
				display: none;
			}
			#Rgame {
				position: absolute;
				width: 320px;
				text-align: center;
				top: 250px;
				left: 0;
				display: none;
			}
		</style>

	</head>
	<body>
		<div id="outer">
			<!--这是分数-->
			<div id="scoring">0</div>
			<!--倒计时-->
			<div id="countDown"></div>
			<!--灰太狼们-->
			<div id="wolfs">
				<!-- <img src="img/h5.png"/>  -->
			</div>
			<div id="menu">
				<a href="javascript:void(0)" id="start">开始</a>
				<a href="javascript:void(0)" id="handle">游戏规则</a>
			</div>
			<div id="gameOver">游戏结束!</div>
			<div id="Rgame">返回</div>
		</div>

		<script type="text/javascript">
			// 获取按钮
			var startBtn = document.querySelector("#start");

			// 菜单
			var menu = document.querySelector("#menu");

			//倒计时
			var countDownDiv = document.querySelector("#countDown");

			// 存放狼的div
			var wolfsDiv = document.querySelector("#wolfs");

			// 游戏结束弹框gameOver
			var gameOverDiv = document.querySelector("#gameOver");
			var RgameDiv = document.querySelector("#Rgame");

			// 获取存放分数的div->scoring
			var scoring = document.querySelector("#scoring");

			// 用一个对象,存放灰太狼出现的位置
			var wolfStartArr = [{
				left: "98px",
				top: "115px"
			}, {
				left: "17px",
				top: "160px"
			}, {
				left: "15px",
				top: "220px"
			}, {
				left: "30px",
				top: "293px"
			}, {
				left: "122px",
				top: "273px"
			}, {
				left: "207px",
				top: "295px"
			}, {
				left: "200px",
				top: "211px"
			}, {
				left: "187px",
				top: "141px"
			}, {
				left: "100px",
				top: "185px"
			}];

			// 用来创建狼的定时器
			var createWolfTimer = null;

			// 给按钮添加点击事件
			startBtn.onclick = function() {

				// 隐藏menu菜单
				menu.style.display = "none";

				// 开始倒计时
				var countDownWidth = countDownDiv.offsetWidth;

				var timer = setInterval(function() {
					// 每10毫秒减一
					countDownWidth--;
					// 重新给倒计时div赋值宽度,实现倒计时效果
					countDownDiv.style.width = countDownWidth + "px";
					if (countDownWidth <= 0) {
						// 游戏结束,清除定时器
						clearInterval(timer);
						// 清除创建狼的定时器
						clearInterval(createWolfTimer);
						// 显示弹框
						gameOverDiv.style.display = "block";
						RgameDiv.style.display = "block";
					}

				}, 10)//游戏运行的时间

				// 创建狼
				// 用来记录上一个随机数(洞口上一次出现的位置)
				var num = -9999999;

				createWolfTimer = setInterval(function() {
					// 随机数
					var rand = randFn(0, wolfStartArr.length - 1); //0 1 1
					// 随机0~100的数
					var randType = randFn(0, 100);
					if (num == rand) {
						return;
					}
					num = rand;

					var wolf = new Image();

					//设置狼出现的位置
					wolf.style.left = wolfStartArr[rand].left;

					wolf.style.top = wolfStartArr[rand].top;

					// 随机狼的类型(小灰灰or灰太狼)
					randType > 90 ? wolf.type = "x" : wolf.type = "h";

					// 图片的下标
					wolf.index = 0;

					wolf.src = "img/" + wolf.type + wolf.index + ".png";

					// 插入到divs里面
					wolfsDiv.appendChild(wolf);

					//用来狼出现的动画(通过计时器刷图,实现动画)
					wolf.upTimer = setInterval(function() {
						wolf.index++;
						if (wolf.index <= 5) {
							wolf.src = "img/" + wolf.type + wolf.index + ".png";
						} else {
							clearInterval(wolf.upTimer);
							wolf.downTimer = setInterval(function() {
								wolf.index--;
								if (wolf.index <= 0) {
									clearInterval(wolf.downTimer);
									wolfsDiv.removeChild(wolf);
								}
								wolf.src = "img/" + wolf.type + wolf.index + ".png";
							}, 100)
						}
					}, 150)

					var bol = true;
					// 给wolf添加点击事件
					wolf.onclick = function() {
						wolf.index = 5;
						if (bol == true) {
							// 清除定时器(狼出现,狼消失)
							clearInterval(wolf.upTimer);
							clearInterval(wolf.downTimer);
							wolf.hitTimer = setInterval(function() {
								wolf.index++;
								if (wolf.index >= 9) {
									clearInterval(wolf.hitTimer);
									// 移除wolf
									wolfsDiv.removeChild(wolf);
								}
								wolf.src = "img/" + wolf.type + wolf.index + ".png";
							}, 100)
						}
						bol = false;
						if (wolf.type == "x") {

							// 减10分
							scoring.innerHTML = parseInt(scoring.innerHTML) - 10;

						} else if (wolf.type == "h") {

							// 加10分
							scoring.innerHTML = parseInt(scoring.innerHTML) + 10;
						}
					}
				}, 800)
			}
			//游戏规则、点击
			handle.onclick = function() {
				alert("在两分钟内点击露头的灰太狼和小灰灰,每次点击灰太狼加10分,每次点击小灰灰减10分!!");
			}
			//点击返回开始菜单
			Rgame.onclick=function(){
				
			}

			// 随机函数
			function randFn(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min);
			}

			// 阻止默认事件
			document.onmousedown = function(ev) {
				var e = ev || window.ev;
				e.preventDefault();
			}
		</script>
	</body>
</html>


点击全文阅读


本文链接:http://zhangshiyu.com/post/32513.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1