接住掉落的方塊 - 官方介紹網站

遊戲特色

我們致力於提供最佳的遊戲體驗

雙重操控模式

隨意切換鍵盤與滑鼠，享受最順手的操作體驗，精準接住每一個方塊。

即時語言切換

內建繁體中文與英文雙語，一鍵切換，無縫接軌，提供無國界的遊戲樂趣。

輕量化設計

無需安裝，純 HTML/JS/CSS 打造，打開瀏覽器即可立即遊玩，隨時隨地享受樂趣。

運作原理

採用現代網頁技術打造

HTML5 Canvas

遊戲畫面基於強大的 Canvas 技術，透過 JavaScript 動態繪製每一幀動畫，從玩家平台到掉落的方塊，一切都在畫布上即時生成。

遊戲循環 (Game Loop)

採用瀏覽器優化的 `requestAnimationFrame` 打造流暢的動畫體驗。在每一幀中，遊戲都會更新物件狀態、處理玩家輸入並重新繪製畫面。

碰撞偵測 (Collision Detection)

透過精準的數學計算，即時判斷方塊是否與玩家平台接觸。這是遊戲計分與結束判定的核心機制。

代碼運作剖析

深入了解遊戲背後的程式碼

HTML 結構

HTML 負責定義網頁的基本骨架。最重要的元素是<canvas>，它就是我們的遊戲畫布。其他元素如<button>和<span>則用於控制遊戲和顯示分數。

<!-- 遊戲畫布元素 -->
<canvas id="gameCanvas" width="600" height="400"></canvas>
    
<!-- 遊戲控制項 -->
<div class="game-controls">
    <span id="score">分數: 0</span>
    <button id="startButton">開始遊戲</button>
</div>

JavaScript 核心邏輯

JavaScript 是遊戲的大腦，處理所有動態行為。我們將玩家和方塊都視為「物件」(Object)，各自擁有位置、大小和速度等屬性。

// 玩家物件範例
const player = {
    x: canvas.width / 2 - 40,
    y: canvas.height - 20,
    width: 80,
    height: 10,
    speed: 15
};

遊戲的核心是update函式，它構成了一個不斷循環的「遊戲迴圈」。每一幀，它都會清除畫布、移動物件、檢查碰撞，然後重新繪製所有內容。

function update(time) {
    if (gameOver) return; // 如果遊戲結束就停止

    // 1. 清除舊畫面
    clearCanvas();

    // 2. 更新物件狀態 (移動、生成、碰撞)
    spawnBlock(time);
    updateBlocks();
    movePlayerByKey();

    // 3. 繪製新畫面
    drawPlayer();
    drawBlocks();
    
    // 4. 請求下一幀，形成循環
    requestAnimationFrame(update);
}