JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.9/pixi.dev.js"></script>
<div>
<button id="create">Build</button>
<button id="close" disabled="true">Destroy</button>
</div>
CSS
body {
width: 100%;
margin: 0;
padding: 0;
}
JavaScript
window.onload = function(){
var closeButton = document.getElementById('close'),
createButton = document.getElementById('create'),
GAME = {};
// Create game
createButton.addEventListener('click', function(){
// Toggle button
createButton.setAttribute('disabled', true);
closeButton.removeAttribute('disabled');
// create an new instance of a pixi stage
GAME.stage = new PIXI.Stage(0x66FF99);
GAME.anim = false;
// create a renderer instance
GAME.renderer = new PIXI.WebGLRenderer(400, 300);//autoDetectRenderer(400, 300);
// Works fine for canvas
// GAME.renderer = new PIXI.CanvasRenderer(400, 300);
// add the renderer view element to the DOM
document.body.appendChild(GAME.renderer.view);
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/examples/1/bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
GAME.stage.addChild(bunny);
GAME.anim = true;
function animate() {
if (GAME.anim) {
requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
GAME.renderer.render(GAME.stage.stage);
}
}
});
// Close game
closeButton.addEventListener('click', function(){
// Toggle button
createButton.removeAttribute('disabled');
closeButton.setAttribute('disabled', true);
GAME.anim = false;
document.body.removeChild(GAME.renderer.view);
// Destroy
GAME.renderer.destroy();
});
}