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

Pink 發布于2019-08-02 11:57 / 1401人閱讀

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

巨坑：
在config內不要把 width 設為 window.innnerWidth
在config內不要把 width 設為 window.innnerWidth
在config內不要把 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 -- 為游戲開發深感自豪

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53231.html

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

摘要：巨坑在內不要把設為在內不要把設為在內不要把設為重要的事情得說三遍接收更多游戲開源教學為游戲開發深感自豪 showImg(https://segmentfault.com/img/remote/1460000016934375); 巨坑：在config內不要把 width 設為 window.innnerWidth在config內不要把 width 設為 window.innnerWid...

mumumu 2019-08-23 12:52 評論0 收藏0
前端工程化工具初選

摘要：面對日益紛雜的前端工具，作為新人常感無從下手。腳手架應用開發流程與工具項目生成器集成方案解決前端開發中自動化工具性能優化模塊化框架開發規范代碼部署開發流程等問題框架簡潔直觀強悍的框架，讓開發更迅速后端程序的福音。　　面對日益紛雜的前端工具，作為新人常感無從下手。經過一番檢索和簡單對比，再結合自己的喜好，篩選了將要學習和使用的工具，以適應日益工程化、專業化的 Web 前端開發工作。 s...

Rocture 2019-08-19 18:33 評論0 收藏0
SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0
Phaserjs3 對象池隨機產生炸彈并銷毀 -- Html網頁游戲開發

showImg(https://segmentfault.com/img/remote/1460000016964470); showImg(https://segmentfault.com/img/remote/1460000016964471); scene.js /// use strict; var BootScene = new Phaser.Class({ Extends...

xushaojieaaa 2019-08-23 13:01 評論0 收藏0