こんにちは、私は砂漠の果ての狼です。
抄了国外大佬的一个俄罗斯方块游戏，也将在线工具和在线游戏组件提取到Razor共享库，可以被 Dotnet9 网站和 Dotnet工具箱 网站复用，这篇分享游戏的搬运及Razor共享库的迁移过程，和这几天开发、部署遇到的一些问题与解决方案记录分享下。
テキストカタログ：
- Tetrisゲーム追加
- コンポーネントの再利用
- 直面した問題と解決策
- まとめまとめまとめ
1. Tetrisゲーム追加
1.1.ゲームリファレンスBlazorGames
-
- BlazorGamesプロジェクト情報 **
- GitHub：https://github.com/exceptionnotfound/BlazorGames
- オンライン·アクセスhttps//www.example.com
倉庫のスクリーンショットはこちら：
ウェブサイトのスクリーンショット：
このサイトには、Blazorを使用して7、8のオンラインミニゲームを開発する方法を教える一連の記事があります。コース計算は比較的詳細です。上の写真のように、ゲームはソリティアゲーム（Solitaire）、テトリス（Tetris）、地雷除去（Minesweeper）などがあります。
コース一覧アドレスhttps//www.example.com
1.2.自分のプロジェクトに追加する
まずCloneリポジトリhttps//www.example.com
コード構造は明確で、まずコード構造を理解してください。
- 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）等。
上記のファイルに慣れた後、デバッグしながら自分のプロジェクトにコピーすることができます。以下は、前述のファイルのスクリーンショットです。
テトリス背景のセルコンポーネント
テトリスのモデルクラスなどの定義：
Resource Fileのスクリーンショット：
2. コンポーネントの再利用
オリジナルのDotnet 9サイトとDotnet Toolboxサイトのオンラインツールとオンラインゲームコードは2コピーされ、別々に維持されていたが、コードの90%は同じであり、コードの冗長性は容認できなかった。
ウェブマスターは、元のDotnet Toolboxリポジトリを削除し、コードをDotnet 9リポジトリにマージし、共有コンポーネントをRazor共有ライブラリに抽出し、共有ライブラリディレクトリ構造を変更することを検討しています。
1はRazor共有ライブラリ、2はDotnet 9ウェブサイト、3はDotnet Toolboxのメインプロジェクトであり、2と3はプロジェクト参照として1を追加します。
Razorはライブラリのコード構造、既存のオンラインツール、オンラインゲームコンポーネントを共有しています。
コンポーネントコードは、以前のいくつかの記事で投稿されていますが、ここではスキップしますが、ゲームのページのルーティングはここで言及します：Dotnet 9ウェブサイトとDotnetツールボックスのページレイアウトは異なり、同じ内容なので、各ツールとゲームは、2つのプロジェクト内の次のテトリスページの位置など、対応するページルーティングを追加します：
Dotnet 9のTetrisページ：
Dotnet Toolboxのテトリスページ：
2つのページの内容はほぼ同じですが、違いはページタイトルかもしれませんが、再最適化できると思います。
优化不好几百字说清楚，有兴趣的看 Dotnet9源码 吧。
3. 直面した問題と解決策
Dotnet 9ウェブサイトとDotnetツールボックスの開発プロセスは、展開を含むいくつかの問題が発生し、データを参照し、技術グループの一部の大物に尋ねてほぼ解決されており、ここでは誰もが遭遇する可能性のあるいくつかの問題をリストし、要約を共有します。
3.1.サーバーアクセスリンクが多すぎます
ウェブマスターは、サーバーアクセスリンクのあまりにも多くのスクリーンショットを作成し、サーバーの問題であると感じ、技術グループの友人はすぐに反論し、ウェブマスター nginxの構成に問題があり、ソケットの効果的な構成がない頻繁な接続、元のスクリーンショットは次のとおりです：
Nginxリファレンス設定は以下のとおりです。
主要关注的节点配置是proxy_http_version 1.1，但站长原来是配置过的，昨晚只把proxy_set_header Connection keep-alive改为了proxy_set_header Connection "upgrade"，请群友验证，目前上面截图的问题貌似解决了，大家也可以打开Dotnet9网站验证下。
3.2. Wasm直接サブページ40 4を開く
Dotnet Toolboxウェブサイトのホームページを介して、他のサブページにアクセスするのは通常ですが、ブラウザのアドレスバーを開き、サブページに直接貼り付けると、ウェブサイトは40 4に応答し、解決策は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。
オリジナルコードは以下のとおり。
問題は、F 12デバッグWebソースコードを通じて発見され、対応するサブコンポーネントのHTMLコードがHTMLネイティブコードにコンパイルされていないか、コンポーネントコードが直接文字列にコンパイルされていることがわかりました。
名前空間参照を追加すると、ソースコードは正常に表示され、黒い背景も表示されます。
この問題は不注意であり、共有ライブラリが抽出された後、HTML内のrazorコンポーネントへの参照が正常かどうかを確認しなかった場合、この問題VSは例外的なヒントを与えません。
4. まとめまとめまとめ
今日これを共有するために、ツールの要件は以下の問題リンクにコメントしてください。読んでいただきありがとうございました。
- Webサイトアドレス：Blazor Server版Webサイト="httdotonet9.com/，Blazor Wasm版Webサイト=" httwww.example.com
- Webサイトのソースコード：https//github.com/dotnet9/dotnet9 Issue ="https//github.com/dotnet9/dotnet9/issues
- .NET版本： .NET 8.0.0-preview.5.23280.8
- WeChat技術グループ：ウェブマスター WeChat（codewf）を追加し、“グループに入る”2つの単語をメモしてください
- QQ技術グループ：77 1992，30 0