想用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. Star all over again.

    0x00前言 经过了一上午的折腾之后,博客的界面勉强可观,今天下午将之前的所有博客全部删除,重新开始写属于自己的博客,而不是只把它当作一个收藏夹,转载其他人的文章. 0x01近来感想 有感而发,随便写 ...

  2. 【OpenGL】初识OpenGL4.0

    目录(?)[-] 什么是GLSL GLEW 安装GLEW 使用GLEW 其他库 使用GLM库进行数学运算 安装GLM 使用GLM 使用GLM作为OpenGL的输入 使用GLFW进行窗口管理 这篇文章主 ...

  3. 【Linux-驱动】printk的打印级别

    级别: 日志级别用宏表示,日志级别宏展开为一个字符串,在编译是由预处理器将它和消息本文拼接成一个字符串,因此printk函数中日志级别宏和格式字符串间不能有逗号.printk的日志级别定义在 /inc ...

  4. DOS sqlcmd

    C:\>sqlcmd -? Microsoft (R) SQL Server 命令行工具版本 12.0.2000.8 NT版权所有 (c) 2014 Microsoft.保留所有权利. 用法: ...

  5. 如何获取字符串中某个具体的数值--通过json.load转化成字典形式获取

    r=requests.get('http://httpbin.org/get').text print(r) # print(type(r)) # 如果要获取User-Agent的详细数值,需要做JS ...

  6. [BJOI2014]大融合(Link Cut Tree)

    [BJOI2014]大融合(Link Cut Tree) 题面 给出一棵树,动态加边,动态查询通过每条边的简单路径数量. 分析 通过每条边的简单路径数量显然等于边两侧节点x,y子树大小的乘积. 我们知 ...

  7. 如何实现一个简化版的 jQuery

    对于操作 DOM 来说,jQuery 是非常方便的一个库,虽然如今随着 React, Vue 之类框架的流行,jQuery 用得越来越少了,但是其中很多思想还是非常值得我们学习的,这篇文章将介绍如何从 ...

  8. centos配置postfix邮件服务

    1.环境初始化 [root@mail ~]# rpm -q centos-release //查看系统版本 centos-release-7-5.1804.el7.centos.x86_64 [roo ...

  9. PHP高级进阶之路

    一:常见模式与框架 学习PHP技术体系,设计模式,流行的框架 常见的设计模式,编码必备 Laravel.ThinkPHP开发必不可少的最新框架 YII.Symfony4.1核心源码剖析 二:微服务架构 ...

  10. python 基于detectron或mask_rcnn的mask遮罩区域进行图片截取

    基于示例infer_simple.py 修改165行vis_utils.vis_one_image为vis_utils.vis_one_image_opencv 在detectron.utils.vi ...