JSFiddle - React, Tailwind, and code Playground
HTML
<title>Hello World</title>
<body>
<script src="pixi.js"></script>
<script src="controls.js"></script>
<script src="utils.js"></script>
<script src="main.js"></script>
<script>
//Test that Pixi is working
console.log(PIXI);
</script>
</body>
JavaScript
//Renderer Setup
var stage = new PIXI.Container()
var renderer = PIXI.autoDetectRenderer(720, 1280);
document.body.appendChild(renderer.view);
window.onresize = function (event) {
var w = window.innerWidth;
var newWidth = (newHeight*9)/16
var newHeight = window.innerHeight;
renderer.view.style.width = newWidth + "px";
renderer.view.style.height = newHeight + "px";
}
window.onresize();
PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
var container = new PIXI.DisplayObjectContainer();
container.scale.x = container.scale.y = 2;
stage.addChild(container);
//Aliases and Globals
var Sprite = PIXI.Sprite;
var state, newPosition;
//Sprite creation & Setup function
PIXI.loader
.add("images/tester.png")
.load(setup);
function setup(){
var test = new Sprite(
PIXI.loader.resources['images/tester.png'].texture
);
test.interactive = true;
test.buttonMode = true;
test.anchor.set(0.5);
test
.on('mousedown', onDragStart)
.on('touchstart', onDragStart)
.on('mouseup',onDragEnd)
.on('mouseupoutside', onDragEnd)
.on('touchend', onDragEnd)
.on('touchendoutside', onDragEnd)
.on('mousemove', onDragMove)
.on('touchmove', onDragMove);
test.position.x = 100;
test.position.y = 200;
container.addChild(test);
state = play;
gameLoop();
}
//Game Loop
function gameLoop(){
requestAnimationFrame(gameLoop);
state();
renderer.render(stage);
}
//Game States
function play(){
}
//Mouse Drag Functions
function onDragStart(event)
{
// store a reference to the data
// the reason for this is because of multitouch
// we want to track the movement of this particular touch
this.data = event.data;
this.dragging = true;
}
function onDragEnd()
{
this.dragging = false;
// set the interaction data to null
this.data = null;
}
function onDragMove()
{
if (this.dragging)
{
newPosition = this.data.getLocalPosition(this.parent);
if (newPosition.x <= 50|| newPosition.x <= renderer.view.style.width + 50){
...