前言

打算写一个“环球飞行模拟器”，实现以下功能：

空中飞行的感觉
可以看见地面的风景
比模拟飞行链接更简易
表达一种悲伤的感觉

配置

phaser框架
webstorm编辑器
Chrome浏览器

开始

基础场景可以从官网里的phaser-part10.html里找到，目前实现的是（phaser提供的）：

类似马里奥的游戏，但是背景无法移动

部分代码：

function update ()
{
    if (gameOver)
    {
        return;
    }

    if (cursors.left.isDown)
    {
        player.setVelocityX(-160);

        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(160);

        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);

        player.anims.play('turn');
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.setVelocityY(-330);
    }
}

function collectStar (player, star)
{
    star.disableBody(true, true);

    //  改变分数
    score += 10;
    scoreText.setText('Score: ' + score);

    if (stars.countActive(true) === 0)
    {
        //  A new batch of stars to collect
        stars.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);

        });

        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
        bomb.allowGravity = false;

    }
}

由于目前背景是不能移动的，所以需要修改代码，使得背景能够移动。
仅仅实现背景移动的代码（已加注释）：


var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-background-move', { preload: preload, create: create, update: update });

function preload() {

    //  加载 16x16 的瓦块
    game.load.image('tiles', 'assets/tilemaps/tiles/sci-fi-tiles.png');

}

var cursors;

function create() {

    //  创建动态的地图数据
    //  尺寸是128x128 的
    var data = '';

    for (var y = 0; y < 128; y++)
    {
        for (var x = 0; x < 128; x++)
        {
            data += game.rnd.between(0, 20).toString();

            if (x < 127)
            {
                data += ',';
            }
        }

        if (y < 127)
        {
            data += "\n";
        }
    }

    // console.log(data);

    //  把数据加载到game
    game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV);

    //  创建我们的动态地图
    map = game.add.tilemap('dynamicMap', 16, 16);

    //  地图添加16*16的瓦块
    map.addTilesetImage('tiles', 'tiles', 16, 16);

    //  不需要增加图层
    layer = map.createLayer(0);

    //  图层可以移动
    layer.resizeWorld();

    game.physics.startSystem(Phaser.Physics.ARCADE);

    // 创建光标（通过键盘创建）
    cursors = game.input.keyboard.createCursorKeys();

}

function update() {

    if (cursors.left.isDown)
    {
        game.camera.x--;
    }
    else if (cursors.right.isDown)
    {
        game.camera.x++;
    }

    if (cursors.up.isDown)
    {
        game.camera.y--;
    }
    else if (cursors.down.isDown)
    {
        game.camera.y++;
    }

}

这就创建好了背景移动，明天就是讲背景移动放进原来的程序，把精灵换成飞机。