まるっとアプリ #07｜2048 パズル （全コード＋作り方つき）

スキマ時間にやりだすと止まらない、あの「2048」を自分の手で作ってみませんか。
同じ数字のタイルを寄せて合体させ、2048を目指すパズルです。矢印キーでもスワイプでも遊べて、ベストスコアは自動保存、一手戻す（アンドゥ）にも対応。HTMLファイル1個で完結し、サーバーもライブラリもいりません。
この記事を買うと、完成品のアプリ一式（HTMLファイル1個）と、全コード＋作り方の解説が手に入ります。

■ シリーズ『まるっとアプリ』（第7回）

「買うと“動くアプリ”が手に入る。さらに全コードにコメント＆作り方の解説つき。改造もできる」――1記事完結のシリーズです。

• #01 定時退社理由ジェネレーター

• #02 実質時給シミュレーター

• #03 画像圧縮・リサイズツール

• #04 合言葉で暗号化メモ

• #05 ナンプレ（数独）

• #06 強いパスワード生成ツール

• #07 2048パズル 👈 いまここ

各号は独立しているので、この記事だけ買えば完結します（#01〜#06は不要）。すべてHTML1ファイルで動く・サーバー不要・コピペで完成。

🎮 まずは完成品で遊んでみてください（無料）

矢印キー（スマホはスワイプ）でタイルを上下左右に寄せると、ぶつかった同じ数字どうしが合体して2倍になります。`2`と`2`で`4`、`4`と`4`で`8`……と育てて、`2048`のタイルを作れたら勝ち。完成品とまったく同じものを、無料で公開しています。

▶ デモ（無料・登録不要）：
2048【無料】数字合体パズルゲーム・元に戻す&スコア記録付き | MyTool Studio

数分遊ぶと、「あれ、この“寄せて合体”って、プログラムでどう書くんだろう？」が気になってくるはずです。実はこのゲーム、ロジックの9割は『1列を左に寄せる』処理だけでできています。残りの3方向（右・上・下）は、その処理を“使い回して”いるんです。そのカラクリを、この記事で全部開きます。

このアプリでできること

• 🎮 本格的な2048：4×4盤面。同じ数字を合体させて2048を目指す王道ルール

• ⌨️ キーボード操作：矢印キーでサクサク。PCでじっくり遊べる

• 📱 スワイプ操作：スマホ・タブレットでは指でスイッ。タッチ最適化済み

• ↩️ アンドゥ（一手戻す）：「いまの操作ミスった！」を最大5手まで取り消し

• 🏆 ベストスコア自動保存：ブラウザに記録（localStorage）。次に開いても残る

• ✨ 気持ちいいアニメーション：タイルの出現・合体がぴょこっと動く

• 🔒 完全ブラウザ内・サーバー不要：データはどこにも送信されません

仕組みのざっくり解説（ここまで無料）

このゲームの設計は、突きつめると次の2段構えです。

1. 盤面は「長さ16の数字の配列」：4×4のマスを `[0,2,0,4, …]`（0は空きマス）という1本の配列で持ちます。これだけです。

2. 動かす処理は「左に寄せる」1つだけ作る：右・上・下は、配列を反転したり・縦に取り出したりしてから同じ「左寄せ」にかける。終わったら元に戻す。これで4方向ぶんのコードを書かずに済みます。

そして、このアプリには教材として面白いポイントが詰まっています。

• 「寄せて合体」を配列操作だけで書く：0を詰める→隣の同じ数字を1回だけ合体→末尾を0で埋める

• 1方向のロジックで4方向を動かす：reverse（反転）と転置（行⇄列）の合わせ技

• 新しいタイルの出し方：空きマスから等確率で選び、9割で`2`・1割で`4`

• 勝ち負けの判定：2048ができたか／もう動かせる手が残っているか

• キーボードとスワイプの両対応：1つの「移動」関数に、2種類の入力をつなぐ

どれも「ゲームのロジックって、こう組み立てるのか」が手を動かしながら腑に落ちる題材です。HTML1ファイルで完結し、外部ライブラリもサーバーもいりません。

ここから先は、その**全コード（コメント付き）**と、自分好みに改造する方法です。盤面を5×5にしたり、勝ちの目標を4096に上げたり、タイルの色やアニメを変えたりできます。

■ ご購入前にご確認ください

• 含まれるもの：HTMLファイル1個ぶんの全コード（CSS・JavaScript込み・コメント付き）と、作り方／改造の解説。

• 動作環境：PC・スマホのモダンなブラウザ（Chrome / Edge / Safari など）。インストール不要。ダブルクリックで開けます。

• 必要な知識：不要です。コピー＆貼り付けができれば動きます。改造もコメントの通りに進めればOK。

• コードについて：個人利用・商用利用OK（自分のサイトやブログに置く・改造して使うのは自由）。ただしコードそのものの再配布・転売・テンプレート販売はご遠慮ください。

• その他：本記事はゲームのプログラミング学習・娯楽を目的としたものです。返金は受け付けておりません。

それではどうぞ。