PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发
2024-09-06 08:28:36
巨坑:
在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 -- 为游戏开发深感自豪
最新文章
- 深入理解javascript原型和闭包系列
- 激活PHPStorm 2016.3
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q52-Q55)
- HDU 4314 Save the dwarfs (DP) ---转载
- php课程---简单的分页练习
- DFT设计绪论
- HDU4631+Set+最近点对
- JavaScript高级程序设计(九):基本概念----语句的特殊点
- 国内5款优秀的WEB前端框架
- 使用C语言和Java分别实现冒泡排序和选择排序
- PLS:利用PLS(两个主成分的贡献率就可达100%)提高测试集辛烷值含量预测准确度并《测试集辛烷值含量预测结果对比》—Jason niu
- 云笔记项目-Spring事务学习-传播REQUIRES_NEW
- MFC中线程相关知识
- Atom与markdown
- fhqtreap初探
- js小游戏:五子棋
- js,javascript,获取地址栏参数
- (Alpha)Let&#39;s-技术文档(技术规格说明书)
- Pandas笔记目录
- java 实现md5加密的三种方式与解密
热门文章
- 2019-2020-1 20199324《Linux内核原理与分析》第五周作业
- idea整合mybatis逆向工程
- [LC] 452. Minimum Number of Arrows to Burst Balloons
- token和refresh token
- CentOS7部署yum环境及虚拟机快照克隆
- Minimum Sum
- BGP联盟
- 常见的Java不规范代码
- python3多线程应用详解(第一卷:线程的本质概念)
- resume|issue|transmit|sake|obliged|beyond her wildest dreams|echo|transmission|immense|consistent |convey to| boasted|satisfaction|rub|enrol|demonize