.net MVC +EF+VUE做回合制游戲(二)

来源:https://www.cnblogs.com/long7long/archive/2018/11/28/10035218.html
-Advertisement-
Play Games

Emmm,游戲中的屬性購買頁面 話不多說先上代碼 <form id="vue" action="/ltgdGame.Web/Main/Index" method="post"> <input id="back" type="submit" value="返回" /> <div id="VIT"> < ...


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}}耐力之書&nbsp;數量:<input style="width:7%;"  v-model="booknums[index].num1" type="number" min="1" step="1">&nbsp;價格:{{level.cost*booknums[index].num1}}&nbsp;+{{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}}力量之書&nbsp;數量:<input style="width:7%;" v-model="booknums[index].num2" type="number" min="1" step="1">&nbsp;價格:{{level.cost*booknums[index].num2}}&nbsp;+{{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}}幸運之書&nbsp;數量:<input style="width:5%;" v-model="booknums[index].num3" type="number" min="1" step="1">&nbsp;價格:{{level.cost*booknums[index].num3}}&nbsp;+{{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}}魔力之書&nbsp;數量:<input style="width:7%;" v-model="booknums[index].num4" type="number" min="1" step="1">&nbsp;價格:{{level.cost*booknums[index].num4}}&nbsp;+{{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}}敏捷之書&nbsp;數量:<input style="width:7%;" v-model="booknums[index].num5" type="number" min="1" step="1">&nbsp;價格:{{level.cost*booknums[index].num5}}&nbsp;+{{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>
View Code

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: '屬性值'
                },]
            }]
        })
    }
View Code

這裡用到了一個百度的Echart插件

屬性方面的設定我先隨便給了值,我感覺等幾個變強的要素都做好了再根據怪物屬性來調整這些。

 

 

 可多選,可選擇數量,購買後直接數值改變不刷新頁面。

下一個打算做裝備頁面。。。過幾天更新


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • @using OP.WebUI.Areas.Stock.Models @*約定如下: 調用 SetViewBag_Rooms 方法設置 ViewBag.Rooms *@ 所屬庫房 樓層 using System.Collections.Generic; using Syst... ...
  • 面對大數據時代企業紛紛開始了信息化建設,成立IT部門。對一家企業來說信息是至關重要,如果你問老闆每天最想看到得是什麼,那一定是數據信息。 一個公司其核心是業務平臺,如何提高公司的營業額就要提高業務平臺的管理模式,資源不清晰、信息孤島等這都是舊模式的弊端,信息化的目的是要使企業充分開發和有效利用信息資 ...
  • 首先申明是我的習慣思維,經常這樣寫: var item=db.tableName.FirstOrDefault(ii= ....); if(item==null) { item=new ...; item.columnA=...; item.columnB=...; db.tableName.Add ...
  • 今天搞柱形圖的時候,發現了一個更簡單的用法。那就是直接使用帶all的那個js文件 基本步驟: 1.為ECharts準備一個具備大小(寬高)的Dom 2.ECharts的js文件引入(echarts-all.js) 3.直接基於準備好的dom,初始化echarts圖表,不需要require var c ...
  • 14、Longest Common Prefix Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return a ...
  • 正則:^(0\.\d+|[1-9][0-9]|1)$ TextBox綁定正則驗證 <TextBox x:Name="txb" MaxLength="6" Margin="1 0 0 0" Width="40" > <TextBox.Text> <Binding Path="Opacity" Vali ...
  • 大概的翻看了一下這本書,這本[C# 7 and .NET Core 2.0 High Performance](http://www.csharptools.cn/post/11.html)內容要好很多,這裡先放出對應目錄,有興趣的朋友,可以到中國最大IT盜版書網站里找這本書。 ...
  • C# -- Lambda 表達式的使用 Lambda 表達式是作為對象處理的代碼塊(表達式或語句塊)。 它可作為參數傳遞給方法,也可通過方法調用返回。 Lambda 表達式是可以表示為委托的代碼,或者表示為表達式樹的代碼,它所表示的表達式樹可以編譯為委托。 Lambda 表達式的特定委托類型取決於其 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...