Phaserjs怎样用ES6开发游戏
想用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开发游戏的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- GJM : 各大开发游戏引擎
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- 独立开发游戏越来越容易:Unity 发布旗下的最新游戏引擎 Unity 5,依然有免费版(转)
独立开发者开发游戏正变得越来越容易,因为在游戏设计中很多吃力不讨好的工作可以直接采用像 Epic Games 或 Unity Technologies 这样的游戏引擎来解决.而这几天,游戏引擎商们先后 ...
- 【转】针对iOS VS. Android开发游戏的优劣——2013-08-25 17
http://game.dapps.net/gamedev/experience/8670.html 问题:如果你正在一个新工作室开发一款新的平板/手机游戏,你会选择iOS还是Android? 回答: ...
- 【C语言探索之旅】 第三部分第二课:SDL开发游戏之创建窗口和画布
内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做 ...
- 【C语言探索之旅】 第三部分第一课:SDL开发游戏之安装SDL
内容简介 1.课程大纲 2.第三部分第一课: SDL开发游戏之安装SDL 3.第三部分第二课预告: SDL开发游戏之创建窗口和画布 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会 ...
- 【转】使用gulp 进行ES6开发
原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blab ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
随机推荐
- iOS 12.4 越狱已经发布
昨天 unc0ver 3.5.0 发布,支持 iOS 12.4 越狱.12.4 目前为最新版的系统. 下载地址:https://github.com/pwn20wndstuff/Undecimus/r ...
- 华为HCNA乱学Round 7:VLAN间路由
- c语言GCC mingw 64位安装
1.安装步骤和下载地址 一.MinGW简介 MinGW是是将GCC编译器和GNU Binutils移植到Win32平台下的产物,包括一系列头文件(Win32API).库和可执行文件.MinGW是从Cy ...
- PDF技术(四)-Java实现Html转PDF文件
html转换为pdf的关键技术是如何处理网页中复杂的css样式.以及中文乱码处理. 各实现对比表于Windows平台进行测试: 基于IText 基于FlyingSaucer 基于WKHtmlToPdf ...
- 【0.1】mysql版本升级(5.6升级到5.7)
目录 [1].升级操作 [2].mysql 5.6安装(二进制) [3].mysql 5.7安装(二进制) [1].升级操作 核心步骤 [1.1]停止mysql 5.6 [1.2]把环境变量引用到My ...
- Type类的使用
Type类的使用(类反射)通过类获得Type: Type t = typeof(Person)通过实例对象获得类的Type: Type t = p.GetType()获取Type的方法:MethodI ...
- POJ - 3469 Dual Core CPU (最小割)
(点击此处查看原题) 题意介绍 在一个由核A和核B组成的双核CPU上执行N个任务,任务i在核A上执行,花费Ai,在核B上执行,花费为Bi,而某两个任务之间可能需要进数据交互,如果两个任务在同一个核上执 ...
- Linux-1.3目录结构,基础命令
1.Linux目录结构 2.Linux基础命令(常用) ctrl+alt+T(打开终端) cd 切换文件夹(pwd查看当前目录) cd /home 绝对路径 以根目录开头 cd admin 相对路径 ...
- Codeforces 1221F. Choose a Square
传送门 对于某个点 $(x,y)$ ,不妨设 $x<y$ 因为如果 $x>y$ 直接按 $y=x$ 对称一下即可 当且仅当正方形左下角 $(a,a)$ 满足 $a<=x$,右上角 $ ...
- 剑指offer-正则表达式匹配-字符串-python****
# -*- coding:utf-8 -*- ''' 题目:请实现一个函数用来匹配包括'.'和'*'的正则表达式. 模式中的字符'.'表示任意一个字符(不包括空字符!),而'*'表示它前面的字符可以出 ...