用 HTML/CSS/JavaScript 打造 2048 小遊戲：從開發到雲端部署的完整記錄

前言

2048 是一款經典的數字合併益智遊戲，玩法簡單卻令人著迷。作為前端學習者，親手實現一個 2048 遊戲是練習 JavaScript 邏輯與 CSS 佈局的絕佳項目。本文記錄我用純 HTML/CSS/JavaScript 打造單文件 2048 遊戲的完整過程，以及部署到雲端的經驗。

一、遊戲規則與設計

2048 的核心規則：

• 4×4 棋盤，每次操作後隨機生成一個 2 或 4
• 方向鍵（上/下/左/右）或觸屏滑動移動所有方塊
• 相同數字相撞時合併，得分累加
• 合成 2048 即勝利；棋盤填滿且無法移動則失敗

設計上採用單文件架構：一個 index.html 包含全部 HTML 結構、CSS 樣式與 JavaScript 邏輯，零依賴、雙擊即可運行。

二、核心邏輯實現

遊戲狀態用一個 4×4 的二維陣列表示。移動操作可抽象為四個方向，共用同一套「壓縮 → 合併 → 壓縮」算法：

1. 壓縮：移除每行/列中的空格（0），讓數字靠邊
2. 合併：相鄰相同數字相加，得分增加
3. 再次壓縮：消除合併後產生的空位

為簡化四個方向的處理，可將棋盤旋轉：向上移動等價於旋轉 90 度後向左移動再轉回來。這種矩陣變換技巧讓代碼更簡潔。

關鍵函數：

• move(direction)：執行移動並返回是否為有效移動
• addRandomTile()：在空格隨機位置生成 2（90%）或 4（10%）
• checkGameOver()：無空格且無可合併相鄰項時判負
• checkWin()：出現 2048 時判勝

三、界面與交互

CSS 方面使用 Grid 佈局繪製棋盤，每個數字用不同背景色區分（2 淺灰、4 米黃、8 橙色……隨數字增大顏色加深），營造層次感。

交互細節：

• 鍵盤監聽 keydown 事件捕捉方向鍵
• 移動端監聽 touchstart/touchend 計算滑動方向
• 重新開始按鈕一鍵重置
• 計分板即時更新，最高分用 localStorage 持久化

四、部署到雲端

本地用 python3 -m http.server 8000 即可預覽。若要長期對外提供訪問，可部署到雲伺服器：

1. 在華為雲購買 ECS（按量計費），配置安全組放行 80/443 端口
2. 安裝 Nginx，將遊戲文件放到網站根目錄
3. 綁定彈性公網 IP，即可通過 http://{EIP}/index.html 訪問

單文件、零依賴的特性讓部署極其簡單，任何靜態託管服務都能直接運行。

五、總結與心得

這個項目讓我深入理解了：

• 二維陣列操作與矩陣變換技巧
• 事件驅動的交互設計
• CSS Grid 響應式佈局
• 從開發到部署的完整鏈路

建議前端學習者親手實現一次 2048，代碼量不大（約 300 行），但涵蓋的知識點非常全面。完整代碼僅一個 HTML 文件，歡迎交流指正！