兔子陷阱游戏翻牌

买了这个东西

这玩具的卡片总是容易双翻,可能是卡牌之间的摩擦力大,洗牌都觉得不容易。

于是我上某宝把卡牌的图片也搜了出来

然后就是ps剪成四个图片,用一个html就能够做个抽卡机了:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>兔子陷阱抽卡机</title>
	</head>
	<body>
		<img src="spin.png" id="img">
		<script>
			let imgs=['1.png','2.png','3.png','spin.png','1.png','2.png','3.png','spin.png'];
			let img=document.getElementById('img');
			let fr=-1;
			function pulling(){
				return new Promise(resolve=>{
					let timer=setInterval(()=>{
						if(fr>=8){
							//动画结束
							fr=-1;
							clearInterval(timer);
							resolve();
						}else{
							if(fr==-1){
								//-1代表新的动画开始播放了
								fr=0;
							}
							img.src=imgs[fr];
							fr++;
						}
					},75)
				})
			}
			async function pull(evt){
				if(fr>=0){
					return;
				}
				await pulling();
				let rand=Math.random();
				if(rand<0.125){
					img.src='3.png';
				}else if(rand<0.375){
					img.src='2.png';
				}else if(rand<0.625){
					img.src='spin.png';
				}else{
					img.src='1.png';
				}
			}
			document.addEventListener('keydown',pull);
			document.addEventListener('mousedown',pull);
		</script>
	</body>
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值