在移相器 3 中绘制移动线

Posted 2023-03-15

【中文标题】在移相器 3 中绘制移动线

【英文标题】：Draw moving line in phaser 3

【发布时间】：2021-08-02 15:08:08

【问题描述】：

我想画线，它的第一对坐标位于绘制圆的中心，第二对坐标将不稳定，直到我将它指向具有相同颜色的圆，它有第一个。你有什么想法？

我的代码：

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;
        

我想要做什么：https://play.google.com/store/apps/details?id=com.nerdyoctopus.gamedots

【参考方案1】：

一种可能的快速解决方案是使用场景的指针事件（pointerdown、pointermove 和pointerup）。这是一个演示代码，具有基本功能

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>