大家好，我是沙漠盡頭的狼。
抄了国外大佬的一个俄罗斯方块游戏，也将在线工具和在线游戏组件提取到Razor共享库，可以被 Dotnet9 网站和 Dotnet工具箱 网站复用，这篇分享游戏的搬运及Razor共享库的迁移过程，和这几天开发、部署遇到的一些问题与解决方案记录分享下。
行文目錄：
- 添加俄羅斯方塊遊戲
- 組件復用
- 遇到的問題及解決方案
- 總結
1. 添加俄羅斯方塊遊戲
1.1.遊戲參考:blazorgames
blazorgames項目信息
- GitHub：https://github.com/exceptionnotfound/BlazorGames
- 在線訪問地址：https://blazorgames.net/
倉庫截圖如下：
網站截圖：
該網站有系列文章教你怎麼用blazor開發7、8個在線小遊戲，課程算比較詳細，如上圖，遊戲有單人紙牌遊戲（solitaire）、俄羅斯方塊（tetris）、掃雷（minesweeper）等，其中俄羅斯方塊的系列文章截圖如下：
課程列表地址：https://blazorgames.net/tetris
1.2.添加到自己的項目
首先請先clone倉庫：https://github.com/exceptionnotfound/BlazorGames
作者代碼組織結構很清晰，先理解代碼結構：
- 1.2.1.
/Pages下的razor文件
为各个游戏页面，比如Tetris.razor，这个文件我们可以直接复制到自己的项目，去掉页面下方的文章链接即可。
- 1.2.2.
/Pages/Partials下的razor文件
为各个游戏的子组件，如/Pages/Partials/TetrisGridCell.razor为俄罗斯方块背景的单元格组件。
- 1.2.3.
/Models为各个游戏使用的Model类
如/Models/Tetris/下有俄罗斯方块的背景表格（Grid.cs）、单元格(Cell.cs)、方块（Block.cs）等定义类。
- 1.2.4.
wwwroot目录为项目资源目录
使用到的js庫、css樣式、圖片、聲音文件等都放在這裡，通過調試程式、閱讀代碼，知道如果要在自己的項目正常運行俄羅斯遊戲需要這些文件:
应用样式（css/app.cs)、游戏部分样式（css/games.css)、俄罗斯方块图片（images/tetrix）、游戏音乐播放和游戏分数的Cookie读写Js库（js/utilities.js）、游戏背景音乐文件（sounds/tetris-theme.ogg）等。
以上文件在熟悉後，就可以一邊拷貝到自己的項目一邊調試了，下面是前面提到的文件部分截圖
俄羅斯方塊背景的單元格組件：
俄羅斯方塊的model類等定義：
資源文件截圖：
2. 組件復用
原先dotnet9網站和dotnet工具箱網站的在線工具和在線遊戲代碼是複製了兩份，分別維護的，但其中90%代碼一樣，這是無法容忍的代碼冗餘。
站長考慮將原先的dotnet工具箱倉庫刪掉，代碼合併到dotnet9倉庫，將共享的組件提取到razor共享庫內，現改造後的共享庫目錄結構：
3個主工程：1是razor共享庫，2是dotnet9網站主工程，3是dotnet工具箱主工程，2和3都將1添加為項目引用。
razor共享庫代碼組織結構，目前已有的在線工具和在線遊戲組件：
組件代碼在前面幾篇文章都貼過，這裡略過，但遊戲頁面的路由這裡提一下：dotnet9網站和dotnet工具箱的網頁布局是不同的，相同的是裡面的內容，所以每個工具和遊戲在兩個工程里都添加了對應的頁面路由，比如下面的俄羅斯方塊頁面在兩個工程中的位置：
dotnet9中的俄羅斯方塊頁面：
dotnet工具箱的俄羅斯方塊頁面：
兩個頁面內容幾乎完全相同，不同的可能就是頁面標題了，相信還可以再優化。
优化不好几百字说清楚，有兴趣的看 Dotnet9源码 吧。
3. 遇到的問題及解決方案
開發dotnet9網站和dotnet工具箱過程中，包括部署有遇到一些問題，通過查閱資料、問技術群的一些大佬幾乎都得到了解決，這裡列出一些大家也可能遇到的問題，分享總結下。
3.1. server訪問連結過多
上篇站長對server訪問連結過多做了截圖，覺得是server的問題，技術群群友立馬做了反駁，是站長nginx配置有問題，沒有對socket有效配置才導致的頻繁連接，原文截圖如下：
解決nginx參考配置如下：
主要关注的节点配置是proxy_http_version 1.1，但站长原来是配置过的，昨晚只把proxy_set_header Connection keep-alive改为了proxy_set_header Connection "upgrade"，请群友验证，目前上面截图的问题貌似解决了，大家也可以打开Dotnet9网站验证下。
3.2. wasm直接打開子頁面404
通過dotnet工具箱網站首頁，再訪問其他子頁面是正常的，然而打開瀏覽器地址欄，直接粘貼子頁面訪問，網站會響應404，解決方案也是修改nginx配置：
location / {
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
主要是其中的try_files，至于什么意思请百度。
3.3.項目正常編譯，界面顯示黑塊
本来昨天站长已经发布了Dotnet工具箱关于俄罗斯方块的功能，但游戏的背景界面（黑色背景）老是显示不出来，搞了半天是组件内的组件没有正常加载，即没有将子组件命名空间加上@using Dotnetools.Share.Components.Partials。
原始代碼如下：
問題是通過f12調試網頁源碼發現的，發現子組件對應的html代碼並沒有編譯為html原生代碼，還是組件代碼，被直接編譯為字符串了，即顯示如下：
加上命名空間引用後，源碼顯示正常了，黑色背景也顯示出來了：
這個問題屬於不細心，共享庫提取後，沒有查看html中razor組件的引用是否正常，這個問題vs是不會給出異常提示的。。。
4. 總結
今天分享到這，有什麼工具需求請在下方issue連結中留言，十分感謝您的閱讀。
- 網站地址：blazor server版本網站=》https://dotonet9.com/， blazor wasm版本網站=》https://dotnetools.com/
- 網站源碼：https://github.com/dotnet9/dotnet9，issue=》https://github.com/dotnet9/dotnet9/issues
- .NET版本： .NET 8.0.0-preview.5.23280.8
- 微信技術群：添加站長微信（codewf），一定要備註【入群】2個字
- qq技術群：771992300