Star.js

var Pixi = require("pixi.js")
var Afloop = require("afloop")
var Keyb = require("keyb")

var WIDTH = 230
var HEIGHT = 130
var STAR_COUNT = 30

var renderer = Pixi.autoDetectRenderer(WIDTH, HEIGHT)
renderer.backgroundColor = 0x222222
renderer.roundPixels = true

var mount = document.getElementById("mount")
mount.appendChild(renderer.view)

class Star extends Pixi.Sprite {
    constructor(protostar = new Object()) {
        super(Pixi.Texture.fromImage(require("./images/projectile.png")))
        
        this.position.x = Math.random() * WIDTH
        this.position.y = Math.random() * HEIGHT
        
        this.tint = protostar.color || Star.getRandomColor()
        
        this.parallax = protostar.parallax
        this.speed = this.parallax * 0.5
    }
    update(tick) {
        this.position.x -= this.speed
        // this.position.x = Math.floor(this.position.x)
        if(this.position.x < -this.width) {
            this.position.x *= -1
            this.position.x += WIDTH
            this.position.y = Math.random() * HEIGHT
        }
    }
    static get colors() {
        return [
            0xE5E4E2,
            0xC44040,
            0xD89000,
            0x339D33,
            0x4A508A,
        ]
    }
    static getRandomColor() {
        return Star.colors[Math.floor(Math.random() * Star.colors.length)]
    }
}

var game = new Pixi.Container()
for(var i = 0; i < STAR_COUNT; i++) {
    game.addChild(new Star({
        parallax: i % 3 + 1,
        color: Star.colors[i % Star.colors.length]
    }))
}

var loop = new Afloop(function(tick) {
    game.children.forEach((child) => {
        if(!!child.update) {
            child.update(tick)
        }
    })
    
    renderer.render(game)
})