使用.NET Core 3.0 预览版，Web API和Visual Studio 2019进行ASP.NET Core Blazor游戏开发

最新推荐文章于 2024-05-29 16:05:53 发布

寒冰屋

最新推荐文章于 2024-05-29 16:05:53 发布

阅读量2.3k

点赞数 1

分类专栏： ASP.NET CORE CSharp.NET 架构及框架 MVC 文章标签： ASP.NET Core VS2019 .NET Core 3.0 Blazor

CSharp.NET 同时被 3 个专栏收录

1153 篇文章 53 订阅

订阅专栏

ASP.NET CORE

1099 篇文章 54 订阅

订阅专栏

架构及框架

622 篇文章 16 订阅

订阅专栏

介绍

使用ASP.NET核心Blazor创建这个奇怪的图像输出应用程序应该知道什么？

背景

先决条件

Visual Studio 2019

.NET Core 3.0 Preview SDK

Blazor扩展

奇怪图像输出游戏

使用代码

第1步——创建ASP.NET Core Blazor应用程序

下载源代码 - 562.3 KB

介绍

Image 1 for ASP.NET Core Blazor Game Development using .NET Core 3.0 Preview, Web API and Visual Studio 2019

在本文中，我们将看到如何使用ASP.NET Core Blazor，.NET Core 3.0预览版和Visual Studio 2019创建一个简单的游戏开发Web应用程序。在这里，我们将创建“Odd Image Out Game”。在这个游戏中，总共会提出5个问题。在每个问题中，我们将显示4组图像，其中一个图像将与其他图像不同。用户必须从四个图像中挑选奇怪图像。如果用户从问题中选择正确的奇怪图像，则用户将获得10分。如果用户选择了错误的答案，那么他将获得-5分。在用户已经回答了所有5个问题之后，将计算结果，并且如果用户分数是50，则用户赢得游戏，并且如果用户得到少于50个点，则用户输掉游戏。

使用ASP.NET核心Blazor创建这个奇怪的图像输出应用程序应该知道什么？

您需要具备以下基本知识：

Visual Studio 2019
ASP.NET Blazor

在本文中，我们将详细介绍如何使用.NET Core 3.0预览版、Visual Studio 2019和ASP.NET Core Blazor来开发我们奇怪的图像输出游戏。

背景

先决条件

Visual Studio 2019
.NET Core 3.0 Preview SDK
Blazor扩展

Visual Studio 2019

如果尚未安装Visual Studio 2019，则可以从此链接下载Visual Studio 2019 并将其安装在您的计算机上。

.NET Core 3.0 Preview SDK

安装.NET Core 3.0 Preview SDK。（您可以从此链接中找到所有版本。）

下载并安装.NET Core 3.0预览版。

Blazor扩展

下载Blazor扩展。

安装Blazor Extension以使用Blazor应用程序。

奇怪图像输出游戏

首先，收集所有需要为问题显示的图像。每个问题带有4组图像，其中一个图像应该是不同的。因此，收集尽可能多的图像以提出更多问题。我们将从问题集中随机显示问题，以避免重复显示问题。首先，我们需要为用户提出尽可能多的问题，以免对游戏感到厌倦。下载完所有图像并为每个图像和图像名称本身提供正确的名称后，我们给出了答案为O为Ok，N为Wrong Image。对于本演示的示例，我们总共创建了15个问题，总共有15 * 4个图像。您可以添加更多问题以使游戏更有趣。

使用代码

第1步——创建ASP.NET Core Blazor应用程序

安装上面列出的所有先决条件和ASP.NET Core Blazor扩展后，单击桌面上的开始 >> 程序 >> Visual Studio 2019>> Visual Studio 2019。单击新建 >> 项目。

单击ASP.NET Core Web Application，然后单击Next。

输入项目名称，然后单击“创建”按钮。

现在我们可以看到，对于ASP.NET Core 3.0，只列出了Blazor模板。即使我们创建Blazor项目并运行它也会显示错误为“当前的.NET SDK不支持以.NET Core 3.0为目标。可以是.NET Core 2.2或更低版本，也可以使用支持.NET Core 3.0的.NET SDK版本。WebApplication2.Server”。

为了避免错误并列出.NET Core 3.0 预览版的所有ASP.NET核心模板，我们需要启用“使用.NET Core SDK的预览”。

为此，我们取消创建项目，在Visual Studio 2019中，转到“工具”并单击“选项”。选择项目和解决方案 >>单击.NET Core。

检查.NET Core SDK 的使用预览，然后单击“确定”按钮。

现在再次创建ASP.NET Core Web项目。我们现在可以看到，SAP.NET核心的所有项目模板都可用于ASP.NET Core 3.0。对于我们，我们选择Blazor（ASP.NET Core托管）项目并单击create。

创建ASP.NET Core Blazor应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。

当我们创建新的ASP.NET Core Blazor应用程序时，我们可以看到将有3个项目将在解决方案管理器中自动创建。

客户端项目

作为项目创建的第一个Client项目是我们的BlazorCore.Client，在这里，我们可以看到我们的解决方案名称为“BlazorCore”。该项目将主要关注所有客户端视图。在这里，我们将添加所有页面视图，以便在浏览器的客户端显示。

我们可以看到这里已经添加了一些示例页面，我们还可以看到像我们的MVC应用程序这样的共享文件夹，我们将在其中拥有Master页面的Shared文件夹和Layout页面。在这里，在Blazor中，我们有MainLayout，它将像Master页面一样工作，还有NavMenu用于左侧菜单显示。

服务端项目

如名称所示，该项目将用作Server项目。该项目主要用于创建所有控制器和WEB API控制器，以执行所有业务逻辑并使用WEB API执行CRUD操作。在我们的演示应用程序中，我们将在此Server项目中添加Web API 以及我们的Client应用程序中的所有WEB API 。该Server项目的工作方式于从Database获取/设置数据和从Client项目中获取/设置数据类似，我们将结果绑定或发送到此服务器，以在数据库中执行CRUD操作。

共享项目

顾名思义，这个项目就像一个共享项目。该项目用作我们的服务端项目和客户端项目的模型(Model)。在此共享项目中声明的模型(Model)将在服务端和客户端项目中使用。我们还在这里安装了项目所需的所有软件包; 例如，要使用实体框架，我们在此共享项目中安装所有包。

运行以测试应用程序

当我们运行应用程序时，我们可以看到左侧有导航，右侧包含数据。我们可以看到默认的示例页面和菜单将显示在我们的Blazor网站上。我们可以使用这些页面或将其删除，然后从我们自己的页面开始。

现在让我们看看如何添加新页面来创建我们自己的奇怪图像输出游戏。

添加图像

首先，让我们在wwwroot中添加一个新文件夹“Images ” ：

在新添加的Images文件夹中，添加我们将用于游戏的所有图像。在这里，我们为15个问题添加了48个图像样本。

添加模型类

现在，我们将在共享项目中创建一个模型类，用于使用WEB API和我们的客户端应用程序来显示问题。右键单击“共享项目”，然后单击“添加新类”。

在这里，我们将类名称作为gameImages.cs，然后单击Add以创建模型类。内部共享项目。

在类中，声明此属性以在我们的WEB API控制器和客户端应用程序中使用。

public class gameImages
    {
        public string id { get; set; }
        public string Image1 { get; set; }
        public string Image2 { get; set; }
        public string Image3 { get; set; } 
        public string Image4 { get; set; }
        public string Result { get; set; }
    }

为获取游戏的图像细节创建Web API

要创建我们的WEB API控制器，请右键单击我们的服务端项目Controllers文件夹。单击添加新控制器。

在这里，我们将创建一个空的WEB API控制器，以便仅从列表中获取图像详细信息。

在这里，我们将WEB API控制器名称命名为“GameData”，我们可以看到我们的新WEB控制器已经创建。

我们添加以下get方法来获取所有游戏图像，为此，在这里，我们不使用数据库，而是将所有图像细节添加到列表中，并以的Enumerable形式返回列表，在我们的客户端，我们将收到JSON结果并显示所有的游戏问题和图像。

//api/GameData/AllgameImages
        [HttpGet("[action]")]
        public IEnumerable<gameImages> AllgameImages()
        {
            List<gameImages> gamedata = new List<gameImages>(); 

            gamedata.Add(new gameImages
            {
                id = "1",
                Image1 = "A1_N.png",
                Image2 = "A2_O.png",
                Image3 = "A3_O.png",
                Image4 = "A4_O.png",
                Result = "1"
            });
            gamedata.Add(new gameImages
            {
                id = "2",
                Image1 = "AN1_O.png",
                Image2 = "AN2_O.png",
                Image3 = "AN3_N.png",
                Image4 = "AN4_O.png",
                Result = "3"
            });
            gamedata.Add(new gameImages
            {
                id = "3",
                Image1 = "C1_O.png",
                Image2 = "C2_N.png",
                Image3 = "C3_O.png",
                Image4 = "C4_O.png",
                Result = "2"
            });
            gamedata.Add(new gameImages
            {
                id = "4",
                Image1 = "F1_O.png",
                Image2 = "F2_O.png",
                Image3 = "F3_N.png",
                Image4 = "F4_O.png",
                Result = "3"
            });
            gamedata.Add(new gameImages
            {
                id = "5",
                Image1 = "G1_N.png",
                Image2 = "G2_O.png",
                Image3 = "G3_O.png",

                Image4 = "G4_O.png",
                Result = "1"
            });
            gamedata.Add(new gameImages
            {
                id = "6",
                Image1 = "H1_O.png",
                Image2 = "H2_N.png",
                Image3 = "H3_O.png",
                Image4 = "H4_O.png",
                Result = "2"
            });
            gamedata.Add(new gameImages
            {
                id = "7",
                Image1 = "J1_N.png",
                Image2 = "J2_O.png",
                Image3 = "J3_O.png",

                Image4 = "J4_O.png",
                Result = "1"
            });
            gamedata.Add(new gameImages
            {
                id = "9",
                Image1 = "S1_O.png",
                Image2 = "S2_N.png",
                Image3 = "S3_O.png",

                Image4 = "S4_O.png",
                Result = "2"
            });
            gamedata.Add(new gameImages
            {
                id = "9",
                Image1 = "N1_N.png",
                Image2 = "N2_O.png",
                Image3 = "N3_O.png",

                Image4 = "N4_O.png",
                Result = "1"
            });
            gamedata.Add(new gameImages
            {
                id = "10",
                Image1 = "NW1_O.png",
                Image2 = "NW2_N.png",
                Image3 = "NW3_O.png",

                Image4 = "NW4_O.png",
                Result = "2"
            });
            gamedata.Add(new gameImages
            {
                id = "11",
                Image1 = "O1_O.png",
                Image2 = "O2_O.png",
                Image3 = "O3_O.png",

                Image4 = "O4_N.png",
                Result = "4"
            });
            gamedata.Add(new gameImages
            {
                id = "12",
                Image1 = "P1_O.png",
                Image2 = "P2_N.png",
                Image3 = "P3_O.png",

                Image4 = "P4_O.png",
                Result = "2"
            });
            gamedata.Add(new gameImages
            {
                id = "13",
                Image1 = "SC1_O.png",
                Image2 = "SC2_O.png",
                Image3 = "SC3_O.png",

                Image4 = "SC4_N.png",
                Result = "4"
            });
            gamedata.Add(new gameImages
            {
                id = "14",
                Image1 = "T1_N.png",
                Image2 = "T2_O.png",
                Image3 = "T3_O.png",

                Image4 = "T4_O.png",
                Result = "1"
            });
            gamedata.Add(new gameImages
            {
                id = "15",
                Image1 = "WA1_O.png",
                Image2 = "WA2_O.png",
                Image3 = "WA3_N.png",

                Image4 = "WA4_O.png",
                Result = "3"
            });
            return gamedata.AsEnumerable();
        }

为了测试Get方法，我们可以运行我们的项目并复制GET方法API路径。在这里，我们可以看到获取api / GameData / AllgameImages /的 API路径。

运行程序并粘贴API路径以测试输出。

使用客户端项目

添加Razor视图。

要添加Razor视图页面，请右键单击Client项目中的Pages文件夹。单击添加 >> 新项目。

选择Razor View >>输入您的页面名称。在这里，我们将名称命名为games.razor。

在Razor视图页面中，我们添加了3部分代码。第一个是Import部分，我们导入在视图、HTML设计和数据绑定部分中使用的所有引用和模型，最后，我们有函数部分来调用HTML页面中的所有Web API进行绑定，并执行客户端业务逻辑，以便在视图页面中显示游戏。

导入部分

首先，我们在Razor视图页面中导入所有需要的支持文件和引用。在这里，我们首先导入了要在视图中使用的Model类，并且还导入了HTTPClient，用于调用Web API以显示问题并检查匹配答案以计算答案。

@page "/games"
@using ShanuGameBlazor.Shared
@inject HttpClient Http

显示新游戏消息

当用户点击New Game按钮时，我们将调用该FirstQuestion()方法，显示并隐藏相关的表格行以显示问题。并调用displayQuestion()方法来显示第一个问题。

@if (showGameStart == true)
     {
         <tr>
             <td align="center">
                 <h1>
                     Shanu Blazor Odd Image Out Game
                 </h1>
                 <br><br>
                 <button type="submit"
                 class="btn btn-success"
                 onclick=@FirstQuestion style="
                 background-color:#3f9835;color:#FFFFFF;
                 border-color:#f6f803;border-style:dashed;
                 width:220px">Start Game </button>
                 <br><br>

                 Find the Odd Image from the Given four Images.
                 You will be having 5 questions.<br>
                 Answer all the 5 Question .
                 <br>Wrong Answer will get -5 points
                 and correct answer will get 10 Points.<br>
                 If user answer all the 5 Questions correctly
                 then they are the winner.

             </td>
         </tr>
     }

函数

在函数上，首先我们创建了该OnInitAsync方法。在这个方法中，首先我们得到所有WEB API JSON结果并将其存储在数组中以便在我们的游戏中使用。

protected override async Task OnInitAsync()
{
    gamesimg = await Http.GetJsonAsync<gameImages[]>("api/GameData/AllgameImages");
}

当用户单击“第一个问题”按钮时，我们会隐藏“游戏开始表”行并显示游戏页面表行。

void FirstQuestion() {
    showGameStart = false;
 showGame = true;
 showresult = false;
 displayQuestion();
}

显示新的游戏问题

当用户点击新游戏时，我们将调用该displayQuestion()方法从我们创建的问题集中选择随机问题，并在HTML页面中显示每个问题图像。

@if (showGame == true)
        {
            <tr>
                <td align="Center">
                    <table class="table">

                        <tr style="background-color:#336699 ; color:#FFFFFF ;
                            border: solid 1px #659EC7;">
                            <td align="right" colspan="2">
                                <table class="table">
                                    <tr>
                                        <td colspan="4" align="center" 

                                         style="color:#FFFFFF;">
                                         <h1> Shanu Blazor Odd Image Out Game </h1></td>
                                    </tr>
                                    <tr>

                                        <td style="color:#FFFFFF;font-size:x-large">
                                            Question :  @questionCount
                                        </td>
                                        <td style="color:#FFFFFF;font-size:x-large;" 

                                         colspan="2" align="center">

                                            <img src="Images/coin.png" 

                                                 width="48px" height="48px">

                                        </td>
                                        <td style="color:#FFFFFF;font-size:x-large;">
                                            Total points :  @totalPoints
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td align="center" style=" background-color:#FFFFFF; 
                                border: dashed 2px #e44a10; padding:10px;width:50%;">
                                <img src="Images/@Image1" width="120px" height="120px" 

                                     onclick=@(() => findAnswer("1")) />

                            </td>
                            <td align="center" style=" background-color:#FFFFFF; 
                                border: dashed 2px #e44a10; padding:10px;width:50%;">
                                <img src="Images/@Image2" width="120px" height="120px" 

                                     onclick=@(() => findAnswer("2")) />
                            </td>
                        </tr>
                        <tr>
                            <td align="center" style=" background-color:#FFFFFF; 
                                border: dashed 2px #e44a10; padding:10px;width:50%;">
                                <img src="Images/@Image3" width="120px" height="120px"

                                     onclick=@(() => findAnswer("3")) />
                            </td>
                            <td align="center" style=" background-color:#FFFFFF; 
                                border: dashed 2px #e44a10; padding:10px;width:50%;">
                                <img src="Images/@Image4" width="120px" height="120px" 

                                     onclick=@(() => findAnswer("4")) />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center">                     

                    Find the Odd Image from the Given four Images.
                    You will be having 5 questions.<br>
                    Answer all the 5 Question .
                    <br>Wrong Answer will get -5 points and 
                    correct answer will get 10 Points.<br>
                    If user answer all the 5 Questions correctly then they are the winner.

                </td>
            </tr>
        }

函数代码

void displayQuestion() {
        questionCount =questionCount +1;
        Random random = new Random();
        int totalcounts = gamesimg.Count();
        randomQuestion=random.Next(1,totalcounts);
        Image1 = gamesimg[randomQuestion].Image1;
        Image2 = gamesimg[randomQuestion].Image2;
        Image3 = gamesimg[randomQuestion].Image3;
        Image4 = gamesimg[randomQuestion].Image4;
        ImageAnswer =gamesimg[randomQuestion].Result;
    }

找到答案

现在我们已经显示了问题，接下来是什么。是的，在每个问题图片中点击，我们需要找到正确的答案。在每个图像点击事件中，我们将调用该findAnswer(1)方法来检查每个问题答案，并计算结果以向用户显示得分，并显示下一个问题。在这个方法中，我们将为每个按顺序点击的问题传递参数1,2,3,4，并在每个问题答案中，我们将存储答案Number。我们将比较用户点击的图像编号和每个问题的答案。如果两者都匹配，那么我们将分数添加10，如果答案是错误的，那么我们将在总分数上加-5。最后，我们将显示用户要玩的下一个问题。

// to find the Answer
void findAnswer(string checkvals) {
    if (checkvals == ImageAnswer)
    {

        totalPoints = totalPoints + 10;
    }
    else
    {
        totalPoints = totalPoints-5;
    }
    counterval = counterval + 1;

    if(counterval==5)
    {

        displayResult();
        return;
    }
    displayQuestion();
}

在这里，我们可以看到我们将计算答案并向用户显示下一个问题，并获得总积分。

在此期间，我们将检查问题的计数器值。如果用户总共回答了5个问题，那么我们将调用该displayResult()方法向用户显示最终结果。

显示最终结果

在此方法中，我们将检查用户的总分数并显示结果。

void displayResult() {

        if (totalPoints >= 50)
        {
            Resuts = " Wow :) You have answered all the 5 questions correctly 
                       and won the Game.Good Job " ;
            wonImage = "Won.png";
        }
        else
        {
            Resuts = "Sorry You lose the game :( .
                      Your Total points are " + totalPoints + " out of 50 points"; 
            wonImage = "Lose.png";
        }   
        showGameStart = false;
         showGame = false;
        showresult = true;
}

赢了比赛

如果积分大于或等于50，那么我们将在用户赢得游戏时显示该消息。

输了比赛

如果积分小于50，则我将在用户输掉游戏时显示该消息。

原文地址：https://www.codeproject.com/Articles/4051646/ASP-NET-Core-Blazor-Game-Development-using-NET-Cor

寒冰屋

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用.NET Core 3.0 预览版，Web API和Visual Studio 2019进行ASP.NET Core Blazor游戏开发

目录介绍使用ASP.NET核心Blazor创建这个奇怪的图像输出应用程序应该知道什么？背景先决条件Visual Studio 2019.NET Core 3.0 Preview SDKBlazor扩展奇怪图像输出游戏使用代码第1步——创建ASP.NET Core Blazor应用程序客户端项目服务端项目共享项目运行以测试应用程序添加图像...
复制链接

扫一扫