一、首先当然得有至少有二个场景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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="libs/phaser/phaser.min.js"></script>
  8.     <script src="scripts/scenes/gameconfig.js"></script>
  9.     <script src="scripts/scenes/sceneA.js"></script>
  10.     <script src="scripts/scenes/sceneB.js"></script>
  12.     <title>iFIERO Games Tutorial</title>
  13.     <style>
  14.         body {
  15.             margin: 0;
  16.         }
  17.         canvas {
  18.             display: block;
  19.             margin: 0;
  20.             position: relative;
  21.             top: 0%;
  22.             left: 0%;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28.     <div id="game"></div>
  29.     &copy;Copyrigths By www.iFIERO.com
  30. </body>
  31. <script src="libs/jquery/jquery.min.js"></script>
  32. </html>

sceneA.js

  1. 'use strict';
  2. var SceneA = new Phaser.Class({
  3.     Extends: Phaser.Scene,
  4.     // 在整个工程中只会执行一次
  5.     initialize: function BootScene() {
  7.         Phaser.Scene.call(this, {
  8.             key: 'sceneA',
  9.             active: false // listening resize event;
  10.         });
  12.     },
  13.     // 每次调用场景SceneA会执行一次;
  14.     init: function () {
  16.     },
  17.     preload:function(){
  19.     },
  20.     create:function(){
  21.         // 1. 从SCENEA emit gameCountDown事件,传送 {countDown:10} 对象到场景B sceneB
  22.         this.events.emit('gameCountDown',{countDown:10}); //* 事件KEY=>gameCountDown
  24.         // 2.start方法传送
  25.         this.scene.start('sceneB',{countDown:10}) //* 场景KEY=> sceneB
  26.     },
  27. });

sceneB.js


  2. 'use strict';
  3. var SceneB = new Phaser.Class({
  4.     Extends: Phaser.Scene,
  6.     initialize: function BootScene() {
  8.         Phaser.Scene.call(this, {
  9.             key: 'sceneB',
  10.             active: true // listening resize event;
  11.         });
  13.     },
  14.     init: function (data) {
  15.         //方法1. 引入sceneA 在初始化的时候就可以获得场景Scene传递的值;
  16.         this.sceneA = this.scene.get('sceneA'); // sceneA's key
  18.         console.log("get data from sceneA:",data.countDown);
  19.     },
  20.     preload:function(){
  22.     },
  23.     create:function(){
  24.        // 方法2.监听scene的事件 gameCountDown
  25.         this.sceneA.events.on('gameCountDown',function(data){
  26.             console.log(data.countDown);
  27.         });
  28.     },
  29. });

gameconfig.js

  1. var game;
  2. //* setDepth for every object;
  3. var gameConfig = {
  4.     depth:{
  5.         player:1,
  6.     }
  7. }
  8. // once the window loads...
  9. window.onload = function () {
  10.     // 接收 websocket;
  11.     // config of the game;
  12.     var config = {
  13.         type: Phaser.AUTO,
  14.         parent: 'game',
  15.         width: 640, // don't window.innerWidth
  16.         height: 512,
  17.         physics: {
  18.             default: 'arcade',
  19.             arcade: {
  20.                 gravity: {
  21.                     y: 0
  22.                 },
  23.                 debug: false,
  24.             }
  25.         },
  26.         //*** scenes used by the game
  27.         // scene:  [BootScene,PlayGameScene,UIScene]
  28.     }
  29.     game = new Phaser.Game(config);
  30.     game.scene.add('sceneA', SceneA); //*** key,class */
  31.     game.scene.add('sceneB', SceneB);
  33.     window.focus();
  34.     resize();
  35.     window.addEventListener('resize', resize, false);
  36. }
  38. function resize() {
  40.     var canvas = document.querySelector('canvas');
  41.     var windowWidth = window.innerWidth;
  42.     var windowHeight = window.innerHeight;
  43.     var windowRatio = windowWidth / windowHeight;
  44.     var gameRatio =  game.config.width / game.config.height;
  45.     if (windowRatio < gameRatio) {
  46.         canvas.style.width = windowWidth + 'px';
  47.         canvas.style.height = (windowWidth / gameRatio) + 'px';
  48.     } else {
  49.         canvas.style.width = (windowHeight * gameRatio) + 'px';
  50.         canvas.style.height = windowHeight + 'px';
  51.     }
  53. }

结语： 用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. php中文网--JavaScript

    PHP中文网:http://www.php.cn/course/18.html 常用的两个客户端输出方法 document.write("你好呀js"); 描述:在网页的<b ...

  2. 如何将Numpy加速700倍？用 CuPy 呀

    如何将Numpy加速700倍?用 CuPy 呀 作为 Python 语言的一个扩展程序库,Numpy 支持大量的维度数组与矩阵运算,为 Python 社区带来了很多帮助.借助于 Numpy,数据科学家 ...

  3. Pycharm Debug 问题

    Pycharm debug 出现如下问题 Connected to pydev debugger (build 181.4668.75) Traceback (most recent call las ...

  4. Vuejs——slot内容分发

    ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下父组件在子组件内套的内容,是不显示的. 例如代 ...

  5. 在线修改大表结构pt-online-schema-change

    使用场景 在线数据库的维护中,总会涉及到研发修改表结构的情况,修改一些小表影响很小,而修改大表时,往往影响业务的正常运转,如表数据量超过500W,1000W,甚至过亿时 在线修改大表的可能影响 在线修 ...

  6. sql server 幂运算函数power(x,y)、square(x)、exp(x)

    --POWER(x,y)函数返回x的y次乘方的结果值 --SQUARE(x)函数返回指定浮点值x的平方 --EXP(x)函数返回e的x乘方后的值 示例:select POWER(2,2), POWER ...

  7. WebGPU学习（八）：学习“texturedCube”示例

    大家好,本文学习Chrome->webgpu-samplers->texturedCube示例. 上一篇博文: WebGPU学习(七):学习"twoCubes"和&qu ...

  8. JVM内存溢出处理方法

    OOM(Out of Memory)异常常见有以下几个原因: 1)老年代内存不足:java.lang.OutOfMemoryError:Javaheapspace 2)永久代内存不足:java.lan ...

  9. 对OO原则的个人理解

    1.单一职责原则.(Single Responsibility Principle) 注解:社会化大生产分工要细.具体每个人最好只做一件事(不要一人兼多职),这样如果这个人请假或辞职,对生产不会产生影 ...

  10. htmlunit与Jsoup

    //这个函数的目的是在获取页面的同时,也获取链接对应的cookiepublic static HtmlPage getCookieAndHtml(String url)throws IOExcepti ...