诛仙手游炼器模拟器
- 在线访问地址
http://wecode2020.gitee.io/zxlq/
- 码云仓库地址
https://gitee.com/wecode2020/zxlq.git
- index.html代码
<!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,//自动炼器功能勾选1
zdlqUse2:true,//自动炼器功能勾选2
zdlqUpLimitList:[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>
- 界面截图