原生js 锅打灰太狼

<!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
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderdwy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值