メモ帳でプログラミング『迷路ゲーム』

このページはメモ帳でコードを書いて、ブラウザで実行する、安全でお手軽な環境で、プログラマー体験ができるページです。

Maze Game Ⅱ コード解説

基礎講座
・コードを改造する時は右クリックで『プログラムから開く』⇒『メモ帳』で開いてください。
・実行するときはダブルクリックで開いてください。

---

1️⃣ HTML部分（構造）

<canvas id="c" width="640" height="640"></canvas>
<div class="panel stat">
  <div class="small">ステップ: <span id="steps">0</span></div>
  <div class="small">時間: <span id="timer">--</span></div>
  <div class="small">最短: <span id="bestSteps">--</span></div>
  <div class="small">最速: <span id="bestTime">--</span></div>
</div>
<div class="touch-controls" id="touch">
  ...
</div>

• <canvas>：迷路を描画する領域
• <div class="panel stat">：歩数、時間、最短・最速表示
• <div class="touch-controls">：スマホ用の方向ボタン
• これらは JavaScriptから操作され、ゲーム進行に合わせて更新されます

---

2️⃣ UI操作とテーマ管理

const themeButtons = document.querySelectorAll('.theme-btn');
const THEMES = {
  night: {...}, grass: {...}, wa: {...}
};
function applyTheme(name){ ... }
themeButtons.forEach(b=>b.addEventListener('click',()=>applyTheme(b.dataset.theme)));
applyTheme('night');

• テーマ切替はCSS変数を操作
• --bg, --wall, --floor, --player, --goal, --accent を切り替える
• 学生は CSS変数とJSの結びつき を学べる

---

3️⃣ ゲーム状態の初期化

let COLS = 21, ROWS = 21;
let grid = [];
let player = {x:1,y:1};
let goal = {x:COLS-2,y:ROWS-2};
let cellSize = 24;
let steps = 0;

• grid[y][x]：迷路のマス（1:道、0:壁）
• player：現在位置
• goal：ゴール位置
• cellSize：描画用1マスの大きさ

配列とオブジェクトを使った状態管理が理解できます

---

4️⃣ オーディオ（WebAudio）

function ensureAudio(){ ... }
function playTone(freq,dur,type,volume){ ... }
function moveSound(){ playTone(880,0.06,'triangle',0.4); }
function goalSound(){ ... }
function startBGM(){ ... }
function stopBGM(){ ... }

• AudioContext を使って音を生成
• moveSound()：移動時の短いカチカチ音
• goalSound()：ゴール時の簡単ファンファーレ
• startBGM()：BGM（2つの低音オシレーター）

学生は WebAudio APIの基本 と 音の生成・音量制御 を体験できます

---

5️⃣ 迷路生成（再帰バックトラッカー）

function generateMaze(){
  initGrid();
  const stack = [];
  const start = {x:1,y:1}; grid[start.y][start.x]=1; stack.push(start);
  const dirs = [ {dx:0,dy:-2},{dx:2,dy:0},{dx:0,dy:2},{dx:-2,dy:0} ];
  while(stack.length){
    ...
  }
  player = {x:1,y:1}; goal = {x:COLS-2,y:ROWS-2};
}

• スタックを使った探索で迷路を生成
• 壁を飛ばして2マス先まで掘る → 道と壁の交互配置
• 再帰の代わりにスタックでループしている点がポイント
• 学生は 迷路アルゴリズムとスタックの関係 を理解できます

---

6️⃣ 描画（Canvas）

function draw(){
  ctx.clearRect(0,0,W,H);
  ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--floor');
  ctx.fillRect(0,0,W,H);
  ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--wall');
  for(let y=0;y<ROWS;y++) for(let x=0;x<COLS;x++) if(grid[y][x]===0) ctx.fillRect(...);
  // goal
  ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--goal');
  ctx.fillRect(...);
  // player
  ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--player');
  ctx.beginPath();
  ctx.arc(...); ctx.fill();
}

• fillRectで壁と床を描画
• arcでプレイヤーを円で表示
• CSS変数を読み込むことでテーマ色を反映
• Canvasの描画と座標計算の学習に最適

---

7️⃣ プレイヤー移動

function canMove(nx,ny){ return nx>=0&&nx<COLS&&ny>=0&&ny<ROWS && grid[ny][nx]===1; }
function movePlayer(dx,dy){ ... }
window.addEventListener('keydown', e=>{ ... });
['up','down','left','right'].forEach(id=>{ ... });

• キー操作 + スマホタッチ対応
• 移動可能かチェックして更新
• 移動ごとにステップ更新・音再生
• 学生は イベント処理と条件分岐 を学べます

---

8️⃣ タイマーとスコア

function startTimer(){ ... }
function checkGoal(){ ... }
function updateBests(s,t){ ... }
function loadBests(){ ... }

• タイマーで制限時間管理
• ゴールでスコア計算
• localStorageに保存して最短・最速を記録
• 学生は Web Storage APIの活用 を学べます

---

9️⃣ 自動解決（BFS）

function solveAndAnimate(){ ... }

• 幅優先探索(BFS)でゴールまでの最短経路を計算
• アニメーションで順にプレイヤーを移動
• アルゴリズムの可視化教材に最適

---

10️⃣ ゲーム開始とループ

function startNewGame(){ ... }
function loop(){ draw(); animateLoopId = requestAnimationFrame(loop); }
startNewGame(); loop();

• ゲーム開始時に迷路生成・タイマー開始
• requestAnimationFrameで描画を繰り返す
• 学生は アニメーションループの仕組み を理解できます

---

まとめ

この _2.html は、フル機能迷路ゲームですが、重要な学習ポイントだけに絞ると以下になります：

1. 配列とオブジェクトによる状態管理
2. 迷路生成アルゴリズム（スタック / BFS）
3. Canvas描画
4. イベント処理（キーボード・タッチ）
5. WebAudio APIによる効果音とBGM
6. localStorageによるスコア管理

高校生でも コードを少し書き換えるだけで迷路サイズ・音・テーマが変えられる ので、プログラマー体験が可能です。