- 访问地址
诛仙手游炼器模拟器
- 源码地址
zxlq: 诛仙手游炼器模拟器网页版
- 界面截图
- 主要代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>诛仙手游炼器模拟器</title><link rel="stylesheet" href="assets/css/H-ui.reset.css"><link rel="stylesheet" href="assets/css/animate.min.css"><link rel="stylesheet" href="assets/css/style.css"><script type="text/javascript" src="assets/js/vue.min.js"></script>
</head>
<body><div id="app"><!-- 主背景 --><img src="assets/img/bg.png" alt="" width="100%" height="100%"><!-- 装备列表 --><div class="zb-list-container"><ul class="zb-list"><li v-for="(item,index) in zbList" @click="zbActiveIndex=index" :class="{active:index==zbActiveIndex}"><img :src="'assets/img/'+item.img" alt=""><p class="p1">{{item.name}}</p><p class="p2" :lqdj="item.lqdj" >炼器+{{item.lqdj}}</p></li></ul></div><!-- 当前选中装备标识图片 --><img class="curr-zb-img" :src="currZbImg" alt=""><!-- 开始炼器按钮 --><div class="start-btn" @click="startLq" ></div><!-- 炼器成功效果 （成功时显示） --><div class="lqcg animated zoomIn" v-show="lqjg==1"></div><!-- 炼器失败效果 （失败时显示）--><div class="lqsb animated zoomIn" v-show="lqjg==0"></div><!-- 炼器符数量 --><strong class="lqfnum">{{lqfNum}}/1</strong><!-- 祝福道具显示按钮 --><div class="zfdj-show-btn" @click="zfdjShow=true"><img :src="'assets/img/'+zfdjList[zfdjActiveIndex].img" alt="" v-if="zfdjActiveIndex!=-1" width="100%" height="100%"><strong v-if="zfdjActiveIndex!=-1">{{zfdjList[zfdjActiveIndex].num}}</strong></div><!-- 是否使用祝福道具钩子 --><div class="hook zfdj-hook" :class="{active:zfdjUse}" @click="zfdjUse=!zfdjUse"></div><!-- 祝福道具选择区（默认隐藏） --><div class="zfdj-box" v-show="zfdjShow"><ul class="zfdj-list"><li v-for="(item,index) in zfdjList" v-show="item.num" :class="{active:index==zfdjActiveIndex}" @click="zfdjActiveIndex=index"><img :src="'assets/img/'+item.img" alt=""><strong>{{item.num}}</strong></li></ul><div class="zfdj-desc" v-html="zfdjDesc"></div><div class="zfdj-confirm-btn" @click="zfdjShow=false"></div></div><!-- 自动炼器按钮 --><div class="zdlq-show-btn" @click="zdlqShow=zdlqStatus==0||stopZdlq()">{{zdlqStatus?"停止炼器":"自动炼器"}}</div><!-- 自动炼器设置（默认隐藏） --><div class="zdlq-box" v-show="zdlqShow"><div class="zdlq-uplimit-select" ><span>{{zdlqUpLimitSelect}}</span><select name="zdlqUpLimit" v-model="zdlqUpLimitSelect"><option v-for="item in zdlqUpLimitList" :value="item">{{item}}</option></select></div><!-- 钩选1（是否自动消耗金币） --><div class="hook zdlq-first-hook" :class="{active:zdlqUse1}" @click="zdlqUse1=!zdlqUse1"></div><!-- 钩选2（是否自动选择更高级别完璧符）--><div class="hook zdlq-second-hook" :class="{active:zdlqUse2}" @click="zdlqUse2=!zdlqUse2"></div><!-- 钩选3（是否使用祝福道具） --><div class="hook zdlq-three-hook" :class="{active:zfdjUse}" @click="zfdjUse=!zfdjUse"></div><!-- 祝福道具列表 --><ul class="zdlq-zfdj-list"><li v-for="(item,index) in zfdjList" v-show="item.num" :class="{active:zfdjUse && index==zfdjActiveIndex}" @click="zfdjActiveIndex=index"><img :src="'assets/img/'+item.img" alt="" :class="{'gray-img': !zfdjUse }"><strong>{{item.num}}</strong><p>{{item.name}}</p></li></ul><div class="zdlq-cancel" @click="zdlqShow=false"></div><div class="zdlq-confirm" @click="zdlqShow=false;startZdlq();"></div></div><!-- 消耗总计 --><p class="total">总计：<strong>{{total}}</strong>元宝</p></div><script type="text/javascript">/*** 各等级装备炼器概率常量* 此处概率参考来源： http://pgp.wanmei.com/gongshi/m_zhuxian.html* @type {Object}*/const lqglList = {100:[0.6,0.6,0.6,0.6,0.6,0.55,0.55,0.45,0.45,0.35,0.35,0.3,0.35,0.35,0.3]};/*** 随机炼器buff，模拟官网公示的概率都是 “大于30%” 的情况* @type {[type]}*/const lqBuff = 1.1+Math.random()*0.15;/*** 装备列表* @type {Array}*/var zbList = [{name:"华月环(100级)",img:'zb01.png',zbdj:100,lqdj:0},{name:"华月冠(100级)",img:'zb02.png',zbdj:100,lqdj:0},{name:"华月衫(100级)",img:'zb03.png',zbdj:100,lqdj:0},{name:"华月裤(100级)",img:'zb04.png',zbdj:100,lqdj:0},{name:"华月手(100级)",img:'zb05.png',zbdj:100,lqdj:0},{name:"华月鞋(100级)",img:'zb06.png',zbdj:100,lqdj:0}];/*** 祝福道具列表* @type {Array}*/var zfdjList = [{name:"吉星符", num:5000, img:'jxf.png', price:200, lqsb:-5, lqBuff:1.2, desc:'使炼器成功的概率提高<font color="red">20%</font>，炼器成功可提高1级炼器等级，失败则降低<font color="red">5</font>级，但最少会保留至1级'},{name:"神品完璧符", num:5000, img:'wbf.png', price:200, lqsb:-1, lqBuff:1, desc:'适用于所有装备，使炼器失败的惩罚减少为降低<font color="red">1</font>级炼器等级'},{name:"天缘符", num:500, img:'tyf.png', price:1960, lqsb:-1, lqBuff:1.2, desc:'使炼器失败的惩罚减少为降低<font color="red">1</font>级炼器等级，同时炼器成功率提高<font color="red">20%</font>'}]/*** 创建vue实例*/var app = new Vue({el:"#app",data:{total:0,lqjg:-1,//炼器结果：-1执行中，0炼器失败，1炼器成功interval:400,//时间间隔，限定单次执行时长，单位毫秒lqfNum:99999,//炼器符数量zbActiveIndex:0,//当前激活装备下标zbList:zbList,//装备列表zfdjActiveIndex:-1,//当前激活祝福道具下标zfdjShow:false,//祝福道具选择框是否显示（默认隐藏）zfdjUse:true,//祝福道具是否使用（默认使用）zfdjList:zfdjList,//祝福道具列表zdlqShow:false,//自动炼器定时器zdlqSt:null,//自动炼器定时器zdlqUse1:true,//自动炼器功能勾选1zdlqUse2:true,//自动炼器功能勾选2zdlqUpLimitList:[4,5,6,7,8,9,10,11,12,13,14,15],//自动炼器上限等级列表zdlqUpLimitSelect:5,//自动炼器当前选择炼器等级上限zdlqStatus:0//自动炼器状态：0未执行，1执行中},methods:{//开始炼器（执行一次）startLq(){//提取当前装备信息var item = this.zbList[this.zbActiveIndex];//炼器执行中，操作取消if(this.lqjg!=-1) return;//炼器符用尽if(this.lqfNum==0 ) return alert("炼器符用尽！");//当前装备已达到最高等级，操作取消if(item.lqdj==15) return alert("已达到最高等级！");//基础炼器概率var lqgl = lqglList[item.zbdj][item.lqdj]*lqBuff;//炼器失败惩罚(默认减5级)var lqsb = -5;//炼器符使用，数量减一this.lqfNum--;this.total+=10;//祝福道具使用var zfdj = this.zfdjUse && this.zfdjActiveIndex!=-1 ? this.zfdjList[this.zfdjActiveIndex] : null;if(zfdj){lqsb = zfdj.lqsb;lqgl *= zfdj.lqBuff;zfdj.num--;this.total+=zfdj.price;if(zfdj.num==0) this.zfdjActiveIndex=-1;}//炼器结果计算if(Math.random()<=lqgl){this.lqjg=1;item.lqdj++;}else{item.lqdj=item.lqdj==0?0:item.lqdj+lqsb<1?1:item.lqdj+lqsb;this.lqjg=0;}//设置超时，避免炼器过快setTimeout(function(){ this.lqjg=-1; }.bind(this),this.interval);},//自动炼器（执行多次）startZdlq(){this.zdlqStatus=1;this.zdlqSt=setInterval(function(){//提取当前装备信息var item = this.zbList[this.zbActiveIndex];var max = this.zdlqUpLimitSelect;if(item.lqdj>=max || (false && this.zfdjUse && this.zfdjActiveIndex==-1) ) return this.stopZdlq();this.startLq();}.bind(this),this.interval+50);},//停止自动炼器stopZdlq(){this.zdlqStatus=0;clearInterval(this.zdlqSt);}},computed:{currZbImg(){return 'assets/img/'+this.zbList[this.zbActiveIndex].img;},zfdjDesc(){var zfdj = this.zfdjList[this.zfdjActiveIndex];return zfdj ? '<h3>'+zfdj.name+'</h3><p>'+zfdj.desc+'</p>' : '';}}});/*** 自适应*/;(function(){window.onresize = function (){var el = document.getElementById("app");var w=window.innerWidth-80, h=window.innerHeight-80;var w2=el.clientWidth, h2=el.clientHeight;//等比例缩放if(w>=h){let scale = Math.min(h/h2,w/w2);el.style.transform=`scale(${scale},${scale})`;}else{let scale = Math.min(h/w2,w/h2);el.style.transform=`rotate(90deg) scale(${scale},${scale})`;}};window.onresize();})();</script>
</body>
</html>
