index.js

/* eslint-disable */
import Phaser from 'phaser';

class Breakout extends Phaser.Scene {
  constructor() {
    super({ key: 'breakout' });
  }

  preload() {
    this.load.atlas('assets', 'static/assets/breakout.png', 'static/assets/breakout.json');
  }

  create() {
    this.physics.world.setBoundsCollision(true, true, true, false);
    this.bricks = this.physics.add.staticGroup({
      key: 'assets',
      frame: ['blue1', 'red1', 'green1', 'yellow1', 'silver1', 'purple1'],
      frameQuantity: 10,
      gridAlign: {
        width: 10,
        height: 6,
        cellWidth: 64,
        cellHeight: 32,
        x: 112,
        y: 100,
      },
    });
    this.paddle = this.physics.add.image(400, 550, 'assets', 'paddle1').setImmovable();
    this.ball = this.physics.add.image(400, 500, 'assets', 'ball1').setCollideWorldBounds(true).setBounce(1);
    this.ball.setData('onPaddle', true);
    this.physics.add.collider(this.ball, this.bricks, this.hitBrick, null, this);
    this.physics.add.collider(this.ball, this.paddle, this.hitPaddle, null, this);

    this.input.on('pointermove', (pointer) => {
      this.paddle.x = Phaser.Math.Clamp(pointer.x, 52, 748); /* eslint-disable-line babel/new-cap */
      if (this.ball.getData('onPaddle')) {
        this.ball.x = this.paddle.x;
      }
    });

    this.input.on('pointerup', () => {
      if (this.ball.getData('onPaddle')) {
        this.ball.setVelocity(-75, -300);
        this.ball.setData('onPaddle', false);
      }
    });
  }

  update() {
    if (this.ball.y > 600) {
      this.resetBall();
    }
  }

  hitBrick(ball, brick) {
    brick.disableBody(true, true);
    if (!this.bricks.countActive()) {
      this.resetLevel();
    }
  }
  resetBall() {
    this.ball.setVelocity(0);
    this.ball.setPosition(this.paddle.x, 500);
    this.ball.setData('onPaddle', true);
  }
  resetLevel() {
    this.resetBall();
    this.bricks.children.each(brick => brick.enableBody(false, 0, 0, true, true));
  }
  hitPaddle(ball, paddle) { /* eslint-disable-line */
    const diff = Math.abs(ball.x - paddle.x);
    const direction = (ball.x > paddle.x) ? 1 : -1;
    const velocity = 10 * diff * direction || 2 + (8 * Math.random());
    ball.setVelocityX(velocity);
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#CCCCCC',
  scene: [Breakout],
  parent: 'root',
  physics: {
    default: 'arcade',
  }
};

const game = new Phaser.Game(config); /* eslint-disable-line no-unused-vars */

// This is needed for Hot Module Replacement
if (module.hot) {
  module.hot.accept();
}