JavaScript 遊戲框架錯誤排查：$.extend 單參數導致 Game 掛載到 jQuery 根對象

問題現象

自定義 xapp.js 使用 $.extend({...}) 定義遊戲框架，運行頁面 new Game() 報錯 Game is not a constructor。

根因分析

$.extend 單參數形式會將對象屬性**合併到 jQuery 命名空間**（即 jQuery.fn 或 jQuery），而非創建獨立構造函數。調用方式變為 $.run()，導致 window.Game 未定義。

修正方案：改用工廠函數返回對象字面量

(function(win) {
    win.Game = function() {
        return {
            init: function() { this.paused = false; },
            mainloop: function() { alert("aaa"); },
            run: function(fps) {
                fps = fps || 60;
                var self = this,
                    spf = (1000 / fps) || 0;
                self.tHand = setInterval(function() {
                    if (!self.paused) { self.mainloop(); } // 注意加 ()
                }, spf);
            },
            pause: function() { this.paused = true; },
            stopGame: function() { clearInterval(this.tHand); }
        };
    };
})(window);

關鍵修正點

• win.Game = function() { return { ... }; } 顯式掛載構造函數到全局。
• self.mainloop() 添加調用括號，原代碼缺少 () 導致主循環不執行。
• 避免污染 jQuery 命名空間，保持框架獨立性。

進階建議

• 使用 ES6 Class 語法重構，語義更清晰。
• 引入 requestAnimationFrame 替代 setInterval，幀率更穩定。
• 狀態機管理遊戲生命周期，支援暫停/恢復/重置。