.net MVC +EF+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 == )
{
<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 == )
{
<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: ""
},
{
Transfer: ["死灵师", "元素师", "秘术师"],
Name: "法师",
id: ""
},
{
Transfer: ["追猎者", "游侠", "锐眼"],
Name: "射手",
id: ""
},
{
Transfer: ["酋长", "暴徒", "驯兽师"],
Name: "勇士",
id: ""
},
{
Transfer: ["刺客", "欺诈师", "破坏者"],
Name: "飞侠",
id: ""
},
{
Transfer: ["守护者", "圣宗", "判官"],
Name: "僧侣",
id: ""
}
],
talents: @Html.Raw(Json.Encode(ViewBag.Talents)),
attributes: {
VIT: ,
STR: ,
WIS: ,
DEX: ,
LUK:
},
RolePicked: '',
CareerPicked: '',
RoleName: '',
pass: '无效的名称',
tiptext: '提示',
tipbtn: '关闭',
tip: false,
passwordshow: false,
password: '',
type: '关闭',
rid: ,
},
computed: {
i: function () {
let num = ;
for (var j = ; 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 = ; i < _self.roles.length; i++)
{
if (_self.RolePicked == _self.roles[i].RoleName)
{
if (_self.roles.length==)
{
window.location.reload();
}
else{
_self.roles.splice(i, );
_self.talents.splice(i, );
}
}
}
}
_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 != )
{
_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() * ) +
this.attributes.STR = Math.floor(Math.random() * ) +
this.attributes.WIS = Math.floor(Math.random() * ) +
this.attributes.DEX = Math.floor(Math.random() * ) +
this.attributes.LUK = Math.floor(Math.random() * ) +
}
},
created: function () {
if (this.roles.length>){
this.RolePicked = this.roles[].RoleName
}
this.CareerPicked = this.careers[].Name
},
watch: {
RoleName: function (newRoleName, oldRoleName) {
this.isRepeat();
},
RolePicked: function () {
let next = ;
for (var i = ; 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 MVC +EF+VUE做回合制游戏（一）的更多相关文章
- .net MVC +EF+VUE做回合制游戏（二）
Emmm,游戏中的属性购买页面 话不多说先上代码 <form id="vue" action="/ltgdGame.Web/Main/Index" met ...
- 【Visual C++】游戏编程学习笔记之九：回合制游戏demo（剑侠客VS巡游天神）
本系列文章由@二货梦想家张程 所写,转载请注明出处. 作者:ZeeCoder 微博链接:http://weibo.com/zc463717263 我的邮箱:michealfloyd@126.com ...
- 网易回合制游戏录像批量下载（失效 不是因为代码 是因为网易官方关闭了录像网站 ：P）
最近在访问网易大话西游2的录像专区时,发现页面还是很早之前的板式,网易的编辑并没有打算重新美化的打算,不由得内心一寒,结合之前好几个回合制游戏的倒闭,让很多人回顾都没办法回顾, 而且,很多人现在也没有 ...
- Python制作回合制手游外挂简单教程（上）
引入: 每次玩回合制游戏的时候,反反复复的日常任务让人不胜其烦 玩问道的时候,我们希望能够自动刷道,玩梦幻希望能自动做师门.捉鬼等等 说明: 该外挂只能模拟鼠标键盘操作,并不能修改游戏数据 我这里使用 ...
- 表演的艺术，妖尾回合制战斗系统客户端设计[Unity]
妖尾历经几年开发,终于在今年6月底顺利上线,笔者从2017年初参与开发,主要负责妖尾战斗系统开发.战斗作为游戏的核心玩法系统,涉及很多技术点,希望能借几篇文字,系统性总结MMORPG战斗系统的开发经验 ...
- MVC+EF+esayui初试（一 布局加菜单显示）
最近都在做linq+ext.net的开发.这两天想学习下MVC和ef,刚好,在看ext.js的时候也喜欢上了esayui,所以就想用mvc+ef+esayui做一个汽车网后台管理来加强下.在这里也把我 ...
- Unity3D 回合制 网上源码 目前还在研究构思
我们已将回合制的战斗模式讲解得很清楚了.那么,如果在Unity3D游戏中实现一个回合制游戏呢?我们从最简单的一对一模式来设计回合制游戏的原型.我们可以游戏的状态划分为下面三种状态: 1. ...
- 回合对战制游戏第一篇（初识java）
回合对战制游戏第一篇 一,所谓的java. java是一门完全面向对象的编程语言,而之前所接触到的C语言是一门面向有一个过程的语音,对于两个的区别应该有一个清楚的认识. java的第一个内容. 类和对 ...
- 开源题材征集 + MVC&EF Core 完整教程小结
到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向 ...
随机推荐
- JavaScript中的trim自定义
先直接贴代码 String.prototype.trimfy=function (val){ var demo=String(this); if(demo.indexOf(val)>=0){ i ...
- NetCore版RPC框架NewLife.ApiServer
微服务和消息队列的基础都是RPC框架,比较有名的有WCF.gRPC.Dubbo等,我们的NewLife.ApiServer建立在网络库NewLife.Net之上,支持.Net Core,追求轻量级和高 ...
- 由清除float原理到BFC
关于浮动 设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界.普通元素不会对齐造成影响. 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决.例如 ...
- Python_排版函数
import textwrap doc='''Beautiful is better than ugly. Explicit is better than implicit. Simple is be ...
- PHP后端之验证码
PHP后端之验证码 前言: 打算写一些实际开发中遇到的东西.我这个人记性不好,觉得记下来,以后就算想找,也能找得到. PHP,可能很长一段时间都不会使用了.所以还是留一些记录. 另外还有一些服务器架设 ...
- springboot中配置文件application.properties的理解
前言 Spring Boot使用"习惯优于配置"(项目中存在大量的配置,此外还内置了一个习惯性的配置,让你无需手动进行配置)的理念让你的项目快速运行起来.所以,我们要想把Sprin ...
- spring中bean的scope属性理解
bean的scope属性有prototype,singleton,request, session几个属性 spring和struts2整合的时候,struts2的action要配置成scope=&q ...
- Python高级教程
关键字is 和 == 的区别 a = 'hello world' b = 'hello world' a == b #返回True a is b #返回False 注意:is 判断是否是一个ID, = ...
- 最值得收藏的java技术博客（Java篇）
第一个:java_my_life 作者介绍:找不到原作者信息.大概做了翻阅全部是2012年的博客. 博客主要内容:主要内容是关于Java设计模式的一些讲解和学习笔记,在相信对学习设计模式的同学帮助很大 ...
- WireShark基本抓包数据分析
WireShark抓包数据分析: 1.TCP报文格式 • 源端口.目的端口:16位长.标识出远端和本地的端口号. • 顺序号:32位长.表明了发送的数据报的顺序. • 确认号:32位长.希望收到 ...