Draw moving line in phaser 3

Question

I want to draw line, where it's first pair of coordinates situated in the center of drew circle and it's second pair will be unsettled until I direct it to the cirlce with the same color, which have first one. Do you have any ideas?

My code:

let config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            backgroundColor: '#f0ebeb',
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 300 },
                    debug: false
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update
            },

            scale: {
                autoCenter: Phaser.Scale.CENTER_BOTH
            }
        };

        let game = new Phaser.Game(config);
        let items = [];

        let dots =  new Map([
            [1, '#4293f5'],
            [2, '#42f554'],
            [3, '#f5e942'],
            [4, '#f55a42'],
            [5, '#f542c8'],
        ])

        function preload() {
            
        }
        function create() {
            let x = 100;
            let y = 0;

            for (i = 0; i < 36; i++) {
                if (i % 6 === 0) {
                    y += 85;
                    x = 100;
                }
                this.add.circle(x, y, 35, parseInt(dots.get(getRandomInt(5)).replace(/^#/, ''), 16));
                x += 125;
            }
            
        }
        function update() { }

        function getRandomInt(max) {
            return Math.floor(Math.random() * max) + 1;
        }

What I am trying to do: https://play.google.com/store/apps/details?id=com.nerdyoctopus.gamedots

Answer 1

A quick possible solution could be to use the pointer Events (pointerdown, pointermove and pointerup) of the scene. Here is a demo code, with the basic functionality

let config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 400,
    height: 200,
    scene: { create }
};

let game = new Phaser.Game(config);

let isDragging =  false;
let lineStartPosition =  {x:0 , y:0};

let line;

function create ()
{
    let cicles = []
    for(let rowIdx = 0; rowIdx < 4; rowIdx++ ){
        for(let colIdx = 0; colIdx < 2; colIdx++ ){
            let circle = this.add.circle(50 + 100 * rowIdx, 50 + 100 * colIdx, 25, 0x6666ff).setOrigin(.5);
            circle.setInteractive();
            cicles.push(circle);
        }        
    }

    line = this.add.line(0,0, 0,0, 100, 100,  0xffffff).setOrigin(0);
    line.setLineWidth(5);
    line.visible = false;
    
    // adding the events to the scene
    this.input.on('pointerdown', dragStart);
    this.input.on('pointerup', dragEnd);
    this.input.on('pointermove', drag); 

}


function dragStart(pointer, gameObjects){

    if(gameObjects.length == 0)
      return

    lineStartPosition.x = gameObjects[0].x;
    lineStartPosition.y = gameObjects[0].y;
    isDragging = true;

    line.x = gameObjects[0].x;
    line.y = gameObjects[0].y;

    line.setTo(0, 0, 0, 0);
    line.visible = true;

}

function drag(pointer, gameObject){
    if(isDragging == true){
        line.setTo(0, 0, pointer.x - lineStartPosition.x, pointer.y - lineStartPosition.y);
    }
}

function dragEnd(pointer, gameObject){
    isDragging = false;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>