情報Ⅰ プログラミング問題 — 実際に動くゲームのコードで解く（5問・解答つき）

高校「情報Ⅰ」の(3) コンピュータとプログラミングで扱う配列・反復・条件分岐・関数・アルゴリズムを、 教科書用に書かれた例題ではなく、実際に公開されて動いているゲームのJavaScriptで読む練習問題です。 題材は2048・迷路・ブロック崩し・リズムゲーム。 どれもこのサイトで遊べて、ソースページで全文を読み、数値を書きかえてその場で動かせます。

解答は折りたたんであります。生徒に配るときはURLをそのまま渡して構いません（無料・登録不要・先生向けページには広告を出していません）。

共通テスト用プログラム表記と JavaScript の対応（おおよそ）

問題を読むときの手がかりとして、主な書き方を並べます。表記の細部は年度で見直されることがあるため、正確な形は大学入試センターの公開資料で確認してください。

JavaScriptの { } は「ここからここまでがひとまとまり」、; は「文の終わり」。共通テスト用プログラム表記では字下げでまとまりを表します。

問1 配列と反復・分岐 — 2048の「合体」

2048では、1行の数を左に詰めて、となり合う同じ数を合体させます。次は2048のコードから、1行分の処理を読みやすさのため一部整理したものです（SIZE は 4）。

function slideRow(row) {
  // 0 を取り除く（例: [2, 0, 2, 4] → [2, 2, 4]）
  var filtered = [];
  for (var k = 0; k < row.length; k++) {
    if (row[k] !== 0) filtered.push(row[k]);
  }

  var merged = [];
  var scoreGain = 0;
  for (var i = 0; i < filtered.length; i++) {
    if (i + 1 < filtered.length && filtered[i] === filtered[i + 1]) {
      var newVal = filtered[i] * 2;
      merged.push(newVal);
      scoreGain += newVal;
      i++;                 // (ア)
    } else {
      merged.push(filtered[i]);
    }
  }
  while (merged.length < SIZE) merged.push(0);   // 右側を 0 で埋める
  return { row: merged, scoreGain: scoreGain };
}

1. row = [2, 0, 2, 4] のとき、返される row と scoreGain を答えなさい。
2. row = [4, 4, 4, 4] のとき、返される row と scoreGain を答えなさい。
3. (ア)の i++ を削除すると、row = [2, 0, 2, 4] の結果はどう変わるか。また、それはゲームのルールとしてなぜ困るか説明しなさい。

問2 2次元配列 — 2048の「盤面の回転」

2048は上下左右に動かせますが、コードには「左に動かす」処理しかありません。盤面を回転させてから左に動かし、回転を戻しているからです。

// g を 90° 回転した新しい 2次元配列を返す（times 回くり返す）
function rotateGrid(g, times) {
  var result = g;
  for (var t = 0; t < times; t++) {
    var newGrid = [];
    for (var r = 0; r < SIZE; r++) {
      newGrid[r] = [];
      for (var c = 0; c < SIZE; c++) {
        newGrid[r][c] = result[c][SIZE - 1 - r];   // (イ)
      }
    }
    result = newGrid;
  }
  return result;
}

// 方向ごとの回転回数（左を基準にする）
var rotations = { left: 0, up: 1, right: 2, down: 3 };
var rot = rotations[direction];
var rotated = rotateGrid(grid, rot);
// … rotated の各行に slideRow を適用 …
grid = rotateGrid(rotated, (4 - rot) % 4);      // (ウ) 回転を戻す

1. 考えやすくするため SIZE = 3 とし、g = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] とする。rotateGrid(g, 1) の結果を書きなさい。
2. (1)の結果は、元の盤面をどちら向きに回転したものか（時計回り／反時計回り）。
3. up（上に動かす）が rotations で 1 になっている理由を、(2)の答えを使って説明しなさい。
4. (ウ)で (4 - rot) % 4 としている理由を説明しなさい。4 - rot だけでは何が困るか。

問3 アルゴリズムとスタック — 迷路の自動生成

迷路ゲームの迷路はプレイのたびにプログラムが作っています。次は迷路ゲームのコードの生成部分を、要点だけ残して整理したものです。 mazeVisited[y][x] はマス (x, y) をすでに通ったか、stack は配列です。

var stack = [];
mazeVisited[0][0] = true;
stack.push({ cx: 0, cy: 0 });                     // スタートを積む

while (stack.length > 0) {
  var current = stack[stack.length - 1];          // (エ)

  // まだ通っていない、となりのマスを集める
  var neighbors = [];
  for (var d = 0; d < DIRS.length; d++) {         // DIRS は上下左右の4方向
    var nx = current.cx + DIRS[d].dx;
    var ny = current.cy + DIRS[d].dy;
    if (nx >= 0 && nx < MAZE_SIZE && ny >= 0 && ny < MAZE_SIZE && !mazeVisited[ny][nx]) {
      neighbors.push({ nx: nx, ny: ny });
    }
  }

  if (neighbors.length === 0) {
    stack.pop();                                  // (オ)
  } else {
    var chosen = neighbors[Math.floor(Math.random() * neighbors.length)];
    // current と chosen の間の壁をこわす（省略）
    mazeVisited[chosen.ny][chosen.nx] = true;
    stack.push({ cx: chosen.nx, cy: chosen.ny });
  }
}

1. (エ)は stack.pop() ではなく stack[stack.length - 1] と書かれている。この2つの違いを説明しなさい。
2. (オ)で pop するのは、迷路づくりのどういう場面か。日本語で説明しなさい。
3. この while ループが終わるのは、どういう状態になったときか。
4. この方法で作った迷路は「どのマスからどのマスへも行ける」「スタートからゴールへの道は1本しかない」。それぞれ、コードのどこからそう言えるか説明しなさい。
5. （発展）同じ処理は、関数が自分自身を呼ぶ「再帰」でも書ける。このコードがあえて配列 stack を使っている理由として考えられることを述べなさい。

問4 関数と三角関数 — ブロック崩しの「跳ね返る角度」

ブロック崩しでは、パドルのどこに当たったかでボールの飛ぶ向きが変わります。ブロック崩しのコードから、ボールを発射するときの角度の計算です。 b.offset はパドルの左端からボールまでの距離、currentPaddleW はパドルの幅、ballSpeed は速さです。

var hitPos = Math.max(0, Math.min(1, b.offset / currentPaddleW));   // (カ)
var angle = (150 - hitPos * 120) * Math.PI / 180;                     // (キ)
b.dx = ballSpeed * Math.cos(angle);                                   // 横向きの速さ
b.dy = -Math.abs(ballSpeed * Math.sin(angle));                        // (ク) 縦向きの速さ

1. (カ)で Math.max(0, Math.min(1, …)) と二重にしているのは何のためか。b.offset がパドルの幅より大きいときの hitPos を答えなさい。
2. (キ)で hitPos が 0、0.5、1 のときの角度をそれぞれ「度」で答えなさい。また * Math.PI / 180 は何をしているか。
3. hitPos = 0.5（パドルの真ん中）のとき、b.dx と b.dy はいくつになるか。ballSpeed = 6 として答え、ボールがどちらへ飛ぶか述べなさい。
4. (ク)で -Math.abs(…) としている理由を説明しなさい。（ヒント：画面の座標は下向きがプラス）
5. （発展）150 と 120 を 170 と 160 に変えると、端に当てたときのボールの飛び方はどう変わるか。ゲームの手ざわりとして何が起きるか考えなさい。

問5 条件分岐の順序 — リズムゲームの「判定」

リズムゲームは、キーを押した時刻と「押すべき時刻」のずれで PERFECT／GREAT／GOOD／MISS を決めます。リズムゲームのコードから判定部分です。 closestDiff は、押すべき時刻とのずれ（ミリ秒）です。

var PERFECT_MS = 67, GREAT_MS = 144, GOOD_MS = 250, MISS_MS = 389;

var d = Math.abs(n.targetTime - now);   // (ケ) ずれの大きさ
// … レーン内で d がいちばん小さいノーツを closest、その d を closestDiff とする …

if (closestDiff <= PERFECT_MS) {
  points = 300; combo++;
} else if (closestDiff <= GREAT_MS) {
  points = 200; combo++;
} else if (closestDiff <= GOOD_MS) {
  points = 100; combo++;
} else if (closestDiff <= MISS_MS) {
  points = 0; combo = 0;
} else {
  return;                               // (コ) 何もしない
}
closest.hit = true;                     // (サ)

1. closestDiff が 100 のとき、points はいくつか。
2. if の順番を入れかえて、closestDiff <= GOOD_MS の判定をいちばん上にすると、どんな不具合が起きるか。
3. (ケ)で Math.abs を使う理由を説明しなさい。使わないと、早く押したときと遅く押したときで何が違ってしまうか。
4. (コ)で、ずれが 389ms より大きいときに MISS にせず「何もしない」のはなぜか。プレイヤーの立場で考えなさい。
5. (サ)の closest.hit = true がないと何が起きるか。

授業での使い方（2時間の例）

1時間しかなければ、問1と問5（配列と分岐の順序）が扱いやすく、どちらもソースページですぐ確かめられます。 中学校 技術・家庭の段階④でも、問1・問3・問5は使えます（中学校向けのページ）。

よくある質問

共通テスト「情報Ⅰ」の過去問や予想問題はありますか？

ありません。このページの問題は、公開されているゲームの実際のJavaScriptを題材にした読解問題で、共通テストの形式（共通テスト用プログラム表記による出題）とは異なります。過去問・試作問題は大学入試センターの公開資料をご覧ください。変数の値を追う・配列の添字を追う・分岐の順序を考えるという力は共通です。

JavaScriptで学んで大丈夫ですか？ 授業ではPythonを使っています。

大丈夫です。問われているのは「配列の要素を順に見る」「条件で分ける」「関数に値を渡す」という言語に依存しない考え方で、共通テストも特定の言語ではなく共通テスト用プログラム表記で出題されます。JavaScriptを選んでいる理由は、生徒が遊んでいるゲームそのもののコードをブラウザだけで読み・書きかえて動かせるためです。

答えを自分で動かして確かめられますか？

確かめられます。各ゲームのソースページに「このコードを書きかえて動かす」欄があり、数値を変えてその場で実行できます。たとえば問1の * 2 を * 3 にすると、出てくる数が 2, 6, 18 … に変わるのが見られます。

高校以外（中学校）でも使えますか？

問1・問3・問5は中学校 技術・家庭「D 情報の技術」の段階④（コードを読む）でも使えます。問2（2次元配列の回転）と問4（三角関数）は高校向けです。

題材にしたゲームと関連ページ