Разработка простой игры на phaser.io
Для знакомства с очередным игровым движком я всегда использую одну и ту же игру 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(); }
Посмотреть, что получилось, можно здесь.