zoukankan      html  css  js  c++  java
  • 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打包一下

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

  • 相关阅读:
    为什么单个TCP连接很难占满带宽
    上传NUnit的单元测试结果和OpenCover的单元测试覆盖率到SonarQube服务中
    使用Visual Studio Code Coverage和nunit上传单元测试覆盖率和单元测试结果到SonarQube上
    java安装1.8的经验和Error: Registry key 'SoftwareJavaSoftJava Runtime Environment'CurrentVers问题处理
    NSubstitute.Analyzers检测NSubstitute用法冲突
    在TeamCity中执行gtest单元测试
    iOS OpenGL ES入门
    iOS 基础知识
    【内推】字节跳动-头条小说&番茄小说
    iOS开发小记(十四)
  • 原文地址:https://www.cnblogs.com/wangzisheng/p/9047292.html
Copyright © 2011-2022 走看看