JSFiddle - React, Tailwind, and code Playground

by mattstyles

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<canvas class="js-canvas" width="640" height="480"></canvas>

JavaScript

// Code goes here

var renderer = new PIXI.autoDetectRenderer( 640, 480, {
  resolution: 1,
  view: document.querySelector( '.js-canvas' )
})
renderer.backgroundColor = 0xf1f1f1

var stage = new PIXI.Container()

var sprite1 = new PIXI.Sprite.fromImage( 'http://i.imgur.com/k7eoBmd.jpg' )
sprite1.interactive = true
sprite1.position.set( 20, 20 )
sprite1.scale.set( .25, .25 )

sprite1.on( 'mousedown', function() {
  alert( 'one' )
})

var sprite2 = new PIXI.Sprite.fromImage( 'http://i.imgur.com/k7eoBmd.jpg' )
sprite2.interactive = true
sprite2.position.set( 120, 120 )
sprite2.scale.set( .25, .25 )

sprite2.on( 'mousedown', function() {
  alert( 'two' )
})

stage.addChild( sprite1 )
stage.addChild( sprite2 )

function render() {
  renderer.render( stage )
}


setInterval( render, 1000 / 60 )