大家好，我是沙漠盡頭的狼。
抄了國外大神的一個俄羅斯方塊遊戲，也將線上工具和線上遊戲元件提取到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