Second Me

ブラウザ論理パズル「四角に切れ」を作った話：仕組みと当たり判定の工夫

2026-06-16

このブログ「Second Me」では、ブラウザゲームを紹介しつつ自分でも作っていく過程を発信しています。その第一弾として、論理パズル「四角に切れ（Shikaku）」を公開しました。今回は、その開発記録として「どんなパズルか」と「作るときに工夫したところ」をまとめます。

どんなパズル？

「四角に切れ」は、盤面を長方形だけですき間なく・重なりなく埋めていく論理パズルです。ルールはとてもシンプルです。

たとえば「6」という数字があれば、その数字を含む 1×6 や 2×3 の長方形を作る、という具合です。ルールが少ないぶん、慣れるとサクサク、でも詰まると悩ましい——パズルらしい手応えがあります。本作では練習用の 3×3 と、本番の 5×5 を用意しました。

技術的にはとても素朴

中身は 1枚のHTMLファイルだけ。フレームワークもビルドも使わず、素のJavaScript（約180行）で書いています。狙いは「URLを開けば即遊べる・どこにでも置ける」手軽さです。実際、ファイルをそのままブラウザで開いても動きますし、公開も /games/shikaku/ に静的ファイルとして置くだけで済みました。

盤面は CSS Grid で並べ、状態は「どのマスがどの長方形に属するか」を配列で持つだけ。派手なライブラリは使っていません。

工夫したところ① 当たり判定を画面サイズ・拡大率に依存させない

個人開発でいちばんハマりやすいのが、マウス/指の座標を盤面のマスに変換する処理です。素朴に「1マス=50px」のような固定値で計算すると、画面幅が変わったり、ブラウザを拡大/縮小したり、スマホの高解像度ディスプレイになった瞬間にズレます。

そこで本作では、固定ピクセルを一切使わず、入力があったその瞬間に盤面の実寸を測ってマスを逆算しています。やっていることはこれだけです。

  1. getBoundingClientRect() で、いま実際に描画されている盤面の位置とサイズを取得する。
  2. ポインタ座標から盤面の左上を引き、「盤面の実寸 ÷ マス数」で割る。
  3. Math.floor で何行・何列目かを求め、はみ出さないよう端でクランプ（範囲内に丸め）する。

こうすると、画面サイズ・拡大率・デバイスが変わっても、見えている盤面とタップ位置が常に一致します。「環境に依存しない当たり判定」は、固定値をやめて毎回実寸から計算するだけで実現できる、というのが今回の学びでした。

工夫したところ② PCとスマホで同じ操作にする

操作は「ドラッグで長方形を描く／既にある長方形をクリック（タップ）で消す」の2つだけ。これをPCとスマホで同じコードで動かすために、mouse系・touch系を別々に書くのではなく、**Pointer Events（pointerdown / pointermove / pointerup）**に一本化しました。あわせて盤面に touch-action: none; を指定し、ドラッグ中にスマホの画面スクロールが誤発動しないようにしています。

ドラッグ中は、開始マスと現在マスから長方形の範囲を求めてプレビュー表示。指を離した時点で確定します。「いま何を置こうとしているか」が見えるだけで、ぐっと遊びやすくなりました。

遊んでみてください

ルールはすぐ分かるのに、解くのはちょっと頭を使う。スキマ時間にちょうどいいパズルになったと思います。

👉 「四角に切れ」を遊ぶ（ダウンロード不要・登録なし）

次は別のゲームや、この開発で使っている無料ツールの話も書いていく予定です。

この記事が面白かったら、ぜひシェアしてください 👉 Xでシェアする