阴阳师模拟抽卡[含源码]

实现方式

HTML + JavaScript

实现效果

概率可自行在代码中修改，默认为概率UP
在这里插入图片描述
为了好看我加入了鼠标插件，鼠标按住右键不放画图案，仅仅是画图而已
（实际单击右键抽卡）

单击右键进行抽卡

抽到SSR/SP时，播放动画

实现方式

准备图片文件 (式神头像和背景图)
SSR/SP召唤动画

在这里插入图片描述

编写代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>yys</title><script type="text/javascript" src="jquery-1.9.1.js"></script><style type="text/css">body{width: 1200px;margin-left: auto;margin-right: auto;background-image: url('yys_background.jpg');color: white;}#result_set{width: 1200px;float: left;position: absolute;top: 150px;}#shilian{display: none;width: 1200px;float: left;position: absolute;top: 500px;}.home-video{z-index: 100;position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;object-fit: fill;/*这里是关键*/width: auto;height: auto;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);background-size: cover;}#info{font-size: 20px;font-weight: bold;font-family: Comic Sans Ms;}</style>
</head>
<body><center><div id="info">当前概率：<br/></div><div id="result_set"></div><div id="shilian"><img src="十连召唤.png"></div><img id="image" src="YYS.png" width="100%" height="100%"><video id='vid' style='display:none' width="1000" ></video></center>
</body>
<script type="text/javascript">var SP_SET = new Array("炼狱茨木童子","稻荷神御馔津","少羽大天狗","赤影妖刀姬","苍风一目连","御怨般若","骁浪荒川之主");var SSR_SET = new Array("大天狗","酒吞童子","荒川之主","阎魔","小鹿男","茨木童子","青行灯","妖刀姬","一目连","花鸟卷","辉夜姬","荒","彼岸花","雪童子","山风","玉藻前","御馔津","面灵气","鬼切","白藏主","八岐大蛇","不知火","大岳丸");var SR_SET = new Array("桃花妖","雪女","鬼使白","孟婆","犬神","鬼女红叶","傀儡师","判官","凤凰火","吸血姬","妖狐","妖琴师","食梦貘","清姬","镰鼬","姑获鸟","白狼","樱花妖","惠比寿","络新妇","般若","青坊主","夜叉","黑童子","白童子","烟烟罗","金鱼姬","鸩","以津真天","匣中少女","书翁","百目鬼","追月神","薰","弈","猫掌柜","於菊虫","一反木绵","入殓师","化鲸","久次良","蟹姬");var R_SET = new Array("三尾狐","座敷童子","鲤鱼精","九命猫","狸猫","河童","童男","童女","饿鬼","巫蛊师","鸦天狗","食发鬼","武士之灵","雨女","跳跳弟弟","跳跳妹妹","兵俑","丑时之女","独眼小僧","铁鼠","椒图","管狐","山兔","萤草","蝴蝶精","山童","首无","觉","青蛙瓷器","古笼火","虫师");var all_SET = new Array();var arr = new Array();var temp =0;var timer ;//把式神集放入卡池add_pool(SP_SET,15);//UP->15add_pool(SSR_SET,15);//UP->15add_pool(SR_SET,200);//UP->200add_pool(R_SET,770);//UP->770//打乱卡池，保证随机性all_SET.sort(randomsort);//计算概率count_chance();var vid = document.getElementById("vid");document.oncontextmenu=function(){return false};vid.addEventListener("ended",function(){$('#vid').css('display','none');$('#vid').removeClass('home-video');timer = setInterval(func,1000);      });//放入卡池function add_pool(list_set,num){for (var i = 0; i < num; i++) {all_SET.push(list_set);}arr.push(num);}//计算概率function count_chance(){var info = document.getElementById("info");var tot = 0;for(var i=0;i<arr.length;i++){tot += arr[i];}info.innerHTML+="SP/SSR    ："+((arr[0]+arr[1])/tot*100).toFixed(2)+"%<br>";info.innerHTML+="SR    ："+(arr[2]/tot*100).toFixed(2)+"%<br>";info.innerHTML+="R    ："+(arr[3]/tot*100).toFixed(2)+"%<br>";}//抽卡function action_random(){	t=0;var result_set = document.getElementById('result_set');result_set.innerHTML="";timer = setInterval(func,1000);}var t = 0;function func(){var result_set = document.getElementById('result_set');if(t<10){var rand = getRndInteger(0,all_SET.length-1);var new_rand = getRndInteger(0,all_SET[rand].length-1);var str = all_SET[rand][new_rand];var style = search(str);result_set.innerHTML +="<span ><img src='shiShen/"+str+".png'><b style='"+style+"'>"+str+"</b></span>";if(style=="color:#FFCC00;" || style=="color:#CC0033;"){$('#vid').css('display','block');$('#vid').attr('src',str+'.mp4');vid.play();$('#vid').addClass('home-video');clearInterval(timer);}t++;}else{clearInterval(timer);$("#shilian").show(800);}}//判断式神是SP/SSR/SR/Rfunction search(shiShen){for(var i=0;i<SP_SET.length;i++){if(shiShen==SP_SET[i]){return "color:#CC0033;";}}for(var i=0;i<SSR_SET.length;i++){if(shiShen==SSR_SET[i]){return "color:#FFCC00;";}}for(var i=0;i<SR_SET.length;i++){if(shiShen==SR_SET[i]){return "color:#CC00FF;";}}for(var i=0;i<R_SET.length;i++){if(shiShen==R_SET[i]){return "color:skyblue;";}}}//以下函数返回 min（包含）～ max（包含）之间的数字：function getRndInteger(min, max){return Math.floor(Math.random() * (max - min + 1) ) + min;}//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1function randomsort(){return Math.random()>0.5 ? -1 : 1;}var image = document.getElementById("image");image.onmouseup = function(e){if(e.button == 2){if(temp==0){$('#image').hide(800);$('#image').fadeIn(800);$('#image').attr('src','bg.png');temp++;}$("#shilian").hide();action_random();}}</script>
</html>