Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发
一、首先当然得有至少有二个场景sceneA.js,sceneB.js
二、从场景A传值到场景B二种方法
1)通过事件this.events.emit('event key',{objKey:objValue});
从sceneA通过 ths.events.emit时传值到sceneB时有个需要特别注的事项就是，得把sceneB的 active设为 ture,否则因为 sceneB还未激活，是监听不到 events.on事件的!!!
2)通过场景启动this.scene.start('gameB key',{objKey:objValue});
具体详见代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="libs/phaser/phaser.min.js"></script>
<script src="scripts/scenes/gameconfig.js"></script>
<script src="scripts/scenes/sceneA.js"></script>
<script src="scripts/scenes/sceneB.js"></script>
<title>iFIERO Games Tutorial</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
margin: 0;
position: relative;
top: 0%;
left: 0%;
}
</style>
</head>
<body>
<div id="game"></div>
©Copyrigths By www.iFIERO.com
</body>
<script src="libs/jquery/jquery.min.js"></script>
</html>
sceneA.js
'use strict';
var SceneA = new Phaser.Class({
Extends: Phaser.Scene,
// 在整个工程中只会执行一次
initialize: function BootScene() {
Phaser.Scene.call(this, {
key: 'sceneA',
active: false // listening resize event;
});
},
// 每次调用场景SceneA会执行一次;
init: function () {
},
preload:function(){
},
create:function(){
// 1. 从SCENEA emit gameCountDown事件,传送 {countDown:10} 对象到场景B sceneB
this.events.emit('gameCountDown',{countDown:10}); //* 事件KEY=>gameCountDown
// 2.start方法传送
this.scene.start('sceneB',{countDown:10}) //* 场景KEY=> sceneB
},
});
sceneB.js
'use strict';
var SceneB = new Phaser.Class({
Extends: Phaser.Scene,
initialize: function BootScene() {
Phaser.Scene.call(this, {
key: 'sceneB',
active: true // listening resize event;
});
},
init: function (data) {
//方法1. 引入sceneA 在初始化的时候就可以获得场景Scene传递的值;
this.sceneA = this.scene.get('sceneA'); // sceneA's key
console.log("get data from sceneA:",data.countDown);
},
preload:function(){
},
create:function(){
// 方法2.监听scene的事件 gameCountDown
this.sceneA.events.on('gameCountDown',function(data){
console.log(data.countDown);
});
},
});
gameconfig.js
var game;
//* setDepth for every object;
var gameConfig = {
depth:{
player:1,
}
}
// once the window loads...
window.onload = function () {
// 接收 websocket;
// config of the game;
var config = {
type: Phaser.AUTO,
parent: 'game',
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('sceneA', SceneA); //*** key,class */
game.scene.add('sceneB', SceneB);
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';
}
}
结语： 用Phaserjs3 JavaScript框架 来开发HTML网页游戏，虽不复杂，但有道是『纸上得来终觉浅，绝知此事要躬行』，代码还是得亲自多码才行噢！
更多游戏教学：http://www.iFIERO.com -- 为游戏开发深感自豪
Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发的更多相关文章
- Phaser3 场景Scene之间的传值 -- HTML网页游戏开发
一.首先当然得有至少有二个场景sceneA.js,sceneB.js 二.从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{objKey:objVa ...
- Javascript网页特效开发技巧
Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...
- Phaser3 屏幕适配iPhoneX、iPhoneXs的坑 -- JavaScript Html5 游戏开发
PhaserJS 坑:在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设为 window.innnerWidth在config内不 ...
- PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发
巨坑:在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设 ...
- iFIERO - (一) 宇宙大战 SPACE BATTLE — 场景SCENE、SpriteKit精灵、PARTICLE粒子及背景音乐
开始游戏教程前,首先介绍一下SpriteKit是什么?SpriteKit提供了一个图形渲染和动画的基础结构,你可以使用它让任意类型的纹理图片或者精灵动起来.SpriteKit使用渲染循环,利用图形硬件 ...
- storyboard三种sugue 和 跳转场景的三种方式 以及控制器之间的传值
Storyboard引入了2个概念:1. scene:一个场景,由一个viewController和相关的xib表示. 2. segue:在这是用于连接scenes,其有多种类型,iphone包括:P ...
- PHASER3 设置场景SCENE SLEEPING休眠和WAKE唤醒
A good way to set scene stop when hidden and run while visible again ! 使用sleep和wake方法的好处: 1.可以彻底让sce ...
- (三)宇宙大战 Space Battle -- 场景SCENE切换、UserDefaults统计分数、Particle粒子效果
此<宇宙大战 Space Battle>SpirteKit手机游戏教程共分为三系列: (一)宇宙大战 Space Battle -- 新建场景Scene.精灵节点.Particle粒子及背 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
随机推荐
- PHP扩展功能 ---- 伪静态
一.入门三部曲 1.什么是伪静态? 改写URL,以静态的url形式访问页面,但其实是用PHP一类的动态脚本来处理的. 2.为什么要用伪静态? 需要动态获取数据,但是又希望能够对搜索引擎友好. 3.怎么 ...
- HDU 3790（两种权值的迪杰斯特拉算法）
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=3790 最短路径问题 Time Limit: 2000/1000 MS (Java/Others) ...
- System.Reflection 获取描述
我们需要获取类,属性,方法的描述.这个跟获取枚举的描述一样,需要我们通过反射来做.这还需要我们的利用System.ComponentModel:Description 的属性来完成. 新建一个类:使 ...
- alibaba之Nacos
本文为转载文章 原文链接:https://windmt.com/2018/11/09/intro-to-spring-cloud-alibaba-nacos/ 上个月最后一天的凌晨,Spring Cl ...
- Maven 逆向工程
pom.xml <build> <plugins> <plugin> <groupId>org.mybatis.generator</groupI ...
- nginx 源码安装以及后续升级https
事情的来源是,公司要将网站从http升级到https,由于历史遗留原因,才发现现有的nginx是通过源码安装的,并没有安装ssl模块,需要现安装sll模块,这个nginx是整个公司最前端的一个代理,涉 ...
- 全局变量和局部变量（global关键字）
1.定义在函数外部的就是全局变量,它的作用域从定义处一直到文件结尾. 2.函数内定义的变量就是局部变量,它的作用域为函数定义范围内. 3.函数之间存在作用域互不影响. 4.函数内访问全局变量需要 gl ...
- 【原创】CRM 2015/2016，SSRS 生成PDF文件，幷以附件的形式发送邮件
主要步骤如下: 生成一条邮件记录 生成一条ActivityParty记录 生成PDF文件,并以Base64添加到ActivityMimeAttachment 中去 打开发送邮件窗口,以便编辑及发送邮件 ...
- Cloudera Manager 安装集群遇到的坑
Cloudera Manager 安装集群遇到的坑 多次安装集群,但每次都不能顺利,都会遇到很多很多的坑,今天就过去踩过的坑简单的总结一下,希望已经踩了的和正在踩的童鞋能够借鉴一下,希望对你们能有所帮 ...
- MySQL数据库实验：任务二 表数据的插入、修改及删除
目录 任务二 表数据的插入.修改及删除 一.利用界面工具插入数据 二.数据更新 (一)利用MySQL命令行窗口更新数据 (二)利用Navicat for MySQL客户端工具更新数据 三.数据库的备份 ...