买了这个东西
这玩具的卡片总是容易双翻,可能是卡牌之间的摩擦力大,洗牌都觉得不容易。
于是我上某宝把卡牌的图片也搜了出来
然后就是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>