一、首先当然得有至少有二个场景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>
&copy;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网页游戏开发的更多相关文章

  1. Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发

      PHASERJS3 一.首先当然得有至少有二个场景sceneA.js,sceneB.js 二.从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{ ...

  2. 网页游戏开发秘笈 PDF扫描版

    精选10种常见的游戏类型,透过典型实例,深入剖析游戏引擎及工具的选用技巧,详细讲解每款游戏的制作过程,为快速掌握网页游戏开发提供系统而实用的指南. 网页游戏开发秘笈 目录: 译者序  前 言  导 言 ...

  3. [网页游戏开发]Morn简介及使用教程

    网页游戏开发利器,morn系列教程之Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Mor ...

  4. [网页游戏开发]进一步了解Morn UI及工作流

    Morn UI工作流 Morn Builder不仅仅是对Flash IDE的改进,传统的开发协作是以fla为基础,由于fla是二进制文件,在以svn等版本控制软件协作下,合并过程中会出现各种各样的问题 ...

  5. Phaserjs3 对象池随机产生炸弹并销毁 -- Html网页游戏开发

    scene.js /// <reference path="../../libs/phaser/phaser.min.js"/> 'use strict'; var B ...

  6. [网页游戏开发]Morn组件赋值

    在讲解List之前,我们先介绍一下Morn组件赋值功能 默认属性赋值 界面逻辑开发过程中,经常会涉及到动态更改UI属性,比如: 界面有一个按钮,一个多选框和一个文本,分别命名为myButton,myC ...

  7. [网页游戏开发]容器的使用及自定义Tab,RadioGroup,List,ViewStack

    Morn里面,容器和其他普通组件不同,无需皮肤,所以也不能从组件树种拖动创建(Tab,RadioGroup例外),只能转换而来 Morn的容器组件主要有Box,Container,Panel,Tab, ...

  8. iFIERO - (一) 宇宙大战 SPACE BATTLE — 场景SCENE、SpriteKit精灵、PARTICLE粒子及背景音乐

    开始游戏教程前,首先介绍一下SpriteKit是什么?SpriteKit提供了一个图形渲染和动画的基础结构,你可以使用它让任意类型的纹理图片或者精灵动起来.SpriteKit使用渲染循环,利用图形硬件 ...

  9. storyboard三种sugue 和 跳转场景的三种方式 以及控制器之间的传值

    Storyboard引入了2个概念:1. scene:一个场景,由一个viewController和相关的xib表示. 2. segue:在这是用于连接scenes,其有多种类型,iphone包括:P ...

随机推荐

  1. WebSocket的使用(基于VUE与SpringBoot)

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 We ...

  2. Java Web开发技术教程入门-JSP基本语法和九大内置对象

    这两天气温逐渐升高,好想把自己泡在冰块里······ 恩嗯摁蒽恩嗯摁蒽恩嗯摁蒽恩嗯摁蒽.......今天阅读到了这本书的第四章-JSP基本语法.经过第一天的阅读,我们明白JSP技术是Java Web开 ...

  3. random 方法 生成随机数

    Math.random() 生成 大于等于0.0 且小于 1.0 的double 型随机数 ( 0.0 <= Math.random() < 1.0 ) 可以使用它便携简单了表达式,生成任 ...

  4. python接口测试—mysql数据库操作

    python操作mysql数据库 1.安装pymysql库 在python中安装pymysql第三方库,通过pip install pymysql 命令进行安装. 2.python操作mysql数据库 ...

  5. ADF检验

    单位根检验是指检验序列中是否存在单位根,因为存在单位根就是非平稳时间序列了.单位根就是指单位根过程,可以证明,序列中存在单位根过程就不平稳,会使回归分析中存在伪回归. from statsmodels ...

  6. 专心研发CPU?传Intel外包芯片组设计给祥硕

    在本届台北电脑展上,AMD除了推出7nm锐龙3000处理器之外,还发布了新一代平台X570芯片组,首发了消费级PCIe 4.0技术支持.X570芯片组因为技术难度更高,所以这一代是AMD亲自出手设计研 ...

  7. nginx反向代理+负载均衡+url重写+ssl认证

      Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄 ...

  8. Big Data(八)MapReduce的搭建和初步使用

    ---恢复内容开始--- 回顾: 1.最终开发MR的计算程序 2.hadoop 2.x 出现了一个yarn:资源管理>>MR没有后台场服务 yarn模型:container 容器,里面会运 ...

  9. ui自动化之selenium操作(五)简单元素操作--续

    1. 多窗口切换 有时候需要在多窗口切换,webdriver提供了switch_to_window()方法支持切换窗口: from selenium import webdriver import o ...

  10. python 类的成员及继承

    1. @staticmethod 静态方法 静态方法不能访问实例变量和类变量,除了身处类里面,所以只能通过类调用以外,它其实和类没有什么关系.如果想要用它访问实例变量或类变量,需要把实例和类传递给函数 ...