JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game_area"></div>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game_area', { preload: preload, create: create, render: render });

function preload() {
    game.time.advancedTiming = true;

}

var distance = 300;
var speed = 6;
var star;
var texture;

var max = 400;
var xx = [];
var yy = [];
var zz = [];

function create() {

		//	Create our bitmapData which we'll use as a Sprite texture
		var bmd = game.add.bitmapData(4, 4);

		//	Fill it
    var grd = bmd.context.createLinearGradient(0, 0, 0, 4);

    grd.addColorStop(0, '#8ED6FF');
    grd.addColorStop(1, '#004CB3');
    bmd.context.fillStyle = grd;
    bmd.context.fillRect(0, 0, 4, 4);

    //	Put the bitmapData into the cache
    game.cache.addBitmapData('blueShade', bmd);
    
    star = game.make.sprite(0, 0, game.cache.getBitmapData('blueShade'));
    texture = game.add.renderTexture(800, 600, 'texture');

    game.add.sprite(0, 0, texture);

    for (var i = 0; i < max; i++)
    {
        xx[i] = Math.floor(Math.random() * 800) - 400;
        yy[i] = Math.floor(Math.random() * 600) - 300;
        zz[i] = Math.floor(Math.random() * 1700) - 100;
    }

}

function render() {
    
    
    texture.clear();

    for (var i = 0; i < max; i++)
    {
        var perspective = distance / (distance - zz[i]);
        var x = game.world.centerX + xx[i] * perspective;
        var y = game.world.centerY + yy[i] * perspective;

        zz[i] += speed;

        if (zz[i] > 300)
        {
            zz[i] -= 600;
        }

        texture.renderXY(star, x, y);
    }
    game.debug.text(game.time.fps || '--', 2, 14, "#00ff00");

}