Разработка простой игры на phaser.io

01.08.2017 at 13:22


Для знакомства с очередным игровым движком я всегда использую одну и ту же игру HitMeBrick. Посмотрим, как написать ее на phaser.

За основу я взял официальный туториал.

Сначала дорабатываем инициализацию

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.add.sprite(0, 0, 'sky');
    initGround();
    initPlayer();
    bricks = game.add.group();
    bricks.enableBody = true;
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
    livesText = game.add.text(16, 64, 'lives: 5', { fontSize: '32px', fill: '#000' });
    gameOverText = game.add.text(16, 112, '', { fontSize: '32px', fill: '#000' });
    leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
}

Здесь я вынес в отдельные функции инициализацию игрока и земли, они практически не изменились. Разве что платформы я убрал.

Так же добавились надписи для оставшихся жизней и для текста «game over». Вместо упрощенной инициализации кнопок я инициализирую только кнопки «вправо» и «влево».

Теперь функция update

function update() {
    if (Math.random() > 0.7)
        addBrickIfNeed();
    updateCollisions();
    updatePlayer();
}

function addBrickIfNeed() {
    if (brickCount < 5 && lives > 0) {
        if (bricks.length == 0 || bricks.getBounds().y > 50) {
            brickCount++;
            var brick = bricks.create(120 + 120 * Math.random(), 0, 'brick');
            brick.scale.setTo(0.5, 0.5);
            brick.body.velocity.y = 100 + 90 * Math.random();
            brick.body.velocity.x = Math.random() * 300;
            brick.body.collideWorldBounds = true;
            brick.body.bounce.x = 0.7 + Math.random() * 0.2;
            brick.body.bounce.y = 0.7 + Math.random() * 0.2;
        }
    }
}

Апдейт состоит из добавления нового кирпича, если их меньше 5, обработки коллизий и обновления игрока. Обновление игрока не отличается от базового туториала, обработка коллизий выглядит так:

function updateCollisions() {
    game.physics.arcade.collide(player, platforms);
    game.physics.arcade.collide(bricks, bricks);
    game.physics.arcade.overlap(bricks, platforms, hideBrick, null, this);
    game.physics.arcade.overlap(player, bricks, hitBrick, null, this);
}

function gameOver() {
    bricks.callAllExists("kill", true);
    gameOverText.text = "game over";
}

function hitBrick(player, brick) {
    brick.kill();
    brickCount--;
    lives -= 1;
    livesText.text = 'lives: ' + lives;
    addBrickIfNeed();
    if (lives == 0)
        gameOver();
}

function hideBrick(brick, ground) {
    brick.kill();
    brickCount--;
    score += 1;
    scoreText.text = 'score: ' + score;
    addBrickIfNeed();
}

Посмотреть, что получилось, можно здесь.