.net MVC +EF+VUE做回合制游戏(一)
程序员文章站
2022-04-14 20:20:33
刚毕业的新人,工作的时候试过用.net 框架,但是我发现写的前端代码都非常多,要写很多很多的原生,然后最近在看vue.js觉得还不错,可以减少前端很多dom操作. 至于做的东西我是想做一个游戏,一个回合制类的游戏,想着就是前端点技能然后传回后端计算,然后利用VUE直接修改数据来达到血条的变化之类的。 ......
刚毕业的新人,工作的时候试过用.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就很简单就不贴了
写出来的目的是想看看有没大牛能给我点建议,或者这么做是不是有什么错误
其实最根本原因是感觉写这东西能督促自己。
下一篇: IT部门信息化正确打开方式
推荐阅读
-
.net MVC +EF+VUE做回合制游戏(二)
-
.net MVC +EF+VUE做回合制游戏(一)
-
.net mvc + layui做图片上传(一)
-
【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 登录界面前端样式和特效
-
【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 登录界面前端样式和特效_html/css_WEB-ITnose
-
【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 登录界面前端样式和特效
-
.net MVC +EF+VUE做回合制游戏(一)
-
.net MVC +EF+VUE做回合制游戏(二)
-
【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 登录界面前端样式和特效_html/css_WEB-ITnose
-
.net core mvc实现一个在线房间棋牌游戏微信支付和及时通讯的简易框架