"在移相器 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/phaser@3.55.2/dist/phaser.js"></script>