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打包一下

每个人的想法都不一样，所以开发框架及架构肯定也不一样，遵循自己的想法，不管怎样，适合自己的就是最好，希望我的这个简单到大道至简的框架能给过客一点启发。

posted @ 2018-05-16 17:57  保持当下  阅读(1078)  评论(0)  编辑  收藏  举报