emmm,游戏中的属性购买页面
话不多说先上代码
我要评论
<form id="vue" action="/ltgdgame.web/main/index" method="post">
<input id="back" type="submit" value="返回" />
<div id="vit">
<div class="booklist">当前耐力:{{talent.vit}}</div>
<div class="booklist" v-for="(level,index) in levels" >
<input type="checkbox" class="bookcheckbox" v-bind:id="'vit'+level.id" name="vit" v-bind:value="level.name+'-'+booknums[index].num1" />
<label v-bind:for="'vit'+level.id" v-bind:style="{color:level.color}">{{level.name}}耐力之书 数量:<input style="width:7%;" v-model="booknums[index].num1" type="number" min="1" step="1"> 价格:{{level.cost*booknums[index].num1}} +{{level.add*booknums[index].num1}}耐力</label>
</div>
</div>
<div id="money">金币：{{role.goldcoin}}</div>
<div id="str">
<div class="booklist">当前力量:{{talent.str}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'str'+level.id" name="str" v-bind:value="level.name+'-'+booknums[index].num2" />
<label v-bind:for="'str'+level.id" v-bind:style="{color:level.color}">{{level.name}}力量之书 数量:<input style="width:7%;" v-model="booknums[index].num2" type="number" min="1" step="1"> 价格:{{level.cost*booknums[index].num2}} +{{level.add*booknums[index].num2}}力量</label>
</div>
</div>
<div id="imgatr"></div>
<div id="luk">
<div class="booklist">当前幸运:{{talent.luk}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'luk'+level.id" name="luk" v-bind:value="level.name+'-'+booknums[index].num3" />
<label v-bind:for="'luk'+level.id" v-bind:style="{color:level.color}">{{level.name}}幸运之书 数量:<input style="width:5%;" v-model="booknums[index].num3" type="number" min="1" step="1"> 价格:{{level.cost*booknums[index].num3}} +{{level.add*booknums[index].num3}}幸运</label>
</div>
</div>
<div id="wis">
<div class="booklist">当前魔力:{{talent.wis}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'wis'+level.id" name="wis" v-bind:value="level.name+'-'+booknums[index].num4" />
<label v-bind:for="'wis'+level.id" v-bind:style="{color:level.color}">{{level.name}}魔力之书 数量:<input style="width:7%;" v-model="booknums[index].num4" type="number" min="1" step="1"> 价格:{{level.cost*booknums[index].num4}} +{{level.add*booknums[index].num4}}魔力</label>
</div>
</div>
<div id="confirm" v-on:click="buy">确认购买</div>
<div id="dex">
<div class="booklist">当前敏捷:{{talent.dex}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'dex'+level.id" name="dex" v-bind:value="level.name+'-'+booknums[index].num5" />
<label v-bind:for="'dex'+level.id" v-bind:style="{color:level.color}">{{level.name}}敏捷之书 数量:<input style="width:7%;" v-model="booknums[index].num5" type="number" min="1" step="1"> 价格:{{level.cost*booknums[index].num5}} +{{level.add*booknums[index].num5}}敏捷</label>
</div>
</div>
<input type="text" name="roleid" v-bind:value="role.roleid" v-show="false" />
<input type="text" name="talentid" v-bind:value="talent.talentvalueid" v-show="false" />
<input type="text" name="rolename" v-bind:value="role.rolename" v-show="false" />
<div id="cancel" v-if="tip" v-on:click="cancel">
</div>
<div id="tip" v-if="tip">
<div id="tiptext">{{tiptext}}</div>
<div id="tipbtn" v-on:click="cancel">{{tipbtn}}</div>
</div>
</form>
js
var vue =new vue({
el: '#vue',
data: {
role: @html.raw(json.encode(viewbag.role)),
talent: @html.raw(json.encode(viewbag.talent)),
levels: [
{
id:1,
name:'普通',
color:'black',
cost: 50,
add:5,
},
{
id:2,
name: '优良',
color:'green',
cost: 200,
add: 25,
},
{
id:3,
name: '精良',
color:'blue',
cost: 500,
add: 85,
},
{
id:4,
name: '史诗',
color:'purple',
cost: 1000,
add: 200,
},
{
id:5,
name: '传说',
color:'orange',
cost: 10000,
add: 2500,
},
],
booknums: [
{
num1: 1,
num2: 1,
num3: 1,
num4: 1,
num5: 1,
},
{
num1: 1,
num2: 1,
num3: 1,
num4: 1,
num5: 1,
}, {
num1: 1,
num2: 1,
num3: 1,
num4: 1,
num5: 1,
}, {
num1: 1,
num2: 1,
num3: 1,
num4: 1,
num5: 1,
}, {
num1: 1,
num2: 1,
num3: 1,
num4: 1,
num5: 1,
},
],
tiptext: '提示',
tipbtn: '关闭',
tip: false,
},
methods: {
buy: function () {
let _self = this;
$.ajax({
url: "/ltgdgame.web/talent/buytalent",
type: "post",
datatype: 'json',
data: $("#vue").serialize() ,//这里直接把表单序列化模拟submit提交
success: function (data) {
if (data.result == "true")
{
_self.tip = true;
_self.tiptext = '购买成功';
_self.role.goldcoin = data.goldcoin;
if (typeof (data.vit) != "undefined")
_self.talent.vit = data.vit;
if (typeof (data.str) != "undefined")
_self.talent.str = data.str;
if (typeof (data.wis) != "undefined")
_self.talent.wis = data.wis;
if (typeof (data.dex) != "undefined")
_self.talent.dex = data.dex;
if (typeof (data.luk) != "undefined")
_self.talent.luk = data.luk;
resetchart();
}
else if(data.result=="false")
{
_self.tip = true;
_self.tiptext = '金币不足';
}
else
{
_self.tip = true;
_self.tiptext = '请选择购买';
}
}
})
},
cancel: function () {
this.tip = false;
},
}
})
mychart = echarts.init(document.getelementbyid('imgatr'));
var option = {
title: {
},
tooltip: {},
radar: {
// shape: 'circle',
name: {
textstyle: {
color: '#fff',
backgroundcolor: '#999',
borderradius: 5,
padding: [3, 5],
fontsize:20
}
},
splitarea: {
areastyle: {
color:['white'],
}
},
indicator: [
{ name: '体力vit', max: 1000 },
{ name: '力量str', max: 1000 },
{ name: '魔力wis', max: 1000 },
{ name: '敏捷dex', max: 1000 },
{ name: '幸运luk', max: 1000 },
]
},
series: [{
name: '属性',
type: 'radar',
// areastyle: {normal: {}},
data: [
{
value: [vue.talent.vit, vue.talent.str, vue.talent.wis, vue.talent.dex, vue.talent.luk],
name: '属性值'
},
]
}]
}
mychart.setoption(option);
function resetchart() {
mychart.setoption({
series: [{
data: [{
value: [vue.talent.vit, vue.talent.str, vue.talent.wis, vue.talent.dex, vue.talent.luk],
name: '属性值'
},]
}]
})
}
这里用到了一个百度的echart插件
属性方面的设定我先随便给了值，我感觉等几个变强的要素都做好了再根据怪物属性来调整这些。
可多选，可选择数量，购买后直接数值改变不刷新页面。
下一个打算做装备页面。。。过几天更新
如对本文有疑问， 点击进行留言回复！！
SQLSERVER中RANK OVER(PARTITION BY)的用法
Kaspersky Endpoint Security 10 for Windows version 10.2.6.3733 is no longer supported
网友评论