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

时间 2019-12-08

标签 phaser3 phaser 场景 scene 之间 html javascript 网页游戏开发栏目 HTML 繁體版

原文原文链接

PHASERJS3

1、首先固然得有至少有二个场景sceneA.js,sceneB.jsjavascript

2、从场景A传值到场景B二种方法css

1)经过事件this.events.emit('event key',{objKey:objValue});html

从sceneA经过 ths.events.emit时传值到sceneB时有个须要特别注的事项就是，得把sceneB的 active设为 ture,不然由于 sceneB还未激活，是监听不到 events.on事件的!!!java

2)经过场景启动this.scene.start('gameB key',{objKey:objValue});jquery

具体详见代码：web

HTMLcanvas

<!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.jswebsocket

'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.jssocket

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 -- 为游戏开发深感自豪