想用ES6语法开发phaserjs游戏，是phaserCE，但是不知道怎么导入，总是报错，后来经过多次尝试，解决方法如下：

干脆不导入，直接暴露到window里，然后模块化的代码全部在window.onload后执行，即可跳过编译时报错问题，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="/stylesheets/reset.css"/>

    <link rel="stylesheet" href="/stylesheets/style.css"/>

    <link rel="stylesheet" href="/stylesheets/black.css"/>

    <script type="text/javascript" src="/javascripts/plugins/rem.js"></script>

    <title><%= mtitle %></title>

</head>

<body>

    <div id="game"></div>

    <script src="/javascripts/phaserDemo/plugins/phaser.js"></script>

    <script src="/javascripts/phaserDemo/plugins/phaser.min.js"></script>

    <script src="/javascripts/phaserDemo/Game.js" type="module"></script>

    <script src="/javascripts/phaserDemo/Main.js" type="module"></script>

</body>

</html>

html页面的phaser的type不能设置'module'，设置的话会报错，报错原因其实是找不到root，暂且不管报错原因，在Main.js模块中，添加window.onload然后把游戏入口js模块导入初始化即可

Main.js

import Game from './Game.js'

window.onload = function(){

    var game = new Game();

}

Game.js

export default class Game{

    constructor(){

        this.init();

    }

    init(){

        this.game = new Phaser.Game(1280,720,Phaser.AUTO);

    }

}

或者

export default class Game extends Phaser.Game{

    constructor(width=1280,height=720,renderer=Phaser.AUTO,parent=''){

        super(width,height,renderer,parent);

        this.init();

    }

    init(){

        // this.game = new Phaser.Game(1280,720,Phaser.AUTO);

    }

}

下一步就可以定义state，全部导入到Game里，初始化，继续下一步了。

最后开发好的项目要用babel或者webpack打包一下

每个人的想法都不一样，所以开发框架及架构肯定也不一样，遵循自己的想法，不管怎样，适合自己的就是最好，希望我的这个简单到大道至简的框架能给过客一点启发。

Phaserjs怎样用ES6开发游戏的更多相关文章

  1. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  2. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  3. GJM : 各大开发游戏引擎

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  4. 独立开发游戏越来越容易：Unity 发布旗下的最新游戏引擎 Unity 5，依然有免费版（转）

    独立开发者开发游戏正变得越来越容易,因为在游戏设计中很多吃力不讨好的工作可以直接采用像 Epic Games 或 Unity Technologies 这样的游戏引擎来解决.而这几天,游戏引擎商们先后 ...

  5. 【转】针对iOS VS. Android开发游戏的优劣——2013-08-25 17

    http://game.dapps.net/gamedev/experience/8670.html 问题:如果你正在一个新工作室开发一款新的平板/手机游戏,你会选择iOS还是Android? 回答: ...

  6. 【C语言探索之旅】 第三部分第二课：SDL开发游戏之创建窗口和画布

    内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做 ...

  7. 【C语言探索之旅】 第三部分第一课：SDL开发游戏之安装SDL

    内容简介 1.课程大纲 2.第三部分第一课: SDL开发游戏之安装SDL 3.第三部分第二课预告: SDL开发游戏之创建窗口和画布 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会 ...

  8. 【转】使用gulp 进行ES6开发

    原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blab ...

  9. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

随机推荐

  1. netcore程序部署 docker 异常 --生成图片二维码缺少libdl

    最近因业务需求需要在程序中实现二维码图片生成,于是就用到QRCoder开发库.最终在windows环境下部署运行没问题,但切换到docker(centos7.0)后发现是有问题的. 错误信息提示:Th ...

  2. 关于session的一些问题

    最近在做项目的时候碰见了session过期的问题,然后就上网查了一些资料,我将我整理过的知识点梳理一下,顺便说一下我的使用方案. Session存储在服务器端,一般为了防止在服务器的内存中(为了高速存 ...

  3. Redis高级主题

    Redis高级主题   持久化 Redis 支持持久化, 其持久化数据有两种方式. 两种可以同时使用. 如果同时使用, Reids 在重启时将使用 AOF 方式来还原数据. RDB 按照一定策略定时同 ...

  4. 编写java 程序与Linux进行远程连接并运行linux下的脚本

    我这里是通过连接到centos6.5的大数据集群的主节点,并通过运行hadoop的启动脚本来启动hadoop 本人采用的是SSH的方式连接 通过创建maven项目来编写代码,在编写代码之前需要先导入架 ...

  5. [转帖]流言终结者 —— “SQL Server 是Sybase的产品而不是微软的”

    流言终结者 —— “SQL Server 是Sybase的产品而不是微软的” https://www.cnblogs.com/xxxtech/archive/2011/12/30/2307859.ht ...

  6. mysql 错误号码1129

    SQLyog连接mysql 错误号码1129: mysql error 1129: Host 'bio.chip.org' is blocked because of many connection ...

  7. python_0基础开始_day04

    第四节 一.列表 list 数据类型之一,存储大量的,不同类型的数据 列表中只要用逗号隔开的就是一个元素 有序可变的. 1.1列表的索引 列表和字符串一样也拥有索引,但是列表可以修改: lst = [ ...

  8. tomcat搭建webDav

    工具准备: tomcat-8.0.53 前言:由于工作需要,希望自己搭建webdav服务端,刚开始用windowsServer 2012 R2版本自带的IIS服务器搭建,搭建好之后浏览器可以访问,但无 ...

  9. shiro登陆流程

    登录请求被FormAuthenticationFilter拦截 FormAuthenticationFilter会执行其父类AdviceFilter的doFilterInternal方法 其代码如下: ...

  10. JS基础_强制类型转换-Boolean

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...