演習 - Blazor
この演習では、Blazor プロジェクトを作成し、モジュール全体を通して "コネクト フォー" ゲームになるアプリの構築を開始します。
新しい Blazor プロジェクトを作成する
まず、Visual Studio 2022 を使用して、ゲーム用の新しいプロジェクトを作成しましょう。
[ファイル] > [新規] > [プロジェクト] メニューの順に選択して、Visual Studio 2022 で新しい Blazor アプリを作成します。
テンプレートの一覧から [Blazor Web アプリ] を選択し、それに ConnectFour という名前を付けます。 [次へ] を選択します。
フレームワークのバージョンでは、[.NET 8] を選択します。 [認証の種類] を [なし]、[対話型レンダリング モード] を [サーバー]、[インタラクティビティの場所] を [ページ/コンポーネントごと] にそれぞれ設定する必要があります。 他のオプションはすべて既定値のままにしておきます。
このアクションにより、アプリを含む ConnectFour ディレクトリが作成されます。
Visual Studio 2022 で F5 キーを押してアプリを実行します。
ブラウザーで Blazor アプリが実行されていることを確認できるようになりました。
おめでとうございます。 最初の Blazor アプリが作成されました。
ボード コンポーネントを作成する
次に、ゲームでプレイヤーが使用するゲーム ボード コンポーネントを作成しましょう。 コンポーネントは、HTML と C# の組み合わせである Razor 構文を使って定義します。
Visual Studio のソリューション エクスプローラーで [コンポーネント] フォルダーを右クリックします。 コンテキスト メニューから [追加] > [Razor コンポーネント] の順に選択し、ファイルに Board.razor という名前を付けます。
このコンポーネントを使って、ゲームボードのレイアウトに必要なすべてのものを保持し、それとの対話を管理します。 この新しいコンポーネントの初期の内容は、
h3
タグと、C# コードを記述する場所を示す@code
ブロックです。<h3>Board</h3> @code { }
Components/Pages/Home.razor ファイルを開き、'PageTitle' タグを使用して 3 行目以降のすべてをクリアして、
Home
ページを準備します。@page "/" <PageTitle>Home</PageTitle>
新しいコンポーネントのファイル名と一致する
<Board />
タグを追加して、Board
コンポーネントをHome
ページに追加します。@page "/" <PageTitle>Index</PageTitle> <Board />
変更内容を確認するには、F5 キーを使用してアプリを実行します。 アプリが既に実行されている場合は、[実行/続行] ボタンの横にある [ホット リロード] ボタンをタップして、実行中のアプリに変更を適用します。
ヒント
ファイルを変更するたびに実行中のアプリに変更を適用するには、[ホット リロード] メニューから [ファイルの保存時にホット リロード] オプションを選択します。
おめでとうございます。 最初のコンポーネントを作成し、Blazor ページで使いました。
ゲーム ボードへのコンテンツとスタイルの追加
7 つの列と 6 つの行を含むゲーム ボードの定義を始めましょう。 次は、ボードを生き生きとさせるために、ちょっとしたスタイルを追加します。
Board.razor ファイルで、先頭にある HTML を削除し、次の内容を追加して、ゲーム ピース用の 42 個の場所があるボードを定義します。
C#
for
ループを使用して、42 個のボード位置を生成できます。 コンテナーのspan
タグが取得され、その内容が 42 回繰り返されてボードを表します。<div> <div class="board"> @for (var i = 0; i < 42; i++) { <span class="container"> <span></span> </span> } </div> </div>
ボード コンポーネントを保存すると、更新されたアプリをリビルドして起動するホット リロード機能のおかげで、アプリが更新され、空のページとして表示されます。
Note
ファイルを変更すると、Visual Studio からアプリの再起動を求められる場合があります。 コードの編集時にアプリをリビルドする必要があることを確認すると、機能を追加したときにアプリが自動的に再起動され、ブラウザーが更新されます。
コンポーネントのスタイルを設定する
Board.razor ファイルで、最初の div
タグより上に、ボードのフレームとプレイヤーの色を定義して、Board
コンポーネントにいくつかのスタイルを追加してみましょう。
<HeadContent>
<style>
:root {
--board-bg: yellow; /** the color of the board **/
--player1: red; /** Player 1's piece color **/
--player2: blue; /** Player 2's piece color **/
}
</style>
</HeadContent>
これらの CSS 変数 --board-bg
、--player1: red
、--player2: blue
が取得され、このコンポーネントのスタイルシートの残りの部分で使用されます。
次に、ゲームの完成したスタイルシートを Board
コンポーネントに追加します。
ソリューション エクスプローラーで Components フォルダーを右クリックし、Board.razor.css という名前の新しい CSS ファイルを作成します。
次の内容を新しい Board.razor.css ファイルにコピーします。
div{position:relative}nav{top:4em;width:30em;display:inline-flex;flex-direction:row;margin-left:10px}nav span{width:4em;text-align:center;cursor:pointer;font-size:1em}div.board{margin-top:1em;flex-wrap:wrap;width:30em;height:24em;overflow:hidden;display:inline-flex;flex-direction:row;flex-wrap:wrap;z-index:-5;row-gap:0;pointer-events:none;border-left:10px solid var(--board-bg)}span.container{width:4em;height:4em;margin:0;padding:4px;overflow:hidden;background-color:transparent;position:relative;z-index:-2;pointer-events:none}.container span{width:3.5em;height:3.5em;border-radius:50%;box-shadow:0 0 0 3em var(--board-bg);left:0;position:absolute;display:block;z-index:5;pointer-events:none}.player1,.player2{width:3.5em;height:3.5em;border-radius:50%;left:0;top:0;position:absolute;display:block;z-index:-8}.player1{background-color:var(--player1);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player1)}.player2{background-color:var(--player2);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player2)}.col0{left:calc(0em + 9px)}.col1{left:calc(4em + 9px)}.col2{left:calc(8em + 9px)}.col3{left:calc(12em + 9px)}.col4{left:calc(16em + 9px)}.col5{left:calc(20em + 9px)}.col6{left:calc(24em + 9px)}.drop1{animation-duration:1s;animation-name:drop1}.drop2{animation-duration:1.5s;animation-name:drop2}.drop3{animation-duration:1.6s;animation-name:drop3}.drop4{animation-duration:1.7s;animation-name:drop4}.drop5{animation-duration:1.8s;animation-name:drop5}.drop6{animation-duration:1.9s;animation-name:drop6}@keyframes drop1{100%,75%,90%,97%{transform:translateY(1.27em)}80%{transform:translateY(.4em)}95%{transform:translateY(.8em)}99%{transform:translateY(1em)}}@keyframes drop2{100%,75%,90%,97%{transform:translateY(5.27em)}80%{transform:translateY(3.8em)}95%{transform:translateY(4.6em)}99%{transform:translateY(4.9em)}}@keyframes drop3{100%,75%,90%,97%{transform:translateY(9.27em)}80%{transform:translateY(7.2em)}95%{transform:translateY(8.3em)}99%{transform:translateY(8.8em)}}@keyframes drop4{100%,75%,90%,97%{transform:translateY(13.27em)}80%{transform:translateY(10.6em)}95%{transform:translateY(12em)}99%{transform:translateY(12.7em)}}@keyframes drop5{100%,75%,90%,97%{transform:translateY(17.27em)}80%{transform:translateY(14em)}95%{transform:translateY(15.7em)}99%{transform:translateY(16.5em)}}@keyframes drop6{100%,75%,90%,97%{transform:translateY(21.27em)}80%{transform:translateY(17.4em)}95%{transform:translateY(19.4em)}99%{transform:translateY(20.4em)}}
ボードと各スペースの "パンチ穴" の書式設定に使用される CSS の選択肢の一部を次に示します。 ゲーム ピースと画面上のそのアニメーションの CSS ファイルには、さらに多くの使用可能なコンテンツがあります。
div.board { margin-top: 1em; flex-wrap: wrap; width: 30em; height: 24em; overflow: hidden; display: inline-flex; flex-direction: row; flex-wrap: wrap; z-index: -5; row-gap: 0; pointer-events: none; border-left: 10px solid var(--board-bg); } span.container { width: 4em; height: 4em; margin: 0; padding: 4px; overflow: hidden; background-color: transparent; position: relative; z-index: -2; pointer-events: none; } .container span { width: 3.5em; height: 3.5em; border-radius: 50%; box-shadow: 0 0 0 3em var(--board-bg); left: 0px; position: absolute; display: block; z-index: 5; pointer-events: none; }
ブラウザーが自動的に更新され (更新されない場合は、F5 キーでブラウザーを手動更新できます)、適切な黄色の Connect Four ボードが表示されます。
おめでとうございます。ゲームの始まりです。 以降のユニットでは、それにゲームのロジックを追加します。