在 Phaser 3 中画线
Posted
技术标签:
【中文标题】在 Phaser 3 中画线【英文标题】：Draw line in 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>
我想要这样的东西
【问题讨论】：
【参考方案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;
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>【讨论】：
以上是关于在 Phaser 3 中画线的主要内容，如果未能解决你的问题，请参考以下文章