JS：CanvasAPIでダンジョンを描画する

棒倒し法というアルゴリズムを使った2次元ダンジョンを描画するプログラムです。
JavaScriptの標準機能であるCanvasAPIを利用した描画方法です。

棒倒し法のアルゴリズムついて知りたい方は以下で詳しく解説していますので、参考にしてください。

C言語：棒倒し法でダンジョン(迷路)を表現する

C言語での解説ですが、アルゴリズム部分はどの言語でも対応できるよう図を使って分かりやすく解説しています。

dianxnao.com

2024.12.19

ソースコード

ソースコードファイルは以下の4つです。

index.html

User.js

Functions.js

main.js

少しだけ解説

棒倒し法のアルゴリズム部分については割愛します。こちらを参考にしてください。

起動時の処理

起動時（loadイベント発生時）にGameMain()アロー関数が呼ばれるようになっています。
ダンジョンを1回描画するだけなら必要ないのですが、ゲーム制作などに応用がきくようにrequestAnimationFrameを使ってゲームループ処理（GameMainを再起呼び出し）して1秒間に60回ほどダンジョンを描画するようにしています。

/*
 * ゲームのメイン処理
 */
const GameMain = () =>{
	// ダンジョン描画
	drawDungeon();
	
	// フレーム再描画
	requestAnimationFrame(GameMain);
}

/*
 * 起動時の処理
 */
window.addEventListener("load", async ()=>{
	:
	:
	// ゲームループ開始
	GameMain();
});

ダンジョンの幅と高さ

ダンジョンの幅と高さに関しては端末の（ブラウザの）描画領域サイズによって変化する仕組みになっています。

そのためresizeイベントを感知して、描画領域サイズが変更する度にダンジョンを再生成するようにしています。（⇒ main.jsにあるgetSize()アロー関数）

/*
 * キャンバスのサイズをウインドウに合わせて変更（リサイズ時に実行）
 */
const getSize = ()=>{
    // キャンバスのサイズを再設定
    canvas.width = wrapper.offsetWidth;
    canvas.height =  wrapper.offsetHeight;

	// ダンジョンの高さを再設定
	let height = Math.floor(canvas.height / BLOCK_SIZE) - 1;

	if(height % 2 == 0){	// 奇数にしておく
		height -= 1;
	}

	// ダンジョンの幅を再設定
	let width = Math.floor(canvas.width / BLOCK_SIZE) - 1;
	
	if(width % 2 == 0){	// 奇数にしておく
		width -= 1;
	}

	// ダンジョン行数/列数/ブロック長を設定
	game.rows = height;
	game.columns = width;
	game.block_length = game.rows * game.columns;

	console.log(`${game.rows}行 x ${game.columns}列 = ${game.block_length} ブロック`);

	// ダンジョン描画のオフセット値を再設定(ダンジョンが画面のなるべく中央になるように配置するため)
	game.offsetX = (canvas.width - game.columns * BLOCK_SIZE) / 2;
	game.offsetY = (canvas.height - game.rows * BLOCK_SIZE) / 2;

	// ダンジョン生成
	dungeon = generateDungeon();
	console.log("★ダンジョン生成完了！");
	console.log(dungeon);
}

window.addEventListener("resize", getSize, false);	// リサイズ時のイベントに設定

ダンジョン生成

ダンジョン生成は、Functions.jsにあるgenerateDungeon()アロー関数で行います。
2次元配列dungeonに0（通路）と1（壁）を代入することで数値上の仮想ダンジョンを表現します。

dungeon配列に別の数値、例えば2をモンスター、3をアイテムなどと当てはめると容易にダンジョン要素を増やすことが出来ると思います。

/*
 * ダンジョン生成
 */
const generateDungeon = ()=> {
	// 2次元配列を生成
	let _dungeon = generate2DArray(game.rows, game.columns);

	// ダンジョンを空にする
	for(let y=0; y<game.rows; y++){
		for(let x=0; x<game.columns; x++){	
			_dungeon[y][x] = SPACE;
		}
	}

	// 柱を倒す方向（上右下左の順）
	const dx = [0, 1, 0, -1];
	const dy = [-1, 0, 1, 0];
	
	// ステージ配列に基づき、ブロック種別を設定
	for(let y=0; y<game.rows; y++){
		for(let x=0; x<game.columns; x++){
			// 周囲を壁にする
			if(y === 0 || y === game.rows-1 || x === 0 || x === game.columns-1){
				_dungeon[y][x] = WALL;
			}
			// 壁の内側に1つおきに柱を立てる
			else if(x >= 2 && x <= game.columns-1 && y >= 2 && y <= game.rows-1 && x%2 == 0 && y%2 == 0){
				_dungeon[y][x] = WALL;

				// 1つおきに立てた柱をランダム（上下左右いづれか）方向に倒す
				let r = 0;
				if(x === 2){	// 左端の柱は4方向（上右下左）
					r = randInt(0, 3);
				}
				else{		// 左端以外の柱は3方向（上右下）
					r = randInt(0, 2);
				}

				// 柱を設置
				_dungeon[y + dy[r]][x + dx[r]] = WALL;
			}
		}
	}
	return _dungeon;
}

ダンジョンの描画

ダンジョンの描画は、Functions.jsにあるdrawDungeon()アロー関数を使います。
CanvasAPIの描画機能であるfillStyleメソッド（塗りつぶし色）とfillRectメソッド（塗りつぶし矩形描画）を利用して塗りつぶされた正方形の描画を行い1ブロックを表現します。

2次元配列dungeonの値がWALL(=1)のときを壁とみなしfillRectを実行します。

/*
 * ダンジョン描画
 */
const drawDungeon = ()=> {
	// ステージ全体をクリア
	g.fillStyle = STAGE_BG_COLOR;
	g.fillRect(0, 0, canvas.width, canvas.height);

	// ステージ配列に基づき、ブロック画像を表示
	for(let y=0; y<game.rows; y++){
		for(let x=0; x<game.columns; x++){
			// ダンジョン配列からブロック種別を取得
			const blockType = dungeon[y][x];

			// ブロック種別により色を変更
			g.fillStyle = BLOCK_COLOR[blockType];

			if(blockType === WALL){						// 壁の描画
				// ■描画
				g.fillRect(x * BLOCK_SIZE + game.offsetX, y * BLOCK_SIZE + game.offsetY, BLOCK_SIZE-1, BLOCK_SIZE-1);
			}
		}
	}
}

ダンジョンの見た目

User.jsでは、1ブロックの大きさやブロックの色などを変更できます。
適当にBLOCK_SIZEやSTAGE_BG_COLOR、BLOCK_COLORなどの定数の値を変えてみてください。

/*
 * ユーザー定義
 */

// サイズ
const BLOCK_SIZE = 32;				// 1ブロックのピクセルサイズ(32x32)

// 色
const STAGE_BG_COLOR = "peachpuff";		// ステージ背景色

// ブロック種別と色
const [SPACE, WALL] = [0, 1, 2, 3];
const BLOCK_COLOR = [STAGE_BG_COLOR, "sienna"];
	:
	:

ちなみに冒頭の画像のダンジョンはBLOCK_SIZEを16としたものです。
BLOCK_SIZEは最小で2まではディスプレイ上で認識できました。

BLOCK_COLORの2番目の要素が壁の色です。（初期値はsienna）
Webカラー（red, blue…）や16進カラー（#ffcc00など）が利用できます。