CONTENT
ここから
目的
5対5のゲームを想定して、相手チームと自分チームのキャラクターを選べる画面を作ります。
この章では、まだAI分析は使いません。
まずは、キャラクターを選ぶための画面と、クリックしたキャラクターをチーム枠に入れる仕組みを作ります。
完成イメージ
画面には、
- 相手チームの5枠。
- 自分チームの5枠。
- キャラクター一覧。
キャラクターをクリックすると、選択中のチームに入ります。
学ぶこと
HTMLで画面の土台を作る。CSSでゲーム風の見た目に整える。JavaScriptでクリック操作を処理する。配列を使って、5人分のチーム状態を管理する。
まず考えること
ゲームのキャラクター選択では、ただキャラクターを並べるだけでは足りません。必要なのは、次の情報です。
- 相手チームに誰がいるか。
- 自分チームに誰がいるか。
- 今、どちらのチームを選択中か。
- すでに選ばれたキャラクターは誰か。
この情報をJavaScriptで管理します。
const state = {
activeTeam: 'enemy',
enemyTeam: [null, null, null, null, null],
allyTeam: [null, null, null, null, null],
};
enemyTeamは相手チームです。allyTeamは自分チームです。nullは、まだキャラクターが選ばれていない空き枠を意味します。
キャラクター一覧を用意する
最初は、少ない数で構いません。
const characters = [
{
id: 'jett',
name: 'Jett',
role: 'Duelist',
image: '画像URL',
},
{
id: 'sova',
name: 'Sova',
role: 'Initiator',
image: '画像URL',
},
];
ここでは、キャラクターを配列として管理しています。1人のキャラクターは、id、name、role、image を持ちます。
チーム枠を表示する
5対5なので、それぞれ5枠必要です。
<section class="draft-board">
<div class="team-box">
<h2>相手チーム</h2>
<div id="enemySlots"></div>
</div>
<div class="team-box">
<h2>自分チーム</h2>
<div id="allySlots"></div>
</div>
</section>
enemySlots に相手チームの枠を表示します。
allySlots に自分チームの枠を表示します。
キャラクターをクリックして選ぶ
キャラクターをクリックしたときは、次の流れになります。
- 現在選択中のチームを確認する。
- 空いている枠を探す。
- その枠にキャラクターを入れる。
- 画面を再描画する。
function pickCharacter(characterId) {
const character = characters.find((item) => item.id === characterId);
if (!character) {
return;
}
const targetTeam =
state.activeTeam === 'enemy' ? state.enemyTeam : state.allyTeam;
const emptyIndex = targetTeam.findIndex((slot) => slot === null);
if (emptyIndex === -1) {
return;
}
targetTeam[emptyIndex] = character;
render();
}
find() は、条件に合うキャラクターを探します。
findIndex() は、空いている枠の場所を探します。
選択済みキャラクターを使えなくする
同じキャラクターを、相手チームと自分チームの両方に入れてしまうと不自然です。
そのため、すでに選ばれたキャラクターは選べないようにします。
function getUsedCharacterIds() {
return [...state.enemyTeam, ...state.allyTeam]
.filter((character) => character !== null)
.map((character) => character.id);
}
この関数では、相手チームと自分チームをまとめて、選択済みのキャラクターIDだけを取り出しています。
この章の完成条件
- 相手チームを選択できる。
- 自分チームを選択できる。
- キャラクターをクリックすると、選択中のチーム枠に入る。
- 同じキャラクターを重複して選べない。
- 5枠以上は選べない。
- 選択済みキャラクターが見た目でわかる。
チャレンジしてみよう
まずは、キャラクターを3体だけ登録して表示してください。
次に、相手チームを選択中の状態でキャラクターをクリックし、相手チームの枠に入るようにしてください。
できたら、自分チームにも同じ仕組みを追加してください。
最後に、選択済みのキャラクターカードを薄く表示してください。
余裕があれば、次の改造にも挑戦してください。
キャラクターをクリックしたときに、効果音が鳴る。
選択済みキャラクターをクリックすると、枠から外せる。
相手チームは赤、自分チームは青に色分けする。
キャラクターの役割ごとに表示を絞り込む。
まとめ
この章では、キャラクター選択画面の土台を作りました。
重要なのは、見た目ではなく「選択状態をデータとして持つ」ことです。
画面で選ばれたキャラクター情報があるからこそ、次の章でAIに分析させることができます。