Breakout | p5play

// BREAKOUT!

// move the mouse to control the paddle, click to start

​

let walls, paddle, ball, bricks;

​

function setup() {

  new Canvas(800, 600);

  displayMode('centered');

  allSprites.color = 'white';

​

  walls = new Group();

  walls.collider = 'static';

  walls.w = 30;

  walls.h = 800;

​

  let wallTop = new walls.Sprite(canvas.w / 2, 0);

  wallTop.rotation = 90;

​

  // left and right walls

  new walls.Sprite(0, canvas.h / 2);

  new walls.Sprite(canvas.w, canvas.h / 2);

​

  ball = new Sprite(canvas.w / 2, canvas.h - 200, 11);

  ball.bounciness = 1;

  ball.friction = 0;

​

  paddle = new Sprite(canvas.w / 2, canvas.h - 50, 100, 20);

  paddle.rotationLock = true;

​

  bricks = new Group();

  bricks.collider = 'static';

  bricks.w = 40;

  bricks.h = 20;

  bricks.tile = '=';

​

  ball.collides(bricks, (ball, brick) => {

    brick.remove();

  });

​

  ball.collides(paddle, (ball, paddle) => {

    ball.direction += (ball.x - paddle.x) / 2;

    ball.speed = 8;

  });

}

​

function update() {

  background(247, 134, 131);

​

  paddle.moveTowards(mouse.x, paddle.y, 1);

​

  if (mouse.presses()) {

    // start or restart the game

    bricks.removeAll();

​

    new Tiles(

      [

        '.=====..======',

        '======..======',

        '==..==..==....',

        '==..==..==....',

        '======..=====.',

        '.=====..======',

        '....==......==',

        '....==......==',

        '....==..======',

        '....==..=====.'

      ],

      110,

      80,

      bricks.w + 4,

      bricks.h + 4

    );

​

    ball.x = canvas.w / 2;

    ball.y = canvas.h - 200;

    ball.direction = 90 + random(-10, 10);

    ball.speed = 8;

  }

}

​