箱入り娘パズル

20140529a

日経ソフトウェア2014年7月号「HTML5でゲームを作ろう(第8回)」に掲載された「箱入り娘パズル」です。

今回もプログラムソースには手を加えていません。HTML は少し手を加えました。(※)

右の画像をクリックすると実際のゲームを表示します。

箱の中に収められている10個の駒を動かして、一番大きな駒である「娘」を箱から出してやってください。

・・・難解過ぎて、いまだクリアできず。

・・・なので、クリアした時の処理が正常なのか確認できていません。

・・・悪しからず。

5月29日(夕方)追記:
案の定、クリア処理を呼ぶ部分とアラート表示に記述ミスがありました。(hakoiri.jsファイル139行目と143行目)

[変更前:] setTimeout(gameC1ear, 1);
[変更後:] setTimeout(gameClear, 1);

・・・OCRの変換ミスに気づかなかった・・・。

[変更前:] alert(“ゲームクリア! (” + turn + “手”);
[変更後:] alert(“ゲームクリア! (” + turn + “手)”);

・・・OCRの日本語変換ミス修正時に誤ってカッコを削除・・・。



ゲームに使用している画像は2つ。

back

背景の画像。

フリー素材のサイトから入手。

resource



パズルで利用している画像。

GIMPで適当に作成。

フリー素材も活用しました。ありがとうございました。



ソースはこちら。

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="target-densitydpi=device-dpi,
		 width=device-width; initial-scale=1.000; maximum-scale=1.0;
		 user-scalable=0;">
		<title>箱入り娘</title>
		<script type="text/javascript" src="hakoiri.js"></script>
		<style>
			* { margin:0; padding:0; text-align:center; }
			body { background-image: url('back.png'); }
			h1 { background-color: #cccc99; color:white; padding:7px; font-size:1.5em; }
		</style>
	</head>
	<body>
		<h1>箱入り娘</h1>
		<div id="info">-</div>
		<canvas id="aCanvas"></canvas>
	</body>
</html>

(※)ヘッダ部に viewport と title だけは追加しました。

// file: hakoiri.js
// ---  定数の宣言 ---
var CW = 50; // 駒の最小幅
var COLS = 6, ROWS = 7;
var CANVAS_W = CW * COLS;
var CANVAS_H = CW * ROWS;
var RESOURCE_FILE = "resource.png";
// 隙間と駒、 箱の枠を定義
var __=0,DT=1,K2=2,K3=3,K4=4,K5=5;
var K6=6,K7=7,K8=8,K9=9,KA=10,XX=11;
// 隙間と駒、 箱の枠のサイズを定義
var CH_SIZE = [
[1,1],[2,2],[1,2],[1,2],[1,2],[1,2],
[2,1],[1,1],[1,1],[1,1],[1,1],[1,1]];
// resource.pngi上の隙間と駒、箱の立置を定義
var CH_POS = [0,1,3,4,5,6,7,9,10,11,12,13];
// 箱の中(ステ一ジ)の初期状態を定義
var DEF_STAGE = [
[XX,XX,XX,XX,XX,XX],
[XX,K2,DT,DT,K3,XX],
[XX,K2,DT,DT,K3,XX],
[XX,K4,K6,K6,K5,XX],
[XX,K4,K7,K8,K5,XX],
[XX,K9,__,__,KA,XX],
[XX,XX,XX,XX,XX,XX]
];
// --- 大域変数の定義 ---
var aCanvas, ctx; // キヤンバスとコンテキスト
var images;			// 画像オブジエク卜
var stage;			// ステ一シを表す変数
var turn;			// 手数
var sel_x, sel_y, sel_no; // 選択中の駒情報

// --- 初期化イべント ---
window.onload = function() {
	// キヤンバスのサイズをセツ卜
	aCanvas = $("aCanvas");
	aCanvas.width = CANVAS_W;
	aCanvas.height = CANVAS_H;
	// キヤンバスのイべン卜をセツ卜
	aCanvas.onclick = clickHandler;
	// 描画コンテキス卜の取得
	ctx = aCanvas.getContext("2d");
	// リソース画像を読み込む
	$("info").innerHTML =  " 少々お待ちください";
	images = new Image();
	images.src = RESOURCE_FILE;
	images.onload = initGame;
};
// ゲームのバラメー夕を初期化
function initGame() {
	$("info").innerHTML = "-";
	stage = cloneArray(DEF_STAGE);
	turn = 0;
	sel_x = sel_y = sel_no = -1; // 未選択
	drawScreen();
}
// --- マウスイベント ---
function clickHandler(e) {
	var pt = getClientPos(e);
	var x = Math.floor(pt.x / CW);
	var y = Math.floor(pt.y / CW);
	clickstage(x, y);
}
// --- マウス座標を変換する --- 
function getClientPos(e) {
	var res = { x:0, y:0 };
	var rect = e.target.getBoundingClientRect();
	res.x = e.clientX - rect.left;
	res.y = e.clientY - rect.top;
	return res;
}
// --- 駒の移動処理 ---
// (x,y)をクリツクした時の処理
function clickstage(x, y) {
	var no = stage[y][x];
	console.log("click=" + no);
	// クリツクしたのが枠なら何もしない
	if (no == XX) return;
	// 選択状態で隙間を選択した場合
	if (no == __ && sel_no > 0) {
		checkMove(x, y);
		return;
	}
	// 選択座標を記録する
	sel_x = x; sel_y = y; sel_no = no;
	// 選択座標を補正。娘の駒なら必ず左上になる
	if (CH_SIZE[no][0] > 0) {
		if (stage[y][x-1] == no) sel_x--;
	}
	if (CH_SIZE[no][1] > 0) {
		if (stage[y-1][x] == no) sel_y--;
	}
	$("info").innerHTML = "移動方向をクリックしてください。";
	drawScreen();
}
// 移動可能か判定
function checkMove(x, y) {
	// 移動先が隙間かを確かめる
	// ただし右か下に移勤する場合を考慮
	var sel_w = CH_SIZE[sel_no][0];
	var sel_h = CH_SIZE[sel_no][1];
	if (sel_w >= 2 && sel_x < x) x -= sel_w-1;
	if (sel_h >= 2 && sel_y < y) y -= sel_h-1;
	var res = loop2(sel_h, sel_w, function(e) {
		var nx = e.x + x;
		var ny = e.y + y;
		var v = stage[ny][nx];
		if (v != __ && v != sel_no) {
			e.stop = true;
		}
	});
	if (!res) return;
	// 駒が隣り合っているかを判定する
	if (sel_x == x) {
		res = (Math.abs(y - sel_y) <= 1);
	}
	if (sel_y == y) {
		res = (Math.abs(x - sel_x) <= 1);
	}
	if (sel_x != x && sel_y != y) res = false;
	if (!res) return;
	console.log("canMove");
	// 既存の場所を隙間にする
	loop2(sel_h, sel_w, function(e) {
		stage[sel_y+e.y][sel_x+e.x] = __;
	});
	// 新しい位置に駒を移動
	loop2(sel_h, sel_w, function(e) {
		stage[y+e.y][x+e.x] = sel_no;
	});
	// 選択継続
	sel_x = x; sel_y = y;
	turn++;
	$("info").innerHTML = "第" + turn + "手 移動しました。";
	drawScreen();
	// クリア判定
	if (sel_no == DT && sel_x == 2 && sel_y == 4) {
		setTimeout(gameClear, 1);
	}
}
function gameClear() {
	alert("ゲームクリア! (" + turn + "手)");
	initGame();
}
// --- 画面の描画 ---
function drawScreen() {
	// 箱を描画
	ctx.drawImage(images,
		CH_POS[XX] * CW, 0, CANVAS_W, CANVAS_H,
		0, 0, CANVAS_W, CANVAS_H);
	// 隙間と各駒を描画
	var tmp = []; // 描画済みを記録するための変数
	loop2(ROWS,COLS, function(e) {
		row = e.y;
		col = e.x;
		var no = stage[row] [col];
		// 枠あるいは既に描画済みならスキップ
		if (tmp[row*COLS+col]||no==XX) return;
		var w = CH_SIZE[no][0];
		var h = CH_SIZE[no][1];
		var p = CH_POS[no];
		var tx = col * CW;	// 描画先x
		var ty = row * CW;	// 描画先y
		var tw = w * CW;	// 描画サイズ幅
		var th = h * CW;	// 描画高さ
		ctx.drawImage (images ,
			p * CW, 0, tw, th,
			tx, ty, tw, th
		);
		// 描画済みであることをセット
		loop2(h, w, function(f) {
			var nx = f.x + col;
			var ny = f.y + row;
			tmp[ny*COLS+nx] = no;
		});
		// 選択範囲をハイライ卜
		if (sel_no == no) {
			ctx.fillStyle = "rgba(255,100,100,0.5)";
			ctx.fillRect(tx, ty, tw, th);
		}
	});
}
// --- 便利関数 ---
// 配列のク口ーンを作成
function cloneArray(a) {
	var b = [];
	for (var i = 0; i < a.length; i++) {
		if (typeof(a[i]) == "object") {
			b[i] = cloneArray(a[i]);
		} else {
			b[i] = a[i];
		}
	}
	return b;
}
// 2重のforルーブをラツプした関数
function loop2(rows, cols, callback) {
	var e = {x:0, y:0, stop:false};
	for (var y = 0; y < rows; y++) {
		e.y = y;
		for (var x = 0; x < cols; x++) {
			e.x = x;
			callback(e);
			if (e.stop) return false;
		}
	}
	return true;
}
// DOM要素を返す
function $(id) {
	return document.getElementById(id);
}

2022年8月1日 イラストを貼り付けてみました。

2022年12月28日 2クリックで移動していたところを、1クリックで移動可能としました。