JSFiddle - React, Tailwind, and code Playground

by Ion Prodan

JavaScript

/* globals game, Phaser */

let playState = {
  create () {
    // set game background color to black
    game.stage.backgroundColor = '#000'

    // set arcade physics
    game.physics.startSystem(Phaser.Physics.ARCADE)
    // We check bounds collisions against all walls other than the bottom one
    game.physics.arcade.checkCollision.down = false
    // add the physics engine to all the game objetcs
    game.world.enableBody = true

    // create paddle, and set collide with world margin
    this.paddle = game.add.sprite(400, 800, 'paddle')
    this.paddle.anchor.setTo(0.5, 0.5)
    game.physics.enable(this.paddle)
    this.paddle.body.collideWorldBounds = true
    this.paddle.body.immovable = true

    // call createBall function
    this.createBall()

    // lives count
    this.lives = 3

    // add lives label
    this.livesLabel = game.add.text(
      290, 20, 'lives: 3',
      { font: '20px Arial', fill: '#ffffff' }
    )

    // add sounds
    this.paddleTouch = game.add.audio('paddleTouch')
    this.brickDestroy = game.add.audio('brickDestroy')
    this.gameOver = game.add.audio('gameOver')

    // create the tilemap
    this.map = game.add.tilemap('map')
    // add the tileset to the map
    this.map.addTilesetImage('block')
    // create the layer, by specifying the name of the Tiled layer
    this.layer = this.map.createLayer('Tile Layer 1')
    // set the world size to match the size of the layer
    // this.layer.resizeWorld()
    // enable collisions for the block
    // this.map.setCollision(1)

    this.blocks = this.add.physicsGroup()

    this.map.createFromTiles(1, null, 'block', this.layer, this.blocks)

    this.scoreLabel = game.add.text(
      20, 20, 'score: 0',
      { font: '20px Arial', fill: '#ffffff' }
    )

    game.global.score = 0

    // create cursors
    this.cursors = game.input.keyboard.createCursorKeys()
  },
  update () {
    // add collisions between the paddle and the ball
    game.physics.arcade.collide(this.paddle,...