演習課題：スマホで遊べるブラウザゲーム

なぜスマホゲームか

理由	内容
全員が持っている	スマートフォンは全員が持っているデバイス。作ったものをその場で友達に見せて遊んでもらえる
タッチ操作の設計	キーボードがない環境でどう操作させるか？ UI/UX 設計の基礎を体験する
レスポンシブ対応	画面サイズが端末によって異なる。どの画面でも遊べるようにする技術を学ぶ
実用的なスキル	モバイル対応はウェブ開発の現場で必須。就職後にも直接活きる経験

この課題で身につく力

スキル	内容
タッチイベントの理解	`touchstart`、`touchmove`、`touchend` — マウスクリックとは別の入力系統を扱う
レスポンシブ Canvas	画面幅に合わせて Canvas サイズを動的に調整する技術
モバイル UI 設計	指で操作しやすいボタンサイズ、片手持ちでの操作性、画面の向き対応
パフォーマンス意識	スマホはPCより処理能力が低い。60fps を維持するための工夫を考える

ゲームの候補

以下から選んでもよいし、自分で考えてもよい。大事なのはスマホで自然に遊べる操作を設計すること。

ゲーム	操作	特徴
タップで飛ぶ障害物回避	タップで上昇、離すと落下	Flappy Bird 系。シンプルだが中毒性が高い。1本指で遊べる
スワイプパズル	上下左右にスワイプ	2048 系。思考系ゲーム。スワイプ操作とスマホの相性が抜群
タップシューター	タップした位置に弾を撃つ	画面タッチで照準。PC のマウスより直感的になる
落ちものパズル	スワイプで移動、タップで回転	テトリス系。モバイル操作への変換が設計の腕の見せ所
リズムゲーム	タイミングに合わせてタップ	音楽に合わせてノーツをタップ。Web Audio API と組み合わせる
エンドレスランナー	タップでジャンプ、スワイプで移動	自動スクロール + 障害物回避。片手で遊べるのが強み
傾きの迷路	スマホを傾けてボールを転がす	加速度センサー（DeviceOrientationEvent）を活用。スマホならではの操作
スライスマスター	指でなぞって飛んでくるオブジェクトを切る	Fruit Ninja 系。touchmove の軌跡で切断判定。爽快感がある
ピンチディフェンス	2本指のピンチで衝撃波・引力を発生	マルチタッチ活用。2本指の距離変化を検出して力場を操る
ドラッグキャノン	引いて離すスリングショット	Angry Birds 系。ドラッグの方向・距離で弾道が決まる。軌跡プレビュー付き
ホールド＆グロウ	長押しで円を膨らませる	押している時間がそのままゲームプレイ。精密な長押し制御
回転パズル	指で同心円リングを回転	Math.atan2 で角度計算。回転ジェスチャーの実装を学べる
神経衰弱	カードを2枚タップしてペア探し	記憶力ゲーム。反射神経ではなく認知力を試す
色合わせ反射	文字の「色」をタップ（ストループ効果）	認知心理学のストループ効果を利用。脳が混乱する面白さ
重力パズル	4辺の矢印タップで重力方向を変える	ブロックがスライドして同色3個以上で消滅。連鎖が気持ちいい
光と影	光源をドラッグして影を操る	レイキャストで影を計算。影のシルエットをターゲットに合わせるアートパズル
文字キャッチ	落ちてくるひらがなを順番にタップ	言語ゲーム。文字を正しい順でタップして単語を完成させる
一筆書き	ノード間をタップ/ドラッグで辺を通る	オイラー路パズル。グラフ理論がゲームになる。CS教育に直結

進め方

Step	内容
1	ベースゲームの生成 — 生成AIにプロンプトを出して、スマホで動く最小限のゲームを作る
2	スマホで動作確認 — 実機で開いてタッチ操作を確認。画面サイズ、操作感、表示崩れをチェック
3	操作性の改善 — タッチ領域の調整、バーチャルボタンの追加、レスポンシブ対応の修正
4	ゲーム性の改良 — 難易度調整、スコア、エフェクト、サウンドを段階的に追加
5	友達にテストプレイしてもらう — URLを共有して遊んでもらい、フィードバックを得る

Step 2 の実機確認が最も重要。PC のブラウザで動いても、スマホで触ると操作しにくいことが多い。必ずスマホ実機で確認すること。

プロンプト例：タップで飛ぶ障害物回避ゲーム

Step 1 — ベースゲーム

プロンプト：
HTML + JavaScriptで、スマホのブラウザで遊べるタップアクションゲームを作ってください。
- 1つのHTMLファイルにまとめる
- Canvas要素を使用。画面幅に合わせてCanvasサイズを自動調整（最大480px）
- タップ（またはクリック）でキャラクターが上昇、離すと重力で落下
- 右から左に障害物（柱）が流れてくる。隙間を通り抜ける
- 障害物を通過するとスコア加算
- 障害物や画面上下の端に当たるとゲームオーバー
- ゲームオーバー時にスコア表示＋「タップでリスタート」
- UIテキストはすべて日本語（スコア、ゲームオーバー等）
- viewport metaタグを設定し、スマホで正しく表示されるようにする

生成例（スマホ推奨）：障害物回避／ 2048 ／シューター／落ちもの／リズム／ランナー／傾き迷路／スライス／ピンチ／キャノン／ホールド／回転／神経衰弱／色反射／重力／光と影／文字キャッチ／一筆書き

Step 2 — スマホ実機で確認して修正

プロンプト：
スマホで動作確認したところ、以下の問題がありました。修正してください。
- タップしたときにページ全体がスクロールしてしまう
- Canvas が画面からはみ出している
- 文字が小さすぎて読めない
（※実際に見つけた問題を具体的に伝える）

Step 3 — 操作性の改善

プロンプト：
以下の改善を加えてください。
- タップ時にバイブレーション（navigator.vibrate）でフィードバックを追加
- ゲーム開始前に「タップで開始」の画面を表示
- ハイスコアをlocalStorageに保存し、ゲームオーバー時に表示
- 画面の向きが横向きのときは「縦向きにしてください」と表示

Step 4 — ゲーム性の改良

プロンプト：
ゲームをもっと面白くしてください。
- スコア10ごとに障害物の速度が少しずつ上がる
- 時々コインが出現し、取ると追加スコア
- 背景が昼→夕方→夜と変化する（スコアに応じて）
- Web Audio APIで効果音を追加（タップ音、通過音、ゲームオーバー音）
- パーティクルエフェクト（通過時にキラキラ、衝突時に爆発）

モバイル対応の技術ポイント

生成AIに以下のポイントを伝えると、スマホ対応の品質が上がる。

ポイント	指示例
スクロール防止	`touch-action: none` や `e.preventDefault()` でゲーム中のページスクロールを防ぐ
viewport 設定	`<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">`
Canvas サイズ	`window.innerWidth` を使って画面幅に合わせる。`resize` イベントで動的に調整
タッチとマウスの両対応	`touchstart` と `mousedown` の両方をリスンし、PC でも動くようにする
フルスクリーン	`document.documentElement.requestFullscreen()` でアドレスバーを隠し、没入感を高める
PWA 化（上級）	Service Worker + manifest.json を追加すると、ホーム画面に追加してアプリのように起動できる

改良アイデア

アイデア	難易度	内容
スキン変更	初級	キャラクターや背景のデザインを選べるようにする
スコアランキング	初級	localStorage でハイスコア上位5件を保存・表示
バイブレーション	初級	`navigator.vibrate()` で衝突時やスコア取得時に振動フィードバック
加速度センサー	中級	`DeviceOrientationEvent` でスマホの傾きを操作に使う
2人対戦	中級	画面を上下に分割し、1台のスマホで2人同時プレイ
SNS シェア	中級	ゲームオーバー時にスコアをX（Twitter）にシェアするボタンを追加
PWA 対応	上級	ホーム画面に追加してネイティブアプリのように起動できるようにする
WebSocket 対戦	上級	サーバを立ててリアルタイムオンライン対戦を実装

提出・発表

項目	内容
提出物	完成した HTML ファイル（1ファイルにまとめる）
発表内容	スマホ実機でゲームのデモ。使用したプロンプト、工夫した点、スマホ対応で苦労した点を説明
評価ポイント	スマホでストレスなく遊べるか、操作性の工夫、ゲームとしての完成度

発表では実際にゼミのメンバーにスマホで遊んでもらう。「面白い」と言わせたら勝ち。