基于ES6模块标准通过webpack打包HTM5项目

本篇主要演示通过webpack打包phaser项目，webpack安装方法在此处就不一一赘述了

经常用phaser来写html5游戏的朋友可能会发现，当游戏场景比较多时，如果都写在一个js文件中那么将来会很难维护，如果分成多个JS分别来管理不同的场景将会很方便

1. 首先来到项目根目录

在该目录中打开命令行，然后启动webpack

2、在app目录中建立一个文件夹，主要用来放置打包前的文件

从图中可以很看到，分成了专门用来引导，预加载，游戏菜单，游戏主逻辑，等js文件，由于用的是ES6的模块语法，ES6的module是动态引用的，即对外暴露的是该模块的引用， 可以新建一个public.js专门用来存放共享的变量

//public.js  用来存放phaser对象，然后其他js文件都import该文件就可以使用phaser对象了
export default {
    game: null,

}

// main.js 是模块的入口，这里把需要打包的js文件引入进来，从上面的public文件代码中可以看到export了一个对象，在这里把phaser对象传递给public中的game属性。


import vars from './public.js';
import Boot from './boot.js';
import Preloader from './preloader.js';
import Menu from './menu.js';
import Game from './game.js';

var gameScore = 0;
var h = $(window).height();
var game = vars.game = new Phaser.Game(640, h, Phaser.CANVAS, 'game');//就是这里啦，
game.state.add('Boot',Boot);
game.state.add('Preloader',Preloader);

game.state.add('Menu',Menu);

game.state.add('Game',Game);  

game.state.start('Boot');

//boot.js 用来添加加载条图片和启动加载页面

import vars from './public.js';

export default {
    preload:function(){
        vars.game.load.image('preloaderBar','assets/loading-bar.png');
    },
    create:function(){
        vars.game.state.start('Preloader');
    }
}
 

//preloader.js
import vars from './public.js';

export default {
    preload : function(){
        var preloadSprite = vars.game.add.sprite(vars.game.world.width/4,vars.game.world.height / 2 ,'preloaderBar');
        var preloadText = vars.game.add.text(vars.game.width/2,vars.game.height/2+60,'0%',{font:'40px Arial',align:"center",color:"#fff"})
        console.log(preloadSprite);
        vars.game.load.setPreloadSprite(preloadSprite);
        // vars.game.load.audio('drivin-home', 'assets/world.wav');
        // vars.game.load.audio('ho-ho-ho', 'assets/bonbon.wav');
        // vars.game.load.audio('hop', 'assets/bomb.wav');
        vars.game.load.image('platform', 'assets/1.png');
        vars.game.load.spritesheet('santa-running', 'assets/runman.png', 493/5, 174,5);
        vars.game.load.image('snow-bg', 'assets/beijing1.png');
        vars.game.load.image('snow-bg-2', 'assets/yuanjing1.jpg');
        vars.game.load.image('snowflake', 'assets/xiaoshixiaoguo.png');
        vars.game.load.image('logo', 'assets/name.png');
        vars.game.load.image('startbtn', 'assets/bangzhujiantou.png');

        vars.game.load.onFileComplete.add(function(){
            var progress = vars.game.load.progress;
            preloadText.text = progress+'%';
        });
        vars.game.load.onLoadComplete.add(function(){//所有资源加载完成
            preloadText.kill();
            vars.game.state.start('Menu');
        })
    },
    create:function(){

    }
}

//main.js
import vars from './public.js';

export default {
    create : function(){
        vars.game.add.tileSprite(0,0,vars.game.width,vars.game.height,'snow-bg-2').autoScroll(-50,0);
        vars.game.add.tileSprite(0, 0, vars.game.width, vars.game.height, 'snow-bg').autoScroll(-100,0);
        vars.logo = vars.game.add.sprite(vars.game.width / 2 - 158, 20, 'logo');
        vars.logo.alpha = 0;
        vars.game.add.tween(vars.logo).to({
            alpha:1
        },1000,Phaser.Easing.Linear.None,true,0);
        vars.startBtn = vars.game.add.button(vars.game.width/2-89,vars.game.height -120,'startbtn',function(){ vars.game.state.start('Game');});
        vars.startBtn.alpha = 0;
        vars.game.add.tween(vars.startBtn).to({
            alpha:1
        },1000,Phaser.Easing.Linear.None,true,1000); 

    }
}
 

//game.js 游戏主逻辑
import vars from './public.js';

export default {
    create : function(){
        vars.gameScore = 0;
        vars.currentFrame = 0;
        vars.particleInterval = 2*60;
        vars.gameSpeed = 580;
        vars.isGameOver = false;
        vars.game.physics.startSystem(Phaser.Physics.ARCADE);
        vars.bg_heaven = vars.game.add.tileSprite(0, 0, vars.game.width,vars.game.height, 'snow-bg-2').autoScroll(-50,0);
        vars.bg = vars.game.add.tileSprite(0, 0, vars.game.width, vars.game.height, 'snow-bg');
        vars.bg.fixedToCamera = true;
        vars.bg.autoScroll(-vars.gameSpeed / 6, 0);
        vars.platforms = vars.game.add.group();
        vars.platforms.enableBody = true;
        vars.platforms.createMultiple(5,'platform',0,false);
        vars.platforms.setAll('anchor.x',0.5)
        vars.platforms.setAll('anchor.y',0.5)
        var plat;
        for (var i = 0; i < 5; i++) {
            plat = vars.platforms.getFirstExists(false);
            plat.reset(i * 192, vars.game.world.height - 44);
            plat.width = 300*0.6;
            plat.height = 88*0.6;
            vars.game.physics.arcade.enable(plat);
            plat.body.immovable = true;
            plat.body.bounce.set(0);
        }
        vars.lastPlatform = plat;
        vars.man = vars.game.add.sprite(100,vars.game.height - 200,'santa-running');
        vars.man.animations.add('run');
        vars.man.animations.play('run',15,true);
        vars.man.width = (493/5)*0.5;
        vars.man.height = 174*0.5;
        vars.game.physics.arcade.enable(vars.man);
        vars.man.body.gravity.y = 1500;
        vars.man.body.collideWorldBounds = true;
        vars.game.camera.follow(vars.man);
        vars.cursors = vars.game.input.keyboard.createCursorKeys();
        vars.spacebar = vars.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        vars.score = vars.game.add.text(20,20,'',{
            font: '24px Arial',
            fill: 'white'
        });
    },
    update:function(){
        if (!vars.isGameOver) {
            vars.gameScore += 0.5;
            vars.gameSpeed += 0.03;
            vars.score.text = 'Score:' + Math.floor(vars.gameScore);
            vars.currentFrame++;
            var moveAmount = vars.gameSpeed / 100;
            vars.game.physics.arcade.collide(vars.man,vars.platforms);
            if (vars.man.body.bottom >= vars.game.world.bounds.bottom) {
                vars.isGameOver = true;
                vars.endGame();
            }
            if (vars.cursors.up.isDown && vars.man.body.touching.down || vars.spacebar.isDown && vars.man.body.touching.down|| vars.game.input.mousePointer.isDown && vars.man.body.touching.down || vars.game.input.pointer1.isDown && vars.man.body.touching.down) {
                vars.man.body.velocity.y = -500;
            }
            vars.platforms.children.forEach(function(platform){
                platform.body.position.x -= moveAmount;
                if (platform.body.right <= 0) {
                    platform.kill();
                    var plat = vars.platforms.getFirstExists(false);//获得第一个不存在的子元素,参数为true则为获得第一个存在的子元素
                    plat.reset(vars.lastPlatform.body.right + 192,vars.game.world.height - Math.floor(Math.random() * 50) -24);
                    plat.body.immovable = true;
                    vars.lastPlatform = plat;
                }
            });
        }
    }
}

最后可以就可以通过webpack开始打包了