Question

我使用HTML 5画布和javascript在我的网页上创建了一个游戏。游戏循环运行，用户可以使用键盘播放。网页上的游戏画布有一个ID =＆＃34; gamecanvas＆＃34;。

然而，当视口尺寸减小时，我想停止游戏并将其替换为动画（游戏在小屏幕尺寸上播放效果不佳）

为了达到这个目的，我想要改变游戏画布 FROM 的ID属性 ID =＆＃34; gamecanvas＆＃34; TO ID = =＆＃34; animationcanvas＆＃34;。

这将确保我的动画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画布游戏停止

1 个答案: