使用 .NET Core 3.0 预览版、Web API 和 Visual Studio 2019 进行 ASP.NET Core Blazor 游戏开发
4.76/5 (9投票s)
如何使用 ASP.NET Core Blazor、.NET Core 3.0 预览版和 Visual Studio 2019 创建一个简单的游戏开发 Web 应用程序
引言
在本文中，我们将了解如何使用 ASP.NET Core Blazor、.NET Core 3.0 预览版和 Visual Studio 2019 创建一个简单的游戏开发 Web 应用程序。在这里，我们将创建“找出不同图片的游戏”。在这个游戏中，总共会问 5 个问题。在每个问题中，我们将显示 4 组图片，其中一张图片将与其他三张不同。用户必须从四张图片中找出不同的图片。如果用户从问题中选择了正确的不同图片，用户将获得 **10** 分。如果用户选择了错误的答案，那么他将获得 **-5** 分。在用户回答完所有 5 个问题后，将计算结果，如果用户得分达到 50 分，则用户赢得游戏；如果用户得分低于 50 分，则用户输掉游戏。
要使用 ASP.NET Core Blazor 创建此“找出不同图片”应用程序，您应该了解什么？
您需要具备以下基本知识
- 如果您是 Visual Studio 2019 的新手，请阅读我们之前的文章，其中详细解释了 Visual Studio 2019 的入门。
- 如果您是 ASP.NET Blazor 的新手，请阅读我们之前的文章，其中详细解释了如何使用 ASP.NET Core Blazor。
在本文中，我们将详细了解如何使用 ASP.NET Core Blazor 和 .NET Core 3.0 预览版以及 Visual Studio 2019 来开发我们的“找出不同图片”游戏。
背景
必备组件
- Visual Studio 2019
- .NET Core 3.0 预览版 SDK
- Blazor 扩展
Visual Studio 2019
如果您尚未安装 Visual Studio 2019，可以从此链接下载 Visual Studio 2019 并将其安装到您的计算机上。
.NET Core 3.0 预览版 SDK
安装 .NET Core 3.0 预览版 SDK。（您可以从此链接找到所有版本。）
下载并安装 .NET Core 3.0 预览版。
Blazor 扩展
下载 Blazor 扩展。
安装 Blazor 扩展以使用您的 Blazor 应用程序。
找出不同图片的游戏
首先，收集所有需要显示在问题中的图片。每个问题包含 4 组图片，其中一张图片应该不同。因此，尽可能多地收集图片以制作更多问题。我们将从问题集中随机显示问题，以避免重复显示问题。所以首先，我们需要为用户制作尽可能多的问题，这样他们才不会厌倦游戏。下载所有图片并为每张图片命名，在图片名称本身，我们用 O 表示正确，N 表示错误图片。作为此演示的示例，我们总共创建了 15 个问题，总共 15 * 4 张图片。您可以添加更多问题，使游戏更有趣。
Using the Code
步骤 1 - 创建 ASP.NET Core Blazor 应用程序
安装上述所有先决条件和 ASP.NET Core Blazor 扩展后，在桌面上点击 Start >> Programs >> Visual Studio 2019 >> Visual Studio 2019。点击 New >> Project。
点击 ASP.NET Core Web 应用程序，然后点击 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 Core 模板，我们需要启用“使用 .NET Core SDK 的预览版”。
为此，我们取消创建项目，然后在 Visual Studio 2019 中，转到 工具 并单击 选项。选择 项目和解决方案 >> 单击 .NET Core。
勾选“使用 .NET Core SDK 的预览版”，然后点击 确定 按钮。现在我们可以看到我们的 ASP.NET Core Blazor 模板了。
现在再次创建 ASP.NET Core Web 项目。我们可以看到，现在 SAP.NET core 的所有项目模板都适用于 ASP.NET Core 3.0。对于我们来说，我们选择 Blazor（ASP.NET Core 托管）项目，然后点击 创建。
创建 ASP.NET Core Blazor 应用程序后，请等待几秒钟。您将在解决方案资源管理器中看到以下结构。
当我们创建新的 ASP.NET Core Blazor 应用程序时，可以看到解决方案资源管理器中会自动创建 3 个项目。
客户端项目
第一个创建的项目是作为 `Client` 项目的 `BlazorCore.Client`，这里我们可以看到我们的解决方案名称是“`BlazorCore`”。这个项目将主要关注所有客户端视图。在这里，我们将添加所有将在浏览器客户端显示的页面视图。
我们可以看到这里已经添加了一些示例页面，我们还可以看到一个共享文件夹，就像我们的 MVC 应用程序一样，其中将有 *Shared* 文件夹和用于主页的 Layout 页面。在这里，在 Blazor 中，我们有充当主页的 `MainLayout` 和用于左侧菜单显示的 `NavMenu`。
服务器项目
顾名思义，此项目将用作 服务器 项目。此项目主要用于创建我们所有的控制器和 WEB API 控制器，以执行所有业务逻辑并使用 WEB API 执行 CRUD 操作。在我们的演示应用程序中，我们将在该 服务器 项目中添加一个 Web API，并将所有 WEB API 添加到我们的 客户端 应用程序中。此 服务器 项目将用于从 数据库 获取/设置数据，并且从我们的 客户端 项目中，我们将绑定或将结果发送到此服务器，以在数据库中执行 CRUD 操作。
共享项目
顾名思义，此项目类似于共享项目。此项目作为我们服务器项目和客户端项目的模型。在此共享项目中声明的模型将同时用于服务器和客户端项目。我们还在此处安装了项目所需的所有包；例如，要使用 Entity Framework，我们将所有包安装在此共享项目中。
运行以测试应用程序
运行应用程序时，可以看到左侧有导航，右侧包含数据。可以看到，默认的示例页面和菜单将显示在我们的 Blazor 网站中。我们可以使用这些页面，也可以删除它们并从我们自己的页面开始。
现在让我们看看如何添加新页面来创建我们自己的“找出不同图片”游戏。
添加图片
首先，在 *wwwroot* 内部添加一个新文件夹“*Images*”
在新添加的 *Images* 文件夹中，添加所有我们将用于游戏的图片。在这里，我们为 15 个问题添加了 48 张示例图片。
添加模型类
现在我们将在共享项目中创建一个模型类，用于处理 WEB API，并在客户端应用程序中用于显示问题。右键单击 共享项目 并单击 添加新类。
在这里，我们将类名设为 *gameImages.cs*，然后点击 添加 以在共享项目内部创建您的模型类。
在该类中，声明此属性以在我们的 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 API 控制器已创建。
我们添加下面的 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 视图 >> 输入您的页面名称。在这里，我们将其命名为 games.razor。
在 Razor 视图页面中，我们添加了三部分代码。第一部分是 Import 部分，我们在这里导入所有用于视图的引用和模型、HTML 设计和数据绑定部分，最后，我们有函数部分来调用所有 Web API，以便在我们的 HTML 页面中绑定，并执行客户端业务逻辑，以便在游戏的视图页面中显示。
导入部分
首先，我们导入 Razor 视图页面中所有需要的支持文件和引用。在这里，我们首先导入了将在视图中使用的 模型 类，还导入了 HTTPClient，用于调用 Web API 来显示问题并检查匹配的答案以计算答案。
@page "/games"
@using ShanuGameBlazor.Shared
@inject HttpClient Http
显示新游戏消息
当用户点击 新游戏 按钮时，我们将调用 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，那么我将显示用户输掉游戏的消息。
关注点
在本文中，我们使用 Web API 中的静态列表添加了游戏详情，为 15 个问题提供了固定的 48 张图片。您可以扩展此功能，从数据库加载问题和图片。希望大家喜欢这篇文章，在下一篇文章中，我们将看到更多使用 Blazor 的示例。使用 Blazor 真是太酷太棒了。
历史
- 2019-05-10: ShanuGameBlazor.zip