原生js 锅打灰太狼

最新推荐文章于 2022-08-19 18:57:41 发布

coderdwy

最新推荐文章于 2022-08-19 18:57:41 发布

阅读量933

点赞数 1

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/blue__k/article/details/107722735

版权

js 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 10px;
		}

		body,
		html {
			height: 100%;
		}

		.all {
			height: 100%;
			background: url(img/game_bg.jpg) 0 0 no-repeat;
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
		}

		.scoreFa {
			position: absolute;
			/*80px*/
			left: 19.32367%;
			/*23px*/
			top: 3.125%;
			color: white;
			font-size: 2.5rem;
		}

		.start {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: red;
			color: white;
			font-size: 30px;
			padding: 10px;
			z-index: 99;
			/*opacity: 0;*/
		}

		.timeFa {
			/*234px*/
			width: 56.52173%;
			/*25px*/
			height: 3.39673%;
			border-radius: 10px;
			position: absolute;
			/*101px*/
			top: 13.72282%;
			/*80px*/
			left: 19.32367%;
			overflow: hidden;
		}

		.timeFa .time {
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: red;
		}

		.all img {
			position: absolute;
			/*width: 108px;
			height: 101px;*/
		}

		.all img:nth-child(1) {
			top: 39.48913%;
			left: 7.66183%;
		}

		.all img:nth-child(2) {
			top: 29.57065%;
			left: 32.7826%;
		}

		.all img:nth-child(3) {
			top: 35.68478%;
			left: 60.80193%;
		}

		.all img:nth-child(4) {
			top: 51.98913%;
			left: 7.17874%;
		}

		.all img:nth-child(5) {
			top: 45.875%;
			left: 34.23188%;
		}

		.all img:nth-child(6) {
			top: 50.08695%;
			left: 64.42512%;
		}

		.all img:nth-child(7) {
			top: 66.93478%;
			left: 11.28502%;
		}

		.all img:nth-child(8) {
			top: 62.85869%;
			left: 39.54589%;
		}

		.all img:nth-child(9) {
			top: 67.47826%;
			left: 67.08212%;
		}
	</style>
</head>

<body>
	<div class="timeFa"><span class="time" id="time"></span></div>
	<div class="scoreFa" id="score">0</div>
	<div class="start" id="start">start game</div>
	<div class="all">
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
	</div>
	<script type="text/javascript">
		var oStart = document.querySelector('#start');
		var kengs = document.querySelectorAll('.all img');
		var gamescore = document.querySelector('#score');
		var gametime=document.querySelector('#time');
		var myscore = 0;
		var cTime=null;
		//定义狼
		var langs = ['h', 'x', 'h', 'h', 'h'];
		//封装狼出来的方法
		function langup() {
			//随机获取坑的位置
			var randkeng = kengs[rand(0, kengs.length - 1)];
			//坑里是否诱狼
			if (randkeng.getAttribute('src')) {
				return;
			}
			//s随机出来一狼
			var randlang = langs[rand(0, langs.length - 1)];
			randkeng.lang = randlang;
			// 坑默认对应的图片
			randkeng.index = 0;
			//定时器切换
			randkeng.timer = setInterval(function () {
				if (randkeng.index == 6) {
					clearInterval(randkeng.timer);
					langdown(randlang, randkeng);
				}
				else {
					randkeng.src = './img/' + randlang + randkeng.index + '.png';
					randkeng.index++;
				}
			}, 100)
		}
		//狼下去的方法
		function langdown(who, where) {
			//从5开始
			where.index = 5;
			where.timer = setInterval(function () {
				if (where.index == -1) {
					where.src = '';
					clearInterval(where.timer)
				} else {
					where.src = './img/' + who + where.index + '.png';
					where.index--;
				}
			}, 100)
		}
		//自动的出来浪
		function autorand() {
			gtime = setInterval(function () {
				langup();
			}, 300)
		}
		//循环给所有的坑添加点击事件
		for (var i = 0; i < kengs.length; i++) {
			kengs[i].onclick = function () {
				if (this.getAttribute('src')) {
					//大刀螂
					//眩晕
					hitlang(this.lang, this);
					//加分
					countscore(this.lang);
				}
			}
		}
		//点击到狼
		function hitlang(who, where) {
			//浪的动作
			clearInterval(where.timer);
			where.index = 6;
			where.timer = setInterval(function () {
				if (where.index == 10) {
					clearInterval(where.timer)
					where.src = '';
				} else {
					where.src = './img/' + who + where.index + '.png';
					where.index++;
				}
			}, 100);
		}
		//统计分数
		function countscore(who) {
			switch (who) {
				case 'h':
					myscore += 10;
					break;
				case 'x':
					myscore -= 10;
					break;
			}
			//计算得分并显示
			gamescore.innerHTML = myscore;
		}
		//倒计时
		function countdown(){
			cTime=setInterval(function(){
				if(gametime.offsetWidth==0){
					clearInterval(cTime)
					gametime.style.width='0px';
					gameover();
				}else{
					gametime.style.width=gametime.offsetWidth-1+'px';
				}

			},100)
		}
         //清除狼自动出来，弹出分数
		function gameover(){
			clearInterval(gtime);
			alert('您的分数是：'+myscore);
		}
		//点击游戏开始
		oStart.onclick = function () {
			this.style.display = 'none';
			autorand();
			countdown();
		}
		//封装随机数
		function rand(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
	</script>
</body>

</html>

图片
game_bg.jpg
在这里插入图片描述
h0.png

h1.png

h2.png

h3.png

h4.png

h5.png

h6.png

h7.png

h8.png

h9.png

progress.png

x0.png

x1.png

x2.png

x3.png

x4.png

x5.png

x6.png

x7.png

x8.png

x9.png