🎮 JavaScriptで作る「15パズル」
最近、枕から知らない人の香りが漂ってきた大田です。
これまでたくさんのシステム開発に携わり、現在は執行役員という立場で社内業務はもちろん、客先案件や新規事業推進など、幅広い領域で活動を行っています。
Q：JavaScriptでゲームを作るとは？
急速にAIが発達してきている中、人がプログラミングを書く機会もどんどん少なってきています。
日々、エンジニアとして求められる力も変わってきている中、初心に戻り「プログラムに触れる楽しさ」を味わってほしいと考え始めたのがこの「JavaScriptでゲームを作ろう」の目的です。
Q：なぜJavaScriptなのか？
開発環境を不要(テキストエディタのみ)とし、htmlファイル一つで動く最軽量のもの、且つ目に見えて動きがあるものを作りたいと思い以下の技術要件を選定しました。
- 使用技術：HTML, JavaScript, CSS
- フォント：Press Start 2P（Google Fonts）
15パズルとは？
15パズルは、4×4のマスに1枚の画像を16分割したピースを並べて、元の絵を完成させることを目指すパズルゲームです。
そのうち1つのピースは「空白」となっていて、プレイヤーはこの空白を使ってピースをスライド移動し、正しい位置に並べ直していきます。
ルール
- ゲーム開始時、画像のピース（全16個のうち15個）がランダムにシャッフルされて表示されます
- 1つだけ空いているマスがあり、空白に隣接するピースのみスライド移動できます
- プレイヤーはピースを動かして、元の絵が正しく表示されるように並べ直します
- すべてのピースが正しい位置にそろうとゲームクリアとなります
実際に遊んでみる
- クリック：移動
- Qキー：パネル番号表示
- Aキー：完成図表示
ソースコード
使用している画像について
こちらは弊社が作成した無人受付システム「HELLOT(ハロット)」のサービスロゴになります。
サービスの内容については、以下弊社HPのサービス紹介ページをご覧ください。
🐱HELLOT紹介ページ
開発のポイント
1. CSSによる画像分割レイアウトの実現
btn.style.backgroundImage = `url('${imageURL}')`;
btn.style.backgroundPosition = `${posX}px ${posY}px`;
- 背景画像をタイルごとに background-position を設定し、1枚の画像を16等分して並べているように見せる
- この手法により、canvasやimage切り出しを使わずに高速にUIを構築可能
2. スライド処理のロジックと「連続スライド対応」
if (tileRow === emptyRow) {
// 左右移動
} else if (tileCol === emptyCol) {
// 上下移動
}
- タイルクリック時、空白マスと同一行または列にある場合は連続スライドを実装
- 1ステップずつ動かすのではなく、間にあるタイルを順にシフトして空白へ向かわせる
3. ゲームのタイマーと手数カウント
timerInterval = setInterval(() => {
elapsedSeconds++;
updateInfoPanel();
}, 1000);
- 状態（moveCount, elapsedSeconds）を変化させた際は、必ず updateInfoPanel() を呼び、DOM表示を最新状態に同期
4. 操作性の高いUXと非同期的クリア演出
if (isGameClear()) {
setTimeout(() => {
alert("おめでとうございます！");
}, 300);
}
- パズルが完成した瞬間にDOMの再描画が入るため、setTimeoutで微小ディレイを入れることでアニメーションが完了してからアラートを出す設計
まとめ
本プロジェクトでは、純粋なJavaScriptだけで15パズルを構築しました。
意外とシンプルな構造で、ゲームロジックの学習にもぴったりな題材です。
ソースコードも全量記載しておくので、好きに改造して使ってください！
