今回の完成形
「ゲームを始める」を押し、←→またはA/Dで受け皿を動かします。音は最初は無効です。試す場合は音量を小さくし、「音を有効にする」を押してからゲームを始めてください。音を使わなくても得点と結果が文字で分かります。
第06回を残し、素材も同じフォルダーへ
前提は第06回のクリア・時間切れ・再挑戦です。前のフォルダーを上書きせず、第07回のZIPを別の場所へ展開してください。index.html、style.css、script.jsに加え、star.svg、noto-title.ttf、OFL.txt、README.txtを同じフォルダーへ置き、index.htmlを開きます。
画像は編集部の自作でCC0、音はプログラムの発振音で、録音素材は使いません。フォントはSIL OFL 1.1です。READMEとOFL.txtを残し、すべてが同じ権利条件だとは扱いません。「無料」という表示だけで、他人の素材の配布まで許されるとは判断しないでください。
読み込み完了を待って星を描く
const starImage = new Image();
starImage.src = 'star.svg';
starImage.addEventListener('load', paint);
// paint内。星の位置と当たり判定は第06回のまま
if (starImage.complete && starImage.naturalWidth) {
ctx.drawImage(starImage, x - 14, y - 14, 28, 28);
}画像は読み込みが終わる前には描けません。完成コードでは未読込や欠落の場合に、第06回の星の図形を表示する処理も残しています。見た目を28×28pxにしても、星の中心座標や半径14の当たり判定は変えません。
画像が出ないときは、star.svgの名前、大文字・小文字、置き場所を確認します。今回は画像を隠した条件でも、元の図形へ戻りゲームを続けられることを確かめています。
ボタンから音を有効にし、取得時だけ鳴らす
audio ??= new AudioContext();
await audio.resume();
soundEnabled = audio.state === 'running';
// advanceの前後で得点を比べる
if (state.score > scoreBefore) catchSound();音を勝手に開始せず、有効化ボタンの操作後にAudioContextを再開します。取得音は880Hzの正弦波で、約0.11秒で停止。Gainを0.04から下げます。この数値は端末から聞こえる音量の保証ではありません。完成コードのcatchSoundが発振器とGainを接続しています。
星の取得、時間切れ、停止を音だけに頼らず文字でも示します。音が出ない場合はブラウザーや端末のミュート、出力先も確認してください。ここではAudioContextのrunning状態と音の生成処理を検査しました。直接試聴、全端末の音量・聴感、スマホ実機の音声再生は未検証です。
見出しだけを変え、元のルールも確かめる
style.cssのfont-faceからnoto-title.ttfを読み込み、h1へ指定します。使用した文字限定版とOFLの条件はNoto Sans JPの使用例にまとめています。フォント読み込みが失敗しても、後ろに指定したsystem-uiへ戻ります。
画像とフォントの実読込、最初の星の取得、停止、音の有効・無効、再挑戦を確認しました。クリア・期限ちょうどの取得・時間切れは第06回と同じ判定モデルを検査しています。結果を直接書き換えて成功画面を作ったものではありません。PCとスマホ幅の表示は確認対象ですが、スマホ実機の長押し操作はまだ扱いません。
自作コード・SVG・READMEはCC0、第三者フォントはOFLです。確認日は2026年10月12日。第08回「説明とUI」は公開済みです。次回も同じゲームとHTML/CSS/JavaScriptを使います。全12回の目次から公開済みの回へ進めます。