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

实现方式

HTML + JavaScript

实现效果

概率可自行在代码中修改，默认为概率UP

为了好看我加入了鼠标插件，鼠标按住右键不放画图案，仅仅是画图而已
（实际单击右键抽卡）

单击右键进行抽卡

抽到SSR/SP时，播放动画

实现方式

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

3. 编写代码

<!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->15
   add_pool(SSR_SET,15);//UP->15
   add_pool(SR_SET,200);//UP->200
   add_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/R
   function 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或1
   function 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>