PHASERJS3

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

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

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

  2. Javascript网页特效开发技巧

    Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...

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

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

  4. PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发

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

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

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

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

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

  7. PHASER3 设置场景SCENE SLEEPING休眠和WAKE唤醒

    A good way to set scene stop when hidden and run while visible again ! 使用sleep和wake方法的好处: 1.可以彻底让sce ...

  8. (三)宇宙大战 Space Battle -- 场景SCENE切换、UserDefaults统计分数、Particle粒子效果

    此<宇宙大战 Space Battle>SpirteKit手机游戏教程共分为三系列: (一)宇宙大战 Space Battle -- 新建场景Scene.精灵节点.Particle粒子及背 ...

  9. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

随机推荐

  1. Java SPI(Service Provider Interface)

    SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制. 目前有不少框架用它来做服务的扩展发现, 简单来说,它就是一种动态替换发现的机制, 举个 ...

  2. disconf实践(一)Ubuntu16.04部署disconf

    在企业中,随着公司业务的扩张,用户量的增大,单一节点应用无法支撑正常的业务逻辑,比较常见的现象是访问速度变慢,甚至超时,严重时可能会造成系统宕机.为了尽量减少宕机的风险,单一节点系统需要进行水平扩展, ...

  3. 404 Note Found队 Alpha7

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  4. 编程开发之--Oracle数据库--存储过程和存储函数(2)

    上一小结我们简单介绍了存储过程和存储函数,对存储过程和存储函数有了一个基本的了解,接下来介绍在java程序中如何调用我们创建的存储过程和存储函数 1.在应用程序中调用我们的存储过程 创建一个简单的Ja ...

  5. 关于IScroll使用中的常见问题与解决方案

    1.在iscroll4的滚动容器范围内,点击input框.select等表单元素时没有响应这个问题原因在于iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件 ...

  6. PhpStorm 查看当前类中所有的方法

    展示当前类中的所有方法        Ctrl + F12 方法之间移动                          alt  +   向上箭头/向下箭头

  7. 嵌入式C语言自我修养 12:有一种宏,叫可变参数宏

    12.1 什么是可变参数宏 在上面的教程中,我们学会了变参函数的定义和使用,基本套路就是使用 va_list.va_start.va_end 等宏,去解析那些可变参数列表我们找到这些参数的存储地址后, ...

  8. 嵌入式C语言自我修养 09:链接过程中的强符号和弱符号

    9.1 属性声明:weak GNU C 通过 __atttribute__ 声明weak属性,可以将一个强符号转换为弱符号. 使用方法如下. void __attribute__((weak)) fu ...

  9. 海思平台交叉编译curl支持SSL功能

    1.准备工具 1).交叉编译工具 2).下载libcurl和openssl源代码,我使用的是(openssl-1.0.2o.tar,curl-7.59.0.tar) 3).查看cpu详细 ~ # ca ...

  10. xss:利用编码绕过(新手向)

    当浏览器接受到一份HTML代码后,会对标签之间(<p>xxx</p>等,<script>除外).标签的属性中(<a href='xxxx'>)进行实体字 ...