HBuilder制作英雄皮肤抽奖小游戏

最新推荐文章于 2024-05-15 11:32:54 发布

秋无之地

最新推荐文章于 2024-05-15 11:32:54 发布

阅读量5.4k

点赞数 9

分类专栏： Web开发前端文章标签： html Web开发前端抽奖小游戏

本文链接：https://blog.csdn.net/weixin_42108731/article/details/80247591

版权

Web开发前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用HBuilder制作英雄皮肤抽奖小游戏，主要用到“轮播图”和“定时器”，至于“轮播图”和“定时器”

是什么，请自行百度就OK。话不多少，直接上程序代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>皮肤抽奖</title>
	<!--设置css样式-->
	<style>
		.boxs {
			margin: 150px auto;
			width: 1040px;
			height: 465px;
			padding: 30px;
			background: url(img/back1.jpg) repeat center center;
			position: relative;
			text-align: center;
		}
		
		.boxs h1 {
			position: absolute;
			left: 425px;
			height: 10px;
			color: #f66;
		}
		
		.innerBox {
			width: 930px;
			height: 225px;
			padding: 0 15px;
			position: absolute;
			left: 65px;
			top: 120px;
			overflow: hidden;
		}
		
		.innerBox div {
			list-style: none;
			float: left;
			padding: 5px;
			width: 300px;
			height: 225px;
			overflow: hidden;
			position: relative;
		}
		
		.innerBox ul{
			list-style: none;
			position: absolute;
			left: 0;
			top: 0;
			padding: 0;		
			margin: 0;	
		}
		
		.innerBox li img {
			display: block;
			width: 300px;
			height: 225px;
		}
		
		#Play {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #66f;
			color: #fff;
			font-size: 30px;
			font-weight: 500;
			margin-top: 360px;
		}
	</style>
	<!--导入随机数js文件（js文件中封装了一个生成指定范围的随机数函数）-->
	<script src="js/random.js"></script>
	<!--导入jQuery文件-->
	<script src="jquery-3.2.1.js"></script>
	
	<script>
		jQuery(function($) {
			//创建对象（按钮、抽奖框、图片列表和下标）
			var $play = $('#Play');
			var $box1 = $('.box1');
			var $ul1 = $box1.children('ul');
			var $box2 = $('.box2');
			var $ul2 = $box2.children('ul');
			var $box3 = $('.box3');
			var $ul3 = $box3.children('ul');
			var index1 = 0;
			var index2 = 0;
			var index3 = 0;
			
			//复制第一张图片，并放到最后
			var firstPic =$('.warp1 li').first().clone();
			$ul1.append(firstPic);
			var firstPic =$('.warp2 li').first().clone();
			$ul2.append(firstPic);
			var firstPic =$('.warp3 li').first().clone();
			$ul3.append(firstPic);
			
			//设置按钮点击事件
			$play.on('click', function() {
				//重置下标值
				index1 = 0;
				index2 = 0;
				index3 = 0;
				//设置定时器
				var timerStart1 = setInterval(autoplay1, 30);
				var timeStop1 = randomNumber(120, 130)*30;
				var timerStart2 = setInterval(autoplay2, 30);
				var timeStop2 = randomNumber(142, 152)*30;
				var timerStart3 = setInterval(autoplay3, 30);
				var timeStop3 = randomNumber(164, 174)*30;
				//点击按钮后设置延时结束（3个抽奖框停止时间不一样）
				var firstBox = setTimeout(function() {
					clearInterval(timerStart1);
				}, timeStop1);
				var secondBox = setTimeout(function() {
					clearInterval(timerStart2);
				}, timeStop2);
				var thirdBox = setTimeout(function() {
					clearInterval(timerStart3);
				}, timeStop3);					
				
				//计算返回最终显示的图片对应的编号
				function numJpg(num){
					var jpgNumPrv = parseInt((num / 30 - 100)%10);					
					return jpgNumPrv;
				}
				
				var num1 = numJpg(timeStop1);
				var num2 = numJpg(timeStop2);
				var num3 = numJpg(timeStop3);
				
				//通过返回的图片对应的编号判断是否中奖
				setTimeout(function() {
					if(num1 === num2 && num2 === num3){
						
						alert('恭喜中奖了,中奖皮肤编号为'+num1);							
					}else{
						alert('继续努力');
					}
				}, 8000);
			});
			
			//自动轮播图
			function autoplay1() {
				index1++;
				if(index1 === $ul1.children().length){
					index1 = 1;
					$ul1.css('top','0px');
				}
				var toper = -index1*$box1.height();
				$ul1.animate({					
					top:toper
				},20);
			}
			function autoplay2() {
				index2++;
				if(index2 === $ul2.children().length){
					index2 = 1;
					$ul2.css('top','0px');
				}
				var toper = -index2*$box1.height();
				$ul2.animate({					
					top:toper
				},20);
			}
			function autoplay3() {
				index3++;
				if(index3 === $ul3.children().length){
					index3 = 1;
					$ul3.css('top','0px');
				}
				var toper = -index3*$box1.height();
				$ul3.animate({					
					top:toper
				},20);
			}
		})
	</script>
</head>

<body>
	<div class="boxs">
		<h1>王者荣耀皮肤抽奖</h1>
		<div class="innerBox">
			<div class="box1">
				<ul class="warp1">	
					<li><img src="img/1.jpg" alt="" /></li>
					<li><img src="img/2.jpg" alt="" /></li>
					<li><img src="img/3.jpg" alt="" /></li>
					<li><img src="img/4.jpg" alt="" /></li>
					<li><img src="img/5.jpg" alt="" /></li>
					<li><img src="img/6.jpg" alt="" /></li>
					<li><img src="img/7.jpg" alt="" /></li>
					<li><img src="img/8.jpg" alt="" /></li>
					<li><img src="img/9.jpg" alt="" /></li>
					<li><img src="img/10.jpg" alt="" /></li>
				</ul>
			</div>
			<div class="box2">
				<ul class="warp2">		
					<li><img src="img/1.jpg" alt="" /></li>
					<li><img src="img/2.jpg" alt="" /></li>
					<li><img src="img/3.jpg" alt="" /></li>
					<li><img src="img/4.jpg" alt="" /></li>
					<li><img src="img/5.jpg" alt="" /></li>
					<li><img src="img/6.jpg" alt="" /></li>
					<li><img src="img/7.jpg" alt="" /></li>
					<li><img src="img/8.jpg" alt="" /></li>
					<li><img src="img/9.jpg" alt="" /></li>
					<li><img src="img/10.jpg" alt="" /></li>
				</ul>
			</div>
			<div class="box3">
				<ul class="warp3">
					<li><img src="img/1.jpg" alt="" /></li>
					<li><img src="img/2.jpg" alt="" /></li>
					<li><img src="img/3.jpg" alt="" /></li>
					<li><img src="img/4.jpg" alt="" /></li>
					<li><img src="img/5.jpg" alt="" /></li>
					<li><img src="img/6.jpg" alt="" /></li>
					<li><img src="img/7.jpg" alt="" /></li>
					<li><img src="img/8.jpg" alt="" /></li>
					<li><img src="img/9.jpg" alt="" /></li>
					<li><img src="img/10.jpg" alt="" /></li>
				</ul>
			</div>

		</div>
		<button id="Play">开始抽奖</button>
	</div>
</body>
</html>

效果图如下：

需要注意的是：

1，需要先导入随机数函数

<script src="js/random.js"></script>

具体函数代码如下：

function randomNumber(start, end){
    var randomNum = parseInt(Math.random()*(end-start)+start);
    return randomNum;
}

2，导入jQuery文件

<script src="jquery-3.2.1.js"></script>

3，导入图片

在body内部导入图片，图片可以自己找。

秋无之地

关注

9
点赞
踩
43

收藏

觉得还不错? 一键收藏
打赏
2
评论
HBuilder制作英雄皮肤抽奖小游戏

用HBuilder制作英雄皮肤抽奖小游戏，主要用到“轮播图”和“定时器”，至于“轮播图”和“定时器”是什么，请自行百度就OK。话不多少，直接上程序代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;皮肤抽奖&lt;/title&gt; &lt;
复制链接

扫一扫