情報の授業で作れる簡単なブラウザゲーム

どんなゲームが「授業向き」か

授業の中でゲームを作る目的は、プログラミングの構造（変数・条件分岐・繰り返し・関数）を体験することです。そのため、完成に時間がかかりすぎるゲームや、外部ライブラリへの依存が深いゲームは向きません。

授業向きの題材を選ぶ判断基準は次の3点です。

1. ゲームループが単純：「入力を受け取る → 状態を更新する → 画面を描く」のサイクルが100行前後で書けること。
2. 状態の数が少ない：スコア・残りライフ・現在の位置など、変数の数が10個以下に収まること。
3. 授業の進度と対応している：変数と条件分岐だけを習った段階なら、乱数を使うゲームより「○×ゲーム」のほうが自然に対応します。

この基準を満たす代表的な題材を挙げます。

• 数当てゲーム：乱数で答えを決め、プレイヤーの入力と比較する。条件分岐と繰り返しの練習に直結します。
• ○×ゲーム（三目並べ）：9マスの配列、勝敗判定ロジック、2人交互入力が学べます。データ構造の導入にも使えます。
• クリックカウンター / タイムアタック：制限時間内にボタンを押す回数を競う。setTimeoutやsetIntervalといるタイマーの使い方を自然に学べます。
• シンプルなクイズゲーム：問題と答えをオブジェクト配列で持ち、順番に表示する。配列・オブジェクト・ループを同時に使う練習になります。

最小構成のコードをどう組み立てるか

ブラウザゲームの最小構成は、1枚のHTMLファイルに <style>・<body>・<script> をまとめたものです。外部ファイルへの分割は整理の習慣として大切ですが、最初の1本は一体型で書くほうが「どこに何があるか」を把握しやすくなります。

数当てゲームを例にした構造

① 初期化 ─ 正解の乱数を生成し、試行回数をゼロにする
② 入力受け取り ─ テキストボックスの値を数値に変換する
③ 判定 ─ 大きい・小さい・正解の3択で分岐する
④ 表示更新 ─ ヒントと試行回数をDOMに書き出す
⑤ 終了処理 ─ 正解したら入力を無効化し、リスタートボタンを表示する

この5ステップをそのまま関数に分割すると、コードの読み書きと先生によるコードレビューの両方が楽になります。関数名を initialize・handleInput・judge・render・endGame のように役割で付けると、後から見直したときに何をしているかが一目でわかります。

授業でよくある詰まりどころ

型の不一致：input.value は文字列なので、Number() や parseInt() で数値に変換しないと比較が正しく動きません。"5" > 3 は true ですが、"10" > "9" は文字列比較になり false になります。数当てゲームでこの挙動に出会うと、型の概念が実感を伴って理解できます。

DOM取得のタイミング：<script> タグを <head> に置いたままDOMを操作しようとすると、要素がまだ存在しないためエラーになります。<script> を </body> 直前に置くか、DOMContentLoaded イベントを使うことで解決します。

ゲームオーバー後も入力できる：終了後にボタンをクリックし続けられる問題は、button.disabled = true を終了処理に加えるだけで防げます。「入力制御」という概念をゲームで自然に学べる場面です。

AIツールを授業でどう使うか

生成AIを使ってコードを書かせること自体は、現在の多くの情報教育の場面で議論されています。使い方の方針は学校・担当教員によって異なりますが、一般的な考え方として次の2点が参考になります。

使い方の分け方：「全体をAIに書かせてコピーする」のと「自分で書いたコードの一部を確認・修正する補助に使う」は、学習としての意味が大きく異なります。後者は、エラーの原因を理解したうえでAIに質問する使い方で、実務に近い経験になります。

AIに聞くときの言い方：「このコードが動かない。handleInput の中でエラーが出るが、原因を説明してほしい」のように、自分の試みとエラー内容を添えて質問すると、AIの答えが自分のコードに対応した説明になります。「数当てゲームを作って」と聞くだけでは、コードが返ってきても何をしているかを説明できず、授業の目的から外れます。

授業でAIを使うかどうか、どの範囲で使うかは、事前に担当の先生と方針を確認することをお勧めします。

完成後の発表と共有

授業の中でゲームを作っても、自分のPCだけで動かして終わりでは達成感が半分です。クラスメイトにプレイしてもらう体験は、UI（ユーザーインターフェース）の重要性を実感させる機会になります。「自分には自明なルールが、他の人には伝わらない」という発見は、説明文やヒント表示を改善する動機になります。

共有の方法として、HTMLファイルをそのまま渡す方法のほかに、ウェブ上で公開する選択肢もあります。アソバースはHTMLファイルやZIPファイルをそのまま投稿・公開できるプラットフォームで、授業で作ったゲームをURLで共有したい場合の選択肢のひとつです。公開前には、個人情報がコード中にないかを確認する習慣も身に付けるとよいでしょう。

発表の場では「どんな問題を解決しようとしたか」「詰まったところとその解決方法」「次に加えたい機能」の3点をまとめると、コードの説明より深い議論ができます。

次の行動

テキストエディタ（VSCodeや学校で指定されているもの）を開き、まず数当てゲームの「①初期化」だけを書いてブラウザで動作を確認してみてください。完成形を一度に目指すより、1ステップずつ動かして確認する習慣が、エラーへの対処力を最も早く伸ばします。完成したゲームをクラスメイトに触ってもらい、「ルールがわかりにくかった」というフィードバックを次の改善に活かすところまでが一連の学習です。