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

PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发的更多相关文章

  1. Phaser3 屏幕适配iPhoneX、iPhoneXs的坑 -- JavaScript Html5 游戏开发

      PhaserJS 坑:在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设为 window.innnerWidth在config内不 ...

  2. Html5游戏开发-145行代码完成一个RPG小Demo

    lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...

  3. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

  4. HTML5游戏开发,剪刀石头布小游戏案例

    剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...

  5. python滴啊用caffe时的小坑

    在使用caffe的python接口时, 如下,如果标黄的部分不加上的话,两次调用该函数,后面的会将前面的返回值覆盖掉,也就是fea1与fea2相等,但是fea1_ori会保留原来的fea1 解决方法为 ...

  6. 【HTML5游戏开发小技巧】RPG情景对话中,令文本逐字输出

    以前用JAVAscript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下.canvas里的内容可不像<p>那样好操作,首先,你需要懂得一些html5的API才能操 ...

  7. 【HTML5游戏开发小技巧】RPG情形对话中,令文本逐琢夸出

    从前用JAVAscript完成过令文本逐琢夸出的效果,明天嗡炒用html5中的canvas完成一下.canvas里的内容可没有像<p>那样好操做,起首,您需求懂得一些html5的API才气 ...

  8. Unity2D多分辨率屏幕适配方案(转载)

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  9. [原创]一种Unity2D多分辨率屏幕适配方案

    此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...

随机推荐

  1. 一个简单的jQuery回调函数例子

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...

  2. day14-单继承

    #面向对象的三大特征:继承.多态.封装. #一.单继承: # 1. class Animal: #没有父类,默认继承了顶级父类object类. def __init__(self,name,aggr, ...

  3. wsdl中含ref="s:schema"时处理

    转载地址:http://ljhzzyx.blog.163.com/blog/static/38380312201471375946602/

  4. [LC] 234. Palindrome Linked List

    Given a singly linked list, determine if it is a palindrome. Example 1: Input: 1->2 Output: false ...

  5. 实现JS脏话筛选替换的几种途径

    一.逐个替换用replace 缺点:筛选的脏话集太少 var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').va ...

  6. 61)PHP,立即跳转

    一般使用   header(‘Location:’)来进行跳转. ******************************************************************* ...

  7. 吴裕雄--天生自然python学习笔记:人脸识别用到的特征文件haarcascade_frontalface_default.xml下载

    下载地址:https://github.com/opencv/opencv/tree/master/data/haarcascades 1.找到haarcascade_frontalface_defa ...

  8. spring boot学习4 多环境配置

    说明: 在企业中,一个项目一般都有测试环境(test) .开发环境(dev).生产环境(pro)等等.在每个环境中,配置信息会不一样的.比如数据库.静态资源文件位置等都会不一样的. 那么使用sprin ...

  9. python后端面试第七部分:项目部分--长期维护

    ##################    项目部分       ####################### 1,你怎么测试自己的代码的?自测 2,开发使用windows还是Linux,虚拟环境的 ...

  10. TPO1-1 Groundwater

    If the pores are large,the water in them will exist as drops too heavy for surface tension to hold,a ...