JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="css/style.css">
        <title>GOL</title>
    </head>
    <body>
        <div id="div_canvas"></div>
        <script type="text/javascript" src="http://gol.aeonforce.com/js/pixi.min.js"></script>
        <script type="text/javascript" src="http://gol.aeonforce.com/js/jquery-3.3.1.min.js"></script>
    </body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}
html, body{
	cursor: url('http://gol.aeonforce.com/img/chuteira.svg'), auto;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#div_canvas{
	width: 100%;
	text-align:center;
}

canvas{
	display: inline;
}

JavaScript

var	w = window.innerWidth,
	h = window.innerHeight,
	objs = {},
	tex = {},
	anim = {},
	prop = w/16,
	props = {
		grass: [2060, 745, 16],
		trave: [1334, 471, 10],
		rede: [1309, 454, 9.8]
	};

var app = new PIXI.Application(w, h, {backgroundColor: 0x33aaff});

app.renderer.autoResize = true;

resizeAll();

window.body.appendChild(app.view);

objs['message'] = new PIXI.Text(
	"Carregando...",
	{fontFamily: "Arial", fontSize: 20, fill: "white"}
);
objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2));

app.stage.addChild(objs['message']);

app.loader
	.add('http://gol.aeonforce.com/css/fonts/Quantico-Regular.otf')
	.add('http://gol.aeonforce.com/img/grass.png')
	.add('http://gol.aeonforce.com/img/trave.png')
	.add('http://gol.aeonforce.com/img/rede.json')
	.on("progress", loadProgressHandler)
	.load(onAssetsLoaded);


function loadProgressHandler(loader, resource){
	objs['message'].text = "Carregando..."+(Math.round(loader.progress*100)/100)+"%";
	objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2));
	app.renderer.render(app.stage);
}

function onAssetsLoaded() {
	app.stage.removeChild(objs.message);
	delete objs.message;
	tex['grass'] = app.loader.resources["img/grass.png"].texture;
	tex['trave'] = app.loader.resources["img/trave.png"].texture;
	tex['rede'] = app.loader.resources["img/rede.json"].textures;
	anim['rede'] = [];
	for(var i=0; i<3; i++){
		anim['rede'].push(tex['rede']['rede0'+i+'.png']);
	}
	console.log(anim.rede);
	objs['grass'] = new PIXI.Sprite(tex['grass']);
	objs['grass'].anchor.set(0.5, 0.0);
	objs['grass'].position.set(app.screen.width/2, app.screen.height/2);
	objs['trave'] = new PIXI.Sprite(tex['trave']);
	objs['trave'].anchor.set(0.5, 0.8);
	objs['trave'].position.set(app.screen.width/2, app.screen.height/2);
	objs['rede'] = new...