JSFiddle - React, Tailwind, and code Playground

by Gopinath Kaliappan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

JavaScript

let xDestination = 100;
            let yDestination = 100;
    
            let app = new PIXI.Application(window.width,window.height);
            document.body.appendChild(app.view);
    
    
            let Graphics = new PIXI.Graphics();
            Graphics.beginFill(0x00FFFF);
            let rect = Graphics.drawCircle(20, 20, 20, 20);
            let NewStage = new PIXI.Graphics();
    
    
            NewStage.beginFill(0xFC7F5F);
            let bodyy = NewStage.drawRect(0, 0, 500, 500);
            bodyy.interactive = true;
            rect.interactive = true;
    
            app.stage.addChild(bodyy);
            app.stage.addChild(rect);
    
    
            let isMovingForward = true;
            
            app.ticker.add(function(){
            if(rect.pivot.x !== xDestination && rect.pivot.y !== yDestination){
               rect.x -= (rect.x - xDestination ) /10;
               rect.y -= (rect.y - yDestination ) /10;
           }
             
            })
    
    bodyy.click = function(mouseData){
       xDestination = Math.round(mouseData.data.global.x);
       yDestination =  Math.round(mouseData.data.global.y);
       console.log( Math.round(mouseData.data.global.x),Math.round(mouseData.data.global.y));
    }