想用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. mysql --single-transaction 在从库导入完数据以后要在配置文件/etc/my.cnf 中加上read_only=1的参数

    1.在做数据库的主从时,防止在这个过程中,有数据访问进来,要: 要想连super权限用户的写操作也禁止,就使用"flush tables with read lock;",这样设置 ...

  2. w 命令

    NAME w - Show who is logged on and what they are doing. SYNOPSIS w - [husfiV] [user] 参数说明: -f 开启或关闭显 ...

  3. ioctl接口内容操作

    int ioctl( int fd, int request, .../* void *arg */ ) 详解 第三个参数总是一个指针,但指针的类型依赖于request 参数.我们可以把和网络相关的请 ...

  4. 【转贴】Windows常用命令实例

    Windows常用命令实例 https://www.cnblogs.com/linyfeng/p/6261629.html 熟练使用DOS常用命令有助于提高工作效率. 1.windows+R:打开运行 ...

  5. TestNG并发兼容性测试

    Web测试项目中经常进行浏览器兼容性相关的测试工作,因为兼容性测试的工作重复性相当高,所以导致手工测试效率低下测试人员积极性降低.TestNG提供了并发执行测试用例的功能,可以让测试用例以并发的形式执 ...

  6. 03：linux文件操作四剑客

    1.1 find查找命令 1.find命令说明 1. Linux find命令用来在指定目录下查找文件. 2. 任何位于参数之前的字符串都将被视为欲查找的目录名. 3. 如果使用该命令时,不设置任何参 ...

  7. Buy a Ticket CodeForces - 938D (dijkstra)

    大意: n节点无向图, 点$i$到点$j$的花费为$2dis(i,j)+a[j]$, 对于每个点, 求最少花费. 每条边权翻倍, 源点S向所有点$i$连边, 权为$a[i]$, 答案就为$S$到每个点 ...

  8. Alibaba开源组件-分布式流量控制框架sentinel初探

    Alibaba开源组件-分布式流量控制框架sentinel初探 2018年12月09日 18:23:11 SuperPurse 阅读数 1965更多 分类专栏: J2EE   版权声明:本文为博主原创 ...

  9. spring boot jpa @PreUpdate结合@DynamicUpdate使用的局限性

    通常给实体添加audit审计字段是一种常用的重构方法,如下: @Embeddable @Setter @Getter @ToString public class Audit { /** * 操作人 ...

  10. mysql架构总结

    1.单机架构模式,多用于测试,实际生产中需优化: 2.一主多从,主数据库读和写,从数据库从主数据库同步,仅负责读,可解决一定访问量的需求: 3.MHA(Master High Availability ...