HTML 5 canvas 游戏停止

Question

我在我的网页上使用 HTML 5 canvas 和 javascript 创建了一个游戏。游戏循环运行，用户可以使用键盘玩这个游戏。网页上的游戏 canvas 的 ID ="gamecanvas".

但是，当视口尺寸减小时，我想停止游戏并用动画替换它（游戏在小屏幕尺寸上玩得不好）

为此我想交换游戏的ID属性canvas FROM ID="gamecanvas"TO ID=="animationcanvas".

这将确保我的动画 Javascript 文件将访问 canavs（与游戏 Javascript 文件相反）。

这是否可能使用 Jquery 并且这最终会导致浏览器崩溃，因为两个脚本正在循环和运行吗？

谁能帮我完成下面的功能？

// HTML 5 canvas 个元素

   <canvas id="gamecanvas" width="800" height="380"></canvas>

//开关ID码

$(document).ready(function() {
var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize < 979) {
        ...... Change ID
    }  
    else {  
        Change Id... 
    } 
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});

非常感谢

Answer 1

切换ID：jsBin demo

$(document).ready(function() {
    var $window = $(window);
    var $canvas = $("canvas");

    function checkWidth() {
       $canvas.attr("id", $window.width()<979 ? "animationcanvas" : "gamecanvas");
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $window.resize(checkWidth);
});

另请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame 取消正在进行的游戏循环。

HTML 5 canvas 游戏停止

HTML 5 canvas game stop

html

jquery

canvas

game-engine