在 Phaser 3 中画线答案

【问题标题】：Draw line in Phaser 3在 Phaser 3 中画线
【发布时间】：2021-08-02 12:45:52
【问题描述】：

我需要你的帮助。我是 Phaser 3 的新手。我想用简单的规则创建游戏。有 36 个点，位于 6 行中。玩家需要将点与线合并，但他只能合并相同颜色的点，并且合并只能在垂直和水平方向发生。所以，你不能画出对角线。当你完成联合时，点就会消失。我怎样才能实现与线的结合？我当前的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/phaser.min.js"></script>
</head>

<body>
    <script>
        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 = [];

        function preload() {
            for (let i = 1; i < 6; i++)
                this.load.image(i, 'img/' + i + '.png');
        }
        function create() {
            let x = 100;
            let y = 0;

            for (i = 0; i < 36; i++) {
                if (i % 6 === 0) {
                    y += 85;
                    x = 100;
                }
                this.add.image(x, y, getRandomInt(5).toString())
                x += 125;
            }
        }
        function update() { }

        function getRandomInt(max) {
            return Math.floor(Math.random() * max) + 1;
        }
    </script>
</body>

</html>

我想要这样的东西

【问题讨论】：

标签： javascript html phaser-framework

【解决方案1】：

我只会允许用户只选择（画一条线）到下一个有效圆圈。

一个有效的圆圈，在 same 行或 同一列 或 same color 或 最大联合长度 或 ...

And when the drawing is finished I would, only allow union, when more than one circle is selected (is in the given path).

这里有一个简短的演示，它的样子：

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

let game = new Phaser.Game(config);

let isDragging =  false;
let lineStartPosition =  {x:0 , y:0};
let currentPath = [];
let currentColor;

let line;
let pathGraphics;

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);
            // Just to test a different color
            if(rowIdx + colIdx ==2){
              circle.fillColor = 0xff0000;
            }
            circle.setInteractive();
            cicles.push(circle);
        }        
    }

    line = this.add.line(0,0, 0,0, 100, 100,  0xffffff).setOrigin(0);
    line.setLineWidth(5);
    line.visible = false;
    
    pathGraphics = this.add.graphics();
    
    // 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;
    }
    isDragging = true;
    
    // remember Starting Color
    currentColor = gameObjects[0].fillColor;
    
    // initialize Path
    currentPath = [gameObjects[0]];

    // draw/save last segment of the path
    lineStartPosition.x = gameObjects[0].x;
    lineStartPosition.y = gameObjects[0].y;
    
    line.x = gameObjects[0].x;
    line.y = gameObjects[0].y;
    line.setTo(0, 0, 0, 0);
    line.visible = true;

}

function drag(pointer, gameObjects ){
    if(isDragging == true){
        
        // Check If Circle is allowed to be added, to path
        // Here you would also check if the line is horizontal or vertical  (this part is currently not implemented)
        if(gameObjects[0] && currentPath.indexOf(gameObjects[0]) === -1 && currentColor == gameObjects[0].fillColor){
          currentPath.push(gameObjects[0]);
          
          line.x = gameObjects[0].x;
          line.y = gameObjects[0].y;
          
          lineStartPosition.x = gameObjects[0].x;
          lineStartPosition.y = gameObjects[0].y;

        }
        line.setTo(0, 0, pointer.x - lineStartPosition.x, pointer.y - lineStartPosition.y);
        
        drawPath();
    }
}

function drawPath(){
    pathGraphics.clear();
    if(currentPath.length > 0){
      pathGraphics.lineStyle(10, 0xffffff);
      let path = new Phaser.Curves.Path(currentPath[0].x, currentPath[0].y);
      
      for(let idx = 1; idx < currentPath.length; idx++){
        let point = currentPath[idx];
        path.lineTo(point.x, point.y);
      }

      path.draw(pathGraphics);
    }
    
    
    
}

function dragEnd(pointer, gameObjects){
    if(gameObjects.length == 0){
      return;
    }
    
    if(currentPath.length < 2) {
      console.info('No valid path');
      return
    } else { 
      console.info(`Valid Union path, length: ${currentPath.length}`);
    }

    line.visible = false;
    isDragging = false;
}

&lt;script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"&gt;&lt;/script&gt;

【讨论】：