square move on the stage
click on the stage and make the block go to that position
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.js"></script>
CSS
margin: 0;
padding: 0;
background-color: #000000;
JavaScript
var renderer = PIXI.autoDetectRenderer(500, 400);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var helloText = new PIXI.Text('Hello', {font: 'bold italic 20px Arial', fill: '#ffffff',stroke: '#000000',},1);
stage.addChild(helloText);
var backtexture = new PIXI.RenderTexture(renderer);
bq = new PIXI.Graphics();
bq.beginFill(0x001100);
bq.drawRect(0, 0, 500, 400)
bq.endFill();
backtexture.render(bq);
var blocktexture = new PIXI.RenderTexture(renderer);
sq = new PIXI.Graphics();
sq.beginFill(0xff2244);
sq.drawRect(0, 0, 50, 50)
sq.endFill()
blocktexture.render(sq);
var bkg = new PIXI.Sprite(backtexture);
bkg.position.x = 0;
bkg.position.y = 0;
bkg.width = 500;
bkg.height = 400;
stage.addChild(bkg);
var block = new PIXI.Sprite(blocktexture);
block.position.x = 40;
block.position.y = 80;
stage.addChild(block);
bkg.interactive = true;
bkg.on('mousedown',moveme);
animate();
function moveme(xx)
{
console.log(xx);
//var newPosition = xx.data.getLocalPosition(this.parent);
block.position.x = xx.data.global.x;
block.position.y = xx.data.global.y;
}
function animate()
{
requestAnimationFrame(animate);
renderer.render(stage, false);
}