一步步教你做“锅打灰太狼”

今天给大家分享做一个小游戏“锅打灰太狼”。

首先，我们先来完成一个开始游戏的界面

上代码

//HTML代码
<div class="boss">
			<div class="box1">
				<p>锅打灰太狼</p>
				<button class="btn">开始游戏</button>
				<div class="box_img">
					<img src="img/x5.png" />
					<img src="img/h5.png" />
				</div>
			</div>
<div>

 

//CSS代码
<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			.clearfix::after {
				content: '';
				clear: both;
				display: block;
			}
			
			.clearfix {
				zoom: 1;
			}
			
			.boss {
				width: 320px;
				height: 480px;
				text-align: center;
				margin: 0 auto;
				position: relative;
			}
			
			.box1 {
				width: 100%;
				height: 100%;
				border-radius: 10px;
				background-color: #6495ed;
				overflow: hidden;
			}
			
			.box1 p {
				color: goldenrod;
				font-weight: bolder;
				font-size: 40px;
				margin-top: 100px;
				margin-bottom: 80px;
			}
			
			.box1 button {
				width: 110px;
				height: 50px;
				background: linear-gradient(red, #f2f2f2);
			}
			
			.box_img {
				margin-top: 70px;
			}
			
			.box2 {
				position: relative;
				display: none;
			}
			
			.jdt {
				position: absolute;
				top: 66px;
				left: 63px;
			}
</style>

通过点击开始游戏进入游戏，这里暂时只有进度条和灰太狼出来

先看效果

下面看js部分代码

<script type="text/javascript">
		window.onload = function() {
			var btn = document.querySelector('.btn');
			var box1 = document.querySelector(".box1");
			var box2 = document.querySelector('.box2');
			var img = document.createElement('img');
			var jdt = document.querySelector('.jdt');
			var inxHtl = 0;
			var bar = 180;
			btn.onclick = function() {
				box1.style.display = 'none';
				box2.style.display = 'block';
				//box3.style.display = 'block';
				img.style.position = 'absolute';
				img.style.top = '160px';
				img.style.left = '18px';
				box2.appendChild(img);
				var htl = setInterval(function() {
						
					img.setAttribute('src', 'img/h' + inxHtl + '.png');
						inxHtl++;			
					if(inxHtl >5) {
						clearInterval(htl);
					}
				}, 60)
				var time = setInterval(function() {
					if(bar > 0) {
						bar--;
						jdt.style.width = bar + "px";
					} else {
						clearInterval(time);
					}
				}, 100);
			}
		}
	</script>

 以上就是“锅打灰太狼”小游戏的前面一部分，下期更新打灰太狼

今天的分享就到这，如有错误之处，敬请指正！