タイトル画面と導入をつける

なぜ要るか

2-1でこう書きました。タイトル画面もメニューも、今は要りません。あとで足せます。

今が「あと」です。ゲームは面白くなり、絵と音が付き、初見の案内も付きました。最後に、いきなり盤面へ放り込むのをやめます。

順番について書いておきます。この講座では、タイトル画面を完成の線（2-4）の外に置いて、遊べる形ができてから足す順にしました。限られた手数をまずルールと画面へ集めたかったからです。

ただし、これが唯一の正解ではありません。キービジュアルというのは、その作品の顔になる1枚絵のことです。タイトル画面に大きく出す絵がそれにあたります。先にキービジュアルを作ったほうが作りやすいこともあります。 見た目の基準が最初に1枚あると、以降の画面も素材もそこへ揃えられるからです。2-6のように世界観から入るなら、なおさらです。要は「面白さの1行」と「意味表」のどちらを先に固めて支えにするかで、この講座は前者を先にしたので、入り口が最後になりました。

使う道具: なし

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

1) このゲームの世界観は「口寄せ。呼んで、任せる。自分では戦わない」。
タイトル画面に置く一言の候補を10個。説明文ではなく、短い言い切りで。

2) index.html にタイトル画面を足して。ゲーム画面の上に全面の幕を重ねる方式で、別ページは作らない。中身は、キャラ絵、題字、一言、はじめるボタンと音なしではじめるボタンとあそびかたボタン、それとセーブがある時だけ出る、つづきからボタン。はじめるは音の再生も許可してBGMを流し始め、音なしの方は鳴らさずに始める。開始の処理は1つの関数にまとめて、2つのボタンの違いは音の有無だけにして。それ以外は変えないで。

世界観のかぎ括弧の中は、自分のゲームの世界観に置き換えてください。

タイトル画面の仕事は4つだけです

仕事	画面のどれ
世界観を一言で言う	題字と「呼んで、任せる。」
音の有無を最初に選ばせる	「はじめる」と「音なしではじめる」
遊び方への入り口を見せる	「あそびかた」（6-8の案内つきの1戦へ、何度でも）
前回の続きを差し出す	「巻物のつづきから」（セーブがある時だけ）

載せていないものに意味があります。遊び方の説明はありません（6-8が画面内でやる）。設定画面もありません。タイトル画面が長いと、遊ぶまでの距離が伸びます。 一言、一押し、で中へ入れます。

「呼んで、任せる。」の一言は2-6の世界観の芯そのままです。ルール説明ではないのに、このゲームで何をするのかが伝わります。キャッチコピーは説明の圧縮ではなく、世界観の抜き出しで作ると短くなります。

実装は「幕」を1枚かぶせるだけです

タイトル画面を別ページにはしません。ゲーム画面の上に、全面の幕を1枚重ねます。

function openMaku() {
  el('maku').hidden = false;
  el('continueBtn').hidden = !hasSave();
}
function closeMaku() { el('maku').hidden = true; }

hidden = false で幕を出し、true で隠します。2行目の !hasSave() は「セーブが無ければ隠す」という意味で、! は答えを逆にする記号です。つまりセーブがある時だけ、つづきからボタンが現れます。

「巻物のつづきから」は、6-4で作った保存がある時だけ現れます。保存の仕組みを先に作ってあったから、タイトル画面が1行で賢くなりました。 部品を作る順番が、あとの部品を安くします。

「はじめる」は音の解禁ボタンを兼ねます

5-1で困った話を覚えているでしょうか。ブラウザは、利用者が操作するまで音を出させてくれません。 だから「音を出す」ボタンを置きました。

タイトル画面ができると、この問題がきれいに解けます。「はじめる」を押す操作そのものが、音の解禁になるからです。

function hajimeru(withSound) {
  if (withSound) { soundOn = true; el('soundBtn').textContent = '音を止める'; bgmOn(); }
  else { soundOn = false; bgm.pause(); el('soundBtn').textContent = '音を出す'; }
  clearSave(); newGame(); naraiStart(); closeMaku();
  react('genki', narai.step ? '三つの的を取り合って、多く取ったほうの勝ち。まずは一枚、呼ぶ者をえらんで。' : 'いざ、勝負！', narai.step ? 'narai1.mp3' : 'iza.mp3');
  render(narai.step ? '手札から1枚えらんでください。' : '札をえらんでください。');
}
el('startBtn') && el('startBtn').addEventListener('click', function () { hajimeru(true); });
el('startMuteBtn') && el('startMuteBtn').addEventListener('click', function () { hajimeru(false); });

上から順に読むとこうです。最初の2行が音を出すか出さないかの切り替え、次の行で前の保存を消して新しい対戦を作り、案内を始めて幕を下ろします。react はこよりに表情と台詞と声を出させる関数、render は画面を描き直す関数です。narai.step ? A : B は「案内中なら A、そうでなければ B」なので、初めての人と2回目以降の人で台詞が変わります。

はじめるを押した瞬間、BGMが鳴り出し、幕が上がり、初見なら6-8の道案内が始まります。導入とは、この数秒のつながりのことです。 タイトル画面・音・道案内をばらばらに作ってきて、最後にここで1本になります。

隣に音なしではじめるを並べているのにも理由があります。電車や職場でそっと開く人には、音が出ること自体が困りごとです。5-1で「既定は音が出ない」と決めた原則を、入り口でも見える形にしておくわけです。あとで音が欲しくなれば、画面の「音を出す」でいつでも入れられます。

開始の処理は hajimeru() の1つにまとめてあります。 ボタンが2つでも、違いは音の1点だけ。別々に書くと、あとで開始処理を直すときに片方だけ直して事故になります。

ハマった話: hidden なのに消えない

実際に踏んだ穴を残しておきます。幕に hidden を付けたのに、画面から消えませんでした。

hidden はHTML側で「この部品を隠す」と言うための印です。一方 display はCSS側で「その部品をどう並べるか」を決める指定で、flex なら中身を並べて配置し、none なら表示そのものを消します。同じ部品について両方から指示が出ると、どちらかが勝ちます。

原因は、幕のCSSに display: flex を書いていたことです。hidden 属性はブラウザの標準スタイルで display: none にしますが、自分で書いた display: flex の方が強いので負けます。

.maku[hidden] { display: none; }

この1行で直ります。display を指定した要素を hidden で隠すときは、この組み合わせを思い出してください。「付けたはずの hidden が効かない」は、たいていCSSとの綱引きです。

やってみる

一言を先に決める

世界観（2-6）から抜き出します。説明しようとせず、そのゲームで何をするかが匂う一言を選びます。迷ったらAIに候補を出させて、選ぶのは自分です。
```
このゲームの世界観は「口寄せ。呼んで、任せる。自分では戦わない」。
タイトル画面に置く一言の候補を10個。説明文ではなく、短い言い切りで。
```

AIに頼む

claude -p "index.html にタイトル画面を足して。ゲーム画面の上に全面の幕を重ねる方式で、別ページは作らない。中身は、キャラ絵、題字、一言、はじめるボタンと音なしではじめるボタンとあそびかたボタン、それとセーブがある時だけ出る、つづきからボタン。はじめるは音の再生も許可してBGMを流し始め、音なしの方は鳴らさずに始める。開始の処理は1つの関数にまとめて、2つのボタンの違いは音の有無だけにして。それ以外は変えないで。"

「別ページは作らない」を必ず入れてください。 タイトル用のHTMLをもう1枚作られると、CSSや読み込みが二重になります。3-2で1ファイルにした利点が崩れます。

戻り道を付ける

入り口を作ったら、戻る道も要ります。タイトルへ戻れないと、遊ぶ人は入り口の絵をもう一度見ることができません。ゲーム中からタイトルへ戻るボタンを1つ足します。戻ったときに「つづきから」が出れば、6-4の保存とつながった証拠です。
確かめる
- 初回: はじめる → 音が鳴る → 道案内が始まる
- 途中でタイトルへ戻る → つづきから、が出る
- つづきから → 盤面が戻っている

保存する

git add .
git commit -m "タイトル画面をつけて、音の解禁と導入をまとめた"

つまずきどころ

はじめるを押しても音が出ない

ボタンの処理で音の許可フラグを立て忘れています。タイトル画面を作った意味の半分はここなので、指示に「音の再生も許可して」を入れ忘れないでください。

幕が消えない

上に書いた display の綱引きです。.maku[hidden] { display: none; } を足してください。

つづきから、が毎回出る

決着したときに保存を消していません。6-4の「終わったら消す」が抜けています。

タイトル画面が豪華になっていく

実績、設定、クレジット、モード選択。足したくなったら2-4を読み直してください。タイトル画面は完成の線の外に一度置いたものです。膨らませる場所ではありません。

Windows の場合

差はありません。

次の一歩

はじめるを押してから1手目を置くまでを、時計で計ってみてください。

かかった秒数そのものより、「どの画面で何秒使ったか」が見えることが収穫です。長いと感じた場所があれば、そこが削る候補です！

ここまでの三つの的

この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。

別の画面でこのゲームを開く