JSFiddle - React, Tailwind, and code Playground
by ShukantPal
HTML
<script src="https://pixijs.download/fix/filter-system-clearing/pixi.min.js"></script>
CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
}
JavaScript
// PIXI shortcuts
var Container = PIXI.Container,
Loader = PIXI.Loader.shared,
RenderTexture = PIXI.RenderTexture,
Sprite = PIXI.Sprite;
// pixi settings
PIXI.settings.ROUND_PIXELS = true;
// Create our application instance
var app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
transparent: false,
backgroundColor: 0xffffff,
resizeTo: window
});
document.body.appendChild(app.view);
pArray = [
{
"filename": "jfmynv3xhjnfjb6/_001858_bouquet-of-flowers.png",
"x": 100,
"y": 75
},
{
"filename": "ewos7pgiucact4u/_001834_celery.png",
"x": 435,
"y": 307
},
{
"filename": "xbercdrprps1guz/_000236_ladle.png",
"x": 371,
"y": 178
},
{
"filename": "yv4mdik5aayecls/_001609_olive.png",
"x": 371,
"y": 100
},
{
"filename": "ffxed6koovyla45/_001157_pretzel.png",
"x": 242,
"y": 475
},
{
"filename": "kyau6hh8feq3yhk/_001209_razor.png",
"x": 307,
"y": 377
},
{
"filename": "ixnlkvqzlc3oa7w/_001426_rhinoceros.png",
"x": 242,
"y": 307
},
{
"filename": "17f7ughd390d8xz/_001603_spring.png",
"x": 114,
"y": 371
},
{
"filename": "vlz79p4kdm9gki0/_000382_tambourine.png",
"x": 178,
"y": 190
},
{
"filename": "4dzwip6wacgeqy6/_002300_vulture.png",
"x": 480,
"y": 480
}
];
// assets
var files = [];
// clues
for (i=0;i<pArray.length;i++) {
var ob = pArray[i];
files.push({
name:ob.filename,
url:"https://dl.dropbox.com/s/" + ob.filename + "?dl=0"
});
}
Loader
.reset()
.add(files)
.load(initGame);
// init game
function initGame() {
var cluesContainer = new Container();
var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 2;
for (var i=0;i<pArray.length;i++) {
var ob = pArray[i];
console.log(ob.filename);
var texture = Loader.resources[ob.filename].texture;
var sprite = new Sprite(texture);
sprite.anchor.set(0.5);
sprite.angle = 0;
sprite.x = ob.x;
sprite.y = ob.y;
var shadow = new Sprite(texture);
shadow.tint =...