PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发

piglei 发布于2019-08-05 15:23 / 2680人阅读

摘要：巨坑在内不要把设为在内不要把设为在内不要把设为重要的事情得说三遍接收更多游戏开源教学为游戏开发深感自豪

巨坑：
在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 -- 为游戏开发深感自豪

云服务器混合云屏幕适配屏幕适配教程 iOS屏幕适配 html5游戏开发html5游戏开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58561.html

PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发

摘要：巨坑在内不要把设为在内不要把设为在内不要把设为重要的事情得说三遍接收更多游戏开源教学为游戏开发深感自豪 showImg(https://segmentfault.com/img/remote/1460000016934375); 巨坑：在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设为 window.innnerWid...

Pink 2019-08-02 11:57 评论0 收藏0
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