箱入り娘と言っても、竈門 禰豆子（かまど ねずこ）の事ではありません。
・・・「箱入り娘」で画像検索したら「ねずこ」がヒットしてワロタ・・・。
今回パズルの方は、以下の２点を改良しただけで、使用画像は前回と変えていません。
- タブレット端末での表示が小さかったので、大きく表示されるように改善。（ただし、自分の持っている端末でしか判断できていませんので、悪しからず。）
- ゲームクリア後に、駒の選択（と移動）ができてしまうバグを改修。
以下の画像をクリックすると実際のゲームを表示します。
タブレットでの表示を改善しました！ Ver.1.02 → Ver.1.03
HTMLのmeta要素で、viewportの設定を変えてみました。
これまでより、駒をタップしやすくなったと思います。
（縦持ちの画面に合わせています。横持ちでははみ出します。）
（あくまでも、自分の端末での表示です。解像度によっては小さくなるかも知れません。）
スマホの表示も多少改善されました！ Ver.1.02 → Ver.1.03
ちなみに、スマートフォンでの表示も、若干大きくなりました。
（こちらも、縦持ちの画面に合わせています。横持ちでははみ出します。）
（あくまでも、自分の端末での表示です。端末によっては問題があるかも知れません。）
ソースはこちら
hakoiri_103.html
- （5行目）
viewpointのcontentで、width=640、user-scalable=no としています。
PC以外（タブレットやスマホ）では、ここの設定が適用されます。
これが最適解かは不明です。 - （7行目）
ヘッダ内で「hakoiri_103.js」を指定しています。 - （12行目）
aCanvasエリアのブロック指定と、センタリングの為にmargin-rightとmargin-leftにautoを指定。
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,user-scalable=no" />
<title>箱入り娘</title>
<script type="text/javascript" src="hakoiri_103.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; }
#aCanvas { display:block; margin-right:auto; margin-left:auto; }
html, body { width:100%; height:100%; }
</style>
</head>
<body>
<div id="top_title"><!--<h1>箱入り娘</h1>--></div>
<div id="info">-</div>
<canvas id="aCanvas"></canvas>
</body>
</html>
hakoiri_103.js
- （7行目）
パズル用画像は前Ver.と同じ「resource_102.png」を指定しています。 - （83～85行目）
ゲームクリア後の場合は、駒の選択を拒否。（選択できなければ移動も不可。） - （121～145行目）
前回、「2クリックで移動していたところを、1クリックで移動可能」とした変更箇所ですが、「//斜めへの移動」に関する条件式を簡略化（136～139行目）、一部の変数を入れ替え（CH_SIZE[sel_no][1]をsel_hに、CH_SIZE[sel_no][0]をsel_wに入れ替え）、無駄な空白を切り詰めて多少閲覧性を改善しました。やっていることは変化なしです。
// file: hakoiri_103.js
// --- 定数の宣言 ---
var CW = 100; // 駒の最小幅
var COLS = 6, ROWS = 7;
var CANVAS_W = CW * COLS;
var CANVAS_H = CW * ROWS;
var RESOURCE_FILE = "resource_102.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.png上の隙間と駒、箱の立置を定義
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 play_msg = "<h1>箱入り娘</h1>"; // PUZZLEのタイトル
var clear_msg = "<h1>箱入り娘 CLEAR !</h1>"; // PUZZLE クリア時のタイトル
var aCanvas, ctx; // キヤンバスとコンテキスト
var images; // 画像オブジエク卜
var stage; // ステ一シを表す変数
var turn; // 手数
var sel_x, sel_y, sel_no; // 選択中の駒情報
var t_out = 15; //クリア後のタイムアウト秒数
// --- 初期化イべント ---
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() {
document.getElementById('top_title').innerHTML = play_msg;
$("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) || (sel_no <= 0 && no == __) ||
(sel_no == DT && sel_x == 2 && sel_y == 4)) 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;
// 駒が隣り合っているかを判定する
// console.log("test045 sel_x="+sel_x+" sel_y="+sel_y+" x="+x+" y="+y);
if (sel_x==x) { //縦への移動
res = (Math.abs(y-sel_y)<=1) ||
((Math.abs(y-sel_y)==2) && (stage[sel_y+1][sel_x]==__))||
((Math.abs(y-sel_y)==2) && (stage[sel_y-1][sel_x]==__))||
(sel_h==2 && (stage[sel_y+2][sel_x]==__))||
(sel_h==2 && (stage[sel_y-2][sel_x]==__));
}
if (sel_y==y) { //横への移動
res = (Math.abs(x-sel_x)<=1) ||
((Math.abs(x-sel_x)==2) && (stage[sel_y][sel_x+1]==__))||
((Math.abs(x-sel_x)==2) && (stage[sel_y][sel_x-1]==__))||
(sel_w==2 && stage[sel_y][sel_x+2]==__)||
(sel_w==2 && stage[sel_y][sel_x-2]==__);
}
if ((Math.abs(x-sel_x)==1) && (Math.abs(y-sel_y)==1)) { //斜めへの移動
res = (stage[sel_y+(y-sel_y)][sel_x]==__)||
(stage[sel_y][sel_x+(x-sel_x)]==__);
}
if ((Math.abs(x-sel_x)>=3) ||
(Math.abs(y-sel_y)>=3) ||
((Math.abs(x-sel_x)==2) && (Math.abs(y-sel_y)==1)) ||
((Math.abs(x-sel_x)==1) && (Math.abs(y-sel_y)==2)) ||
((sel_h==2) && ((Math.abs(x-sel_x)>=1) && (Math.abs(y-sel_y)>=1))) ||
((sel_w==2) && ((Math.abs(x-sel_x)>=1) && (Math.abs(y-sel_y)>=1)))) 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() {
document.getElementById('top_title').innerHTML = clear_msg;
$("info").innerHTML = "ゲームクリア! (" + turn + "手)";
drawScreen();
// t_out秒後にゲームを再開する
let count = 0;
const countUp = () => {
$("info").innerHTML = "ゲームクリア! (" + turn + "手) " + (t_out - count) +"";
const timeoutId = setTimeout(countUp,1000);
count++;
if (count > t_out){
clearTimeout(timeoutId);
initGame();
}
}
countUp();
}
// --- 画面の描画 ---
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 == DT && sel_x == 2 && sel_y == 4) {
// ハイライト不要
}else{ //ゲームクリアしてないなら
// 選択範囲をハイライ卜
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);
}