Question

我试图找出将Flash游戏融入html5的最佳方式。

我使用自定义html，css，js构建了一个游戏，并且在任何桌面/移动屏幕上都有游戏全屏，苹果设备上的音频问题等问题。

据我检查所有html5游戏都是用canvas创建的。我试图了解是否可以使用画布创建任何类型的Flash游戏，并避免问题我想让游戏全屏没有任何问题或自定义编码，避免音频问题。

是否可以使用画布从Flash游戏中创建任何类型的结构？

我是Canvas的新手，所以我需要知道所有的优点和缺点，看看画布性能是否会比自定义的html更好。

此外，游戏将拥有游戏逻辑的API，因此将游戏API与画布集成起来有多容易？

大多数游戏都是老虎机游戏，因此我需要获胜组合逻辑，大量动画。任何帮助都很赞赏。感谢。

Answer 1

请注意，此代码段不适用于stackoverflow，因为它嵌套在iframe中

全屏是一项标准功能，支持范围相当广泛：https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Browser_compatibility

var c = document.body.appendChild(document.createElement("canvas"));
var ctx = c.getContext("2d");
c.width = window.outerWidth;
c.height = window.outerHeight;
ctx.textAlign = "center";
ctx.font = "120px Arial";
setInterval(function () {
    c.width = window.outerWidth;
    c.height = window.outerHeight;
    ctx.fillStyle = "rgba(" +
        (Math.floor(Math.random() * 255)) + "," +
        (Math.floor(Math.random() * 255)) + "," +
        (Math.floor(Math.random() * 255)) +
        ",0.5)";
    ctx.fillRect(Math.floor(Math.random() * c.width), Math.floor(Math.random() * c.height), Math.floor(Math.random() * c.width), Math.floor(Math.random() * c.height));
    ctx.fillStyle = "white";
    ctx.fillText("Click for fullscreen", Math.floor(c.width / 2), Math.floor(c.height / 2));
    ctx.strokeText("Click for fullscreen", Math.floor(c.width / 2), Math.floor(c.height / 2));
}, 1000 / 60);
c.onclick = function goFullScreen(evt) {
    if (c.requestFullscreen) {
        c.requestFullscreen();
    }
    else if (c.webkitRequestFullScreen) {
        c.webkitRequestFullScreen();
    }
    else if (c.mozRequestFullScreen) {
        c.mozRequestFullScreen();
    }
};

用Canvas或自定义html结构创建am html5游戏是否正确

1 个答案: