PhaserJS 3 屏幕適配時的小坑 -- JavaScript Html5 游戲開發(fā)

Pink 發(fā)布于2019-08-02 11:57 / 1406人閱讀

摘要：巨坑在內(nèi)不要把設為在內(nèi)不要把設為在內(nèi)不要把設為重要的事情得說三遍接收更多游戲開源教學為游戲開發(fā)深感自豪

巨坑：
在config內(nèi)不要把 width 設為 window.innnerWidth
在config內(nèi)不要把 width 設為 window.innnerWidth
在config內(nèi)不要把 width 設為 window.innnerWidth

重要的事情得說三遍...

var game;
// once the window loads...
window.onload = function () {
    // 接收 websocket;
    // config of the game;
    var config = {
        type: Phaser.AUTO,
        parent: "bitgame",
        width: 640, // don"t window.innerWidth 
        height: 512,
        physics: {
            default: "arcade",
            arcade: {
                gravity: {
                    y: 0
                },
                debug: false,
            }
        },
        //*** scenes used by the game
        scene:  [BootScene,PlayGameScene,UIScene]
    }
    game = new Phaser.Game(config);
    // game.scene.add("Boot", BootScene); //*** key,class */
    // game.scene.add("PlayGame", PlayGameScene);
    // game.scene.add("UI", UIScene);
    // game.scene.start("Boot");

    window.focus();
    resize();
    window.addEventListener("resize", resize, false);
}
 
function resize() {
      
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio =  game.config.width / game.config.height;
    if (windowRatio < gameRatio) {
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    } else {
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }


}

更多游戲開源教學：www.iFIERO.com -- 為游戲開發(fā)深感自豪

GPU云服務器云服務器屏幕適配屏幕適配教程 iOS屏幕適配 html5游戲開發(fā)html5游戲開發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53231.html

發(fā)表評論

登陸后可評論

0條評論

Pink

男|高級講師

我要關(guān)注我要私信

TA的文章

C 語言是“最環(huán)?！钡木幊陶Z言

閱讀 1528·2021-11-24 09:38
北上廣深杭房價高壓下，這也許是程序員扎根的唯一出路...

閱讀 3377·2021-11-18 10:02
什么是虛擬主機技術(shù)-什么是虛擬主機？

閱讀 3267·2021-09-22 15:29
買主機和買服務器有什么不同-服務器與虛擬主機有什么區(qū)別？

閱讀 2951·2021-09-22 15:15
PIGYun：中秋特惠，香港、韓國CN2+BGP線路，大帶寬，月付14元起

閱讀 1055·2021-09-13 10:25
旅途云：4核/4G/50G硬盤/10Mbps不限流量/100G防御/四川雅安/月付120元

閱讀 1870·2021-08-17 10:13
UCloud夏季促銷來襲，全球31個數(shù)據(jù)中心云服務器大放價低至59元/年

閱讀 2003·2021-08-04 11:13
CSS小技巧（二）：布局

閱讀 1985·2019-08-30 15:54

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

PhaserJS 3 屏幕適配時的小坑 -- JavaScript Html5 游戲開發(fā)

相關(guān)文章