想用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. __setattr__,__getattr__,__delattr__

    class Foo: x = 1 def __init__(self,y): self.y = y def __getattr__(self,item): print("---->fr ...

  2. 【Linux开发】Linux模块机制浅析

    Linux允许用户通过插入模块,实现干预内核的目的.一直以来,对linux的模块机制都不够清晰,因此本文对内核模块的加载机制进行简单地分析. 模块的Hello World! 我们通过创建一个简单的模块 ...

  3. ubuntu服务器上用Nginx和Uwsgi部署django项目

    开发环境:ubuntu系统,python3环境 django项目目录: fast_foot 为项目根目录,app为项目应用 现在,我们登陆远程服务器 安装Nginx 安装好了,我们看一下nginx的配 ...

  4. 如何在Windows中手动生成SSH密钥？(转)

    在Windows上,您可以通过多种方式创建SSH密钥.Windows需要SSH客户端,但在其操作系统上没有默认的SSH客户端.请注意,Windows目前正在测试本机OpenSSH应用程序,一般,不提倡 ...

  5. flink部署

    参考: https://ververica.cn/developers-resources/ #flink参数 https://blog.csdn.net/qq_35440040/article/de ...

  6. [c++] 用宏定义一个函数

    要点:变量都用括号括起来,防止出错,结尾不需要;.在实际编程中,不推荐把复杂的函数使用宏,不容易调试.多行用\ 要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和 ...

  7. 利用docker搭建本地私有镜像仓库

    主机名 角色 sht-sgmhadoopcm-01 Docker Repository sht-sgmhadoopnn-01 Docker Client 1. 在两台节点分别安装docker http ...

  8. linux小白家教学<一>

    <数据中心规划与实施> 教学大纲  编写人:Allen 一. 课程教学内容及目标: (一) 知识目标 1.掌握企业级LINUX部署以及相关配置: 2.掌握LINUX操作系统基本的创建.删除 ...

  9. Python进阶编程 类与类的关系

    类与类的关系 依赖关系 # 依赖关系: 将一个类的类名或者对象传给另一个类的方法中. class Elephant: def __init__(self, name): self.name = nam ...

  10. Python验证码登录(Tesseract安装配置)

    1.安装py库:pytesseract,PIL pip install pytesseract pip install PILLOW 如果安装时,出现权限不足: pip install --user ...