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打包一下
每个人的想法都不一样,所以开发框架及架构肯定也不一样,遵循自己的想法,不管怎样,适合自己的就是最好,希望我的这个简单到大道至简的框架能给过客一点启发。