英语学习在线发音,家的n次方下载,老板手机号
刚毕业的新人，工作的时候试过用.net 框架，但是我发现写的前端代码都非常多，要写很多很多的原生，然后最近在看vue.js觉得还不错，可以减少前端很多dom操作.
至于做的东西我是想做一个游戏，一个回合制类的游戏，想着就是前端点技能然后传回后端计算，然后利用vue直接修改数据来达到血条的变化之类的。毕竟大学就是冲着做游戏去的。后来发现好像做游戏都是用引擎，但是毕竟学都学了.net，就想尝试一下。
并没有完成，才做完用户和角色创建页面。下面贴代码
前端代码
我要评论
<div id="all">
<transition name="form-fade" mode="out-in">
<form id="role" name="form" key="role" v-if="roleshow" action="/ltgdgame.web/main/index" method="post" >
<div class="leftpart">
<div id="rolelist">
@{
if (viewbag.roles.count == 0)
{
<div class="rolelist" v-on:click="toggle">你还没有角色，请创建一个</div>
}
else
{
<div class="rolelist" v-for="(role,index) in roles">
<input type="radio" v-bind:id="role.roleid" class="roleradio" name="rolename" v-bind:value="role.rolename" v-model="rolepicked">
<label v-bind:for="role.roleid">角色名: {{role.rolename}} 职业: {{role.careername}} 等级: {{role.rolelevel}} 游戏时间: {{role.gametime}} 金币: {{role.goldcoin}}</label>
</div>
}
}
</div>
<div id="rolebtn">
<div class="rolebtn" v-on:click="deletetip">删除角色</div>
<div class="rolebtn" v-on:click="toggle">创建角色</div>
</div>
</div>
<div id="rolemes">
@{
if (viewbag.talents.count == 0)
{
<div>玩家id：{{userid}}</div>
}
else
{
<div style="height:79%;width:100%;">
<div>玩家id：{{userid}}</div>
<div>角色id：{{roles[i].roleid}}</div>
<div>角色名称：{{roles[i].rolename}}</div>
<div>职业：{{roles[i].careername}}</div>
<div>游戏时间：{{roles[i].gametime}}</div>
<div>等级：{{roles[i].rolelevel}}</div>
<div>金币：{{roles[i].goldcoin}}</div>
<div>体力：{{talents[i].vit}}</div>
<div>力量：{{talents[i].str}}</div>
<div>魔力：{{talents[i].wis}}</div>
<div>敏捷：{{talents[i].dex}}</div>
<div>幸运：{{talents[i].luk}}</div>
<div>护甲：{{talents[i].armor}}</div>
<div>魔抗：{{talents[i].magicresistance}}</div>
<div>生命回复：{{talents[i].regeneration}}</div>
<div>攻击力：{{talents[i].atk}}</div>
<div>生命值：{{talents[i].hp}}</div>
<div>魔法强度：{{talents[i].mgk}}</div>
<div>法力值：{{talents[i].mp}}</div>
<div>速度：{{talents[i].speed}}</div>
<div>命中：{{talents[i].hit}}</div>
<div>闪避：{{talents[i].avd}}</div>
<div>掉率：{{talents[i].gainrate}}</div>
<div>暴击：{{talents[i].crit}}</div>
</div>
<div style="height:21%;width:100%;"><input class="rolebtn" id="btnsumbit" type="submit" value="进入游戏"/></div>
}
}
</div>
</form>
<form id="createrole" v-else="" key="create" onsubmit="return false;">
<div class="rightpart">
<div id="message">
<div class="attribute">玩家id：{{userid}}</div>
<div class="attribute">职业：{{careerpicked}}</div>
<div>名字：</div><input ref="pass" type="text" v-model="rolename">
<div class="attribute">{{pass}}</div>
<div class="attribute"></div>
<div class="attribute"></div>
<div class="attribute">属性：</div>
<div class="attribute">体力:{{attributes.vit}}</div>
<div class="attribute">力量:{{attributes.str}}</div>
<div class="attribute">魔力:{{attributes.wis}}</div>
<div class="attribute">敏捷:{{attributes.dex}}</div>
<div class="attribute">幸运:{{attributes.luk}}</div>
<button id="rerandom" type="button" v-on:click="rerandom">随机</button>
<div class="attribute"></div>
</div>
<div class="careerlist" v-for="(career,index) in careers">
<input type="radio" v-bind:id="career.id" class="roleradio" name="career" v-bind:value="career.name" v-model="careerpicked">
<label v-bind:for="career.id">{{career.name}}</label>
</div>
<div id="rolebtn">
<div class="rolebtn" v-on:click="createrole">创建</div>
<div class="rolebtn" v-on:click="toggle">返回</div>
</div>
</div>
<div class="rolemes"></div>
</form>
</transition>
<div id="cancel" v-if="tip" v-on:click="cancel">
</div>
<div id="tip" v-if="tip">
<div id="tiptext">{{tiptext}}<input type="password" style="height:20%;font-size:20px;" v-if="passwordshow" v-model="password" /></div>
<div id="tipbtn" v-on:click="btn(type)">{{tipbtn}}</div>
</div>
</div>
js
var aaa = new vue({
el: '#all',
data: {
userid:'@viewbag.userid',
roles: @html.raw(json.encode(viewbag.roles)),
roleshow: true,
careers: [
{
transfer:["骑士","卫士","处刑者"],
name: "战士",
id: "1"
},
{
transfer: ["死灵师", "元素师", "秘术师"],
name: "法师",
id: "2"
},
{
transfer: ["追猎者", "游侠", "锐眼"],
name: "射手",
id: "3"
},
{
transfer: ["酋长", "暴徒", "驯兽师"],
name: "勇士",
id: "4"
},
{
transfer: ["刺客", "欺诈师", "破坏者"],
name: "飞侠",
id: "5"
},
{
transfer: ["守护者", "圣宗", "判官"],
name: "僧侣",
id: "6"
}
],
talents: @html.raw(json.encode(viewbag.talents)),
attributes: {
vit: 1,
str: 1,
wis: 1,
dex: 1,
luk: 1
},
rolepicked: '',
careerpicked: '',
rolename: '',
pass: '无效的名称',
tiptext: '提示',
tipbtn: '关闭',
tip: false,
passwordshow: false,
password: '',
type: '关闭',
rid: 0,
},
computed: {
i: function () {
let num = 0;
for (var j = 0; j < this.talents.length; j++)
{
if (this.rid == this.talents[j].roleid)
{
num = j;
}
}
return num;
}
},
methods: {
deletetip: function () {
this.tip = true;
this.passwordshow = true;
this.tiptext = "请输入密码验证：";
this.tipbtn = "删除角色" + this.rolepicked;
this.type="删除"
},
btn: function (type) {
switch (type)
{
case "删除":
this.deleterole();
break;
case "关闭":
this.cancel();
break;
default:
this.cancel();
this.toggle();
break;
}
},
deleterole:function() {
let _self = this;
$.ajax({
url: "/ltgdgame.web/home/deleterole",
type: "post",
datatype: 'json',
data: { "userid": this.userid, "roleid": this.rid, "password": this.password },
success: function (data) {
if (data.result=="删除成功"){
for (var i = 0; i < _self.roles.length; i++)
{
if (_self.rolepicked == _self.roles[i].rolename)
{
if (_self.roles.length==1)
{
window.location.reload();
}
else{
_self.roles.splice(i, 1);
_self.talents.splice(i, 1);
}
}
}
}
_self.tiptext = data.result;
_self.passwordshow = false;
_self.password = "";
_self.tipbtn = "关闭";
_self.type = "关闭"
}
})
},
createrole: function () {
if (this.pass != "可用的名称") {
this.$refs['pass'].focus();
this.tip = true;
this.tiptext = "名字不可用";
this.tipbtn = "关闭";
this.type = "关闭";
}
else {
let _self = this;
$.ajax({
url: "/ltgdgame.web/home/createrole",
type: "post",
datatype: 'json',
data: {
"userid": this.userid,
"rolename": this.rolename,
"careername": this.careerpicked,
"vit": this.attributes.vit,
"str": this.attributes.str,
"wis": this.attributes.wis,
"dex": this.attributes.dex,
"luk": this.attributes.luk,
},
success: function (data) {
if (data.result != "false")
{
if(_self.roles.length != 0)
{
_self.roles.push(data.role);
_self.talents.push(data.talent);
_self.rolepicked = data.role.rolename;
}
else
window.location.reload();
_self.tip = true;
_self.tiptext = "创建成功";
_self.tipbtn = "返回";
_self.type = "返回";
}
else
{
_self.tip = true;
_self.tiptext = "创建失败";
_self.tipbtn = "关闭";
_self.type = "关闭";
}
}
})
}
},
cancel: function () {
this.tip = false;
this.passwordshow = false;
},
toggle: function () {
this.roleshow = !this.roleshow
},
isrepeat: function () {
let _self = this;
$.ajax({
url: "/ltgdgame.web/home/isrepear",
type: "post",
datatype: 'json',
data: {"rolename": this.rolename, },
success: function (data) {
_self.pass = data.result;
}
})
},
rerandom: function () {
this.attributes.vit = math.floor(math.random() * 10) + 1
this.attributes.str = math.floor(math.random() * 10) + 1
this.attributes.wis = math.floor(math.random() * 10) + 1
this.attributes.dex = math.floor(math.random() * 10) + 1
this.attributes.luk = math.floor(math.random() * 10) + 1
}
},
created: function () {
if (this.roles.length>0){
this.rolepicked = this.roles[0].rolename
}
this.careerpicked = this.careers[0].name
},
watch: {
rolename: function (newrolename, oldrolename) {
this.isrepeat();
},
rolepicked: function () {
let next = 0;
for (var i = 0; i < this.roles.length; i++) {
if (this.roles[i].rolename == this.rolepicked) {
next = this.roles[i].roleid;
}
}
if (this.rid != next) {
this.rid = next;
}
}
}
})
效果图的话，我大致都只是划分区域，美化什么的最懒了。所以也不贴css代码了
用户登录界面（这个页面是大学期间做的，没用vue，于是乎写了一堆jsjq的原生脚本）
角色选择界面
角色创建界面
后台代码用ef就很简单就不贴了
写出来的目的是想看看有没大牛能给我点建议，或者这么做是不是有什么错误
其实最根本原因是感觉写这东西能督促自己。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Net Core Web Api项目与在NginX下发布的方法
asp.net core3.1 引用的元包dll版本兼容性问题解决方案
IdentityServer4实现.Net Core API接口权限认证(快速入门)
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现
网友评论