Electron Adventures: Episode 71: CoffeeScript Phaser Game

Now that we have CoffeeScript 2 setup, let's create a simple game with Phaser 3.

`js2.coffee`

This is my first time writing new CoffeeScript in years, and I quickly discovered how painful lack of working js2.coffee is. The existing converter only handles pre-ES6 JavaScript, and even that often doesn't generate great code. Being able to convert between JavaScript and CoffeeScript easily was a huge part of CoffeeScript's appeal at the time, and it's now completely gone.

Not that there's anything too complicated about converting JavaScript to CoffeeScript manually, but it's pointless tedium in a language whose primary appeal is cutting on pointless tedium.

Asset files

I emptied preload.coffee as we won't need it.

I added star.png and coin.mp3 to public/. There's a lot of free assets on the Internet which you can use in your games.

We'll also need to npm install phaser

`public/index.html`

Here's the updated index.html file, just loading Phaser, and adding a placeholder div for game canvas to be placed at:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <div id="game"></div>
    <script src="../node_modules/phaser/dist/phaser.js"></script>
    <script src="./build/app.js"></script>
  </body>
</html>

`public/app.css`

To keep things simple I decided to just center the game canvas in the browser window, without any special styling:

body {
  background-color: #444;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#game {
}

Game source

Let's go through the game code. It's something I wrote a while ago, and just slightly adapted and converted to CoffeeScript for this episode.

Getters and setters

When CoffeeScript adapted to ES6, a few features were really difficult to add due to syntactic issues.

Dropping some features made sense, like the whole var/let/const mess. JavaScript would do just fine having one way to define variables - namely let. You might have noticed by now that I never use const - if variables declared consts were actually immutable, I might change my mind, but I find it both pointless extra thing to think about, and also intentionally misleading. Declaring mutable state with const, as is the standard React Hooks way (const [counter, setCounter] = useState(0)), looks like a vile abomination to me. So CoffeeScript never bothering with three variable types makes perfect sense.

Much more questionable is not having getters and setters. They can be emulated with calls to Object.defineProperty, but these are ugly and are in wrong place - in constructor instead of being part of class definition. Well, we'll just use what we have, so here's the getter helper:

get = (self, name, getter) ->
  Object.defineProperty self, name, {get: getter}

Start game

We define constant size box and create a game using MainScene class.

size_x = 800
size_y = 600
game = new Phaser.Game
  backgroundColor: "#AAF"
  width: size_x
  height: size_y
  scene: MainScene

`StarEmitter`

When a ball hits a brick, we want to do some fancy effects. An easy effect is bursting some stars, and it's so common Phaser already contains particle emitter system. Here's a class that sets up such emitter with some settings how those stars should fly.

class StarEmitter
  constructor: (scene) ->
    @particles = scene.add.particles("star")
    @emitter = @particles.createEmitter
      gravityY: -50
      on: false
      lifespan: 2000
      speedX: {min: -50, max: 50}
      speedY: {min: -50, max: 50}
      alpha: 0.2
      rotate: {min: -1000, max: 1000}

  burst_at: (x, y) ->
    @emitter.emitParticle(40, x, y)

`Brick`

class Brick
  constructor: (scene, x, y) ->
    colors_by_row = {
      2: 0xFF0000
      3: 0xFF0080
      4: 0xFF00FF
      5: 0xFF80FF
      6: 0x8080FF
      7: 0x80FFFF
    }
    @destroyed = false
    @brick_x_size = size_x/18
    @brick_y_size = size_y/30
    @brick = scene.add.graphics()
    @brick.x = x*size_x/12
    @brick.y = y*size_y/20
    @brick.fillStyle(colors_by_row[y])
    @brick.fillRect(
      -@brick_x_size/2, -@brick_y_size/2,
      @brick_x_size, @brick_y_size
    )
    get @, "x",-> @brick.x
    get @, "y",-> @brick.y

  destroy: ->
    @brick.destroy()
    @destroyed = true

Brick is a straightforward class wrapping Phaser brick object. You can see how one can do getters in CoffeeScript. It works, but it's a bit awkward.

The only method Brick has is destroy.

`Ball`

class Ball
  constructor: (scene) ->
    @ball = scene.add.graphics()
    @ball.x = 0.5*size_x
    @ball.y = 0.8*size_y
    @ball.fillStyle(0x000000)
    @ball.fillRect(-10,-10,20,20)
    @dx = 300
    @dy = -300
    get @, "x", -> @ball.x
    get @, "y", -> @ball.y

  update: (dt) ->
    @ball.x += @dx*dt
    @ball.y += @dy*dt
    if @ball.x <= 10 && @dx < 0
      @dx = - @dx
    if @ball.x >= size_x-10 && @dx > 0
      @dx = - @dx
    if @ball.y <= 10 && @dy < 0
      @dy = - @dy

The Ball has similar messy getter. The only method is update which is passed how much time passed since the last update, and it's responsible for ball bouncing off the walls, but not bouncing off paddle or bricks.

`Paddle`

class Paddle
  constructor: (scene) ->
    @paddle = scene.add.graphics()
    @paddle.x = 0.5*size_x
    @paddle.y = size_y-20
    @paddle.fillStyle(0x0000FF)
    @paddle.fillRect(-50, -10, 100, 20)
    get @, "x", -> @paddle.x

  update: (dt, direction) ->
    @paddle.x += dt * direction * 500
    @paddle.x = Phaser.Math.Clamp(@paddle.x, 55, size_x-55)

Paddle follows the same pattern. Its direction is sent to the update method depending on which keys are pressed, and it moves left or right. Phaser.Math.Clamp prevents it from going outside the canvas.

`MainScene`

class MainScene extends Phaser.Scene
  preload: () ->
    @load.image("star", "star.png")
    @load.audio("coin", "coin.mp3")

  create: () ->
    @active = true
    @paddle = new Paddle(@)
    @ball = new Ball(@)
    @bricks = []
    for x from [1..11]
      for y from [2..7]
        @bricks.push(new Brick(@, x, y))
    @emitter = new StarEmitter(@)
    @coin = @sound.add("coin")
    @coin.volume = 0.2

  handle_brick_colission: (brick) ->
    return if brick.destroyed
    distance_x = Math.abs((brick.x - @ball.x) / (10 + brick.brick_x_size/2))
    distance_y = Math.abs((brick.y - @ball.y) / (10 + brick.brick_y_size/2))
    if distance_x <= 1.0 && distance_y <= 1.0
      brick.destroy()
      @emitter.burst_at(@ball.x, @ball.y)
      @coin.play()
      if distance_x < distance_y
        @ball_bounce_y = true
      else
        @ball_bounce_x = true

  is_game_won: () ->
    @bricks.every((b) => b.destroyed)

  update: (_, dts) ->
    return unless @active
    dt = dts / 1000.0
    @ball.update(dt)
    if @input.keyboard.addKey("RIGHT").isDown
      @paddle.update(dt, 1)
    else if @input.keyboard.addKey("LEFT").isDown
      @paddle.update(dt, -1)
    @ball_bounce_x = false
    @ball_bounce_y = false
    for brick from @bricks
      @handle_brick_colission(brick)
    @ball.dx = -@ball.dx if @ball_bounce_x
    @ball.dy = -@ball.dy if @ball_bounce_y

    paddle_distance = Math.abs(@paddle.x - @ball.x)
    bottom_distance = size_y - @ball.y

    if @ball.dy > 0
      if bottom_distance <= 30 && paddle_distance <= 60
        @ball.dy = -300
        @ball.dx = 7 * (@ball.x - @paddle.x)
      else if bottom_distance <= 10 && paddle_distance >= 60
        @cameras.main.setBackgroundColor("#FAA")
        @active = false
    if @is_game_won()
      @cameras.main.setBackgroundColor("#FFF")
      @active = false

And finally the MainScene. preload, create, and update are Phaser methods. Everything else we just created ourselves.

I think everything should be fairly readable, as long as you remember that @foo means this.foo, so it's used for both instance variables and instance methods.

Is CoffeeScript dead?

While I feel nostalgia for it, the unfortunate answer is yes. I mentioned some historical background in previous episode, but ES6 adopted most of the features people used CoffeeScript for, and available tooling did not keep up with the times.

That's not to say the idea is dead. In particular Imba is a CoffeeScript-inspired language and framework that's absolutely worth checking out. It comes with an extremely expressive and performant framework. For some less extreme cases, Svelte, Vue, React, and so on all come with their own extended versions of JavaScript, so nobody really writes app in plain JavaScript anymore.

Results

Here's the results:

It's time to say goodbye to CoffeeScript, in the next episode we start another small project.

As usual, all the code for the episode is here.

Blog