.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 == 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">角色名:&nbsp;{{role.rolename}}&nbsp;&nbsp;&nbsp;&nbsp;职业:&nbsp;{{role.careername}}&nbsp;&nbsp;&nbsp;&nbsp;等级:&nbsp;{{role.rolelevel}}&nbsp;&nbsp;&nbsp;&nbsp;游戏时间:&nbsp;{{role.gametime}}&nbsp;&nbsp;&nbsp;&nbsp;金币:&nbsp;{{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>

view code

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;
                        }
                    }
                            
            }
        })

view code

效果图的话，我大致都只是划分区域，美化什么的最懒了。所以也不贴css代码了

用户登录界面（这个页面是大学期间做的，没用vue，于是乎写了一堆jsjq的原生脚本）

角色选择界面

角色创建界面

 

后台代码用ef就很简单就不贴了

写出来的目的是想看看有没大牛能给我点建议，或者这么做是不是有什么错误

其实最根本原因是感觉写这东西能督促自己。