如何使用Createjs来编写HTML5游戏（六）完成一个简单的打飞机游戏（上）

打飞机游戏雷电是一款经典的空战游戏，利用已知的CreateJS知识就可以很容易的做出一款类似的打飞机游戏。

首先，弄一些游戏需要的资源，做这样的一个小游戏，首先需要一架玩家操控的飞机图片，然后是可以击落的敌机图片，连续的爆炸图片来组成一个爆炸的动画Sprite，开枪的声音，爆炸的声音，星空的背景，然后使用TexturePacker把这些图片合并成一张图片，并获得一个json文件，其中的数据可以用做生成SpriteSheet的参数。

而后，有了资源之后，再构想一个大概的游戏框架，从最基础的CreateJS游戏框架开始，思考游戏的流程和逻辑，逐步的添加哪些功能来实现这个游戏，我的打飞机游戏最初的框架是这样的

var stage;
    function init(){
        //1.导入资源，并在资源加载完成后调用处理函数handleComplete
        //2.创建舞台stage
    }

    function handleComplete(){
        buildGame();//3.创建游戏界面，星空，玩家飞机，敌机，计分版等
        setContorl();//4.设置按键控制，让玩家可以左右移动并发射子弹
        startGame();//5.进入游戏循环，使用tick事件实现游戏的变化，发展
    }

    function startGame(event){
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener('tick',function(){
            updateGame();//6.更新游戏元素的位置，更新分数等
            checkGame();//7.检查游戏中的元素是否发生碰撞，敌机被击落，还是飞出屏幕等等
            stage.update();
        });
    }

按照思路，一切顺利的话，完成这7个步骤，一个简单的打飞机游戏就产生了。那么先从导入资源和创建舞台开始吧

1.准备好所用的图片和声音，首先把所用的图片合成到一起，准备两个声音文件，发射子弹shot.mp3和爆炸的声音explosion.mp3，创建好页面的Canvas并把背景设置为黑色的

<canvas id="game" width="500" height="700" style="background-color: black"></canvas>

2.初始化部分，创建舞台和导入文件

function init(){
    stage = new createjs.Stage('game');
    sWidth = stage.canvas.width;
    sHeight = stage.canvas.height;
    queue = new createjs.LoadQueue(true);
    createjs.Sound.registerPlugins([createjs