使用 PixiJS 的文字游戏

Question

我正在尝试使用 PixiJS 创建一个 Words of Wonder 类型的游戏。我在下面分享我的代码，它仍在开发中，但是我似乎不知道如何制作它，以便用户可以选择并拖动字母来查找单词。现在，它只检测拖动的开始和结束，而无法检测到中间的任何内容。我怎样才能解决这个问题？谢谢！

window.onload = () => {
const container = document.getElementById('canvas-container');
const app = new PIXI.Application({
    width: container.clientWidth * 2,
    height: container.clientHeight * 2,
    backgroundColor: 0x1099bb,
});
container.appendChild(app.view);

const background = PIXI.Sprite.from('https://cdn.glitch.global/b457296f-514e-47e5-82c6-28bdeeda16ca/background.png?v=1716472339788');
background.width = app.screen.width;
background.height = app.screen.height;
app.stage.addChild(background);

const gridContent = [
    [null, null, null, null],
    [null, '', null, ''],
    [null, null, null, ''],
];

const gridSize = app.screen.width / 5.3;
const gridPadding = gridSize / 10;
const letters = ['L', 'G', 'O', 'D'];
const angleIncrement = (Math.PI * 2) / letters.length;
const circleCenterX = app.screen.width / 2;
const circleCenterY = app.screen.height - app.screen.width / 3 - 170;
const circleRadius = app.screen.width / 3.3;
const letterRadius = circleRadius / 4.2;
const letterColors = ['#ff9933', '#ff9933', '#ff9933', '#ff9933'];
const numRows = gridContent.length;
const numCols = gridContent[0].length;
const gridStartX = (app.screen.width - (numCols * (gridSize + gridPadding))) / 2;
const gridGapY = 120;
const gridStartY = gridGapY;

// Define an array to keep track of selected letters
let selectedLettersArray = [];

function handleLetterDragging(letter) {
    console.log('Dragging:', letter);
    // Check if the letter has not been selected already
    if (!selectedLettersArray.includes(letter)) {
        selectedLettersArray.push(letter);
        console.log('Selected letters array:', selectedLettersArray);
        checkForValidWord();
    }
}

function checkForValidWord() {
    const selectedLetters = selectedLettersArray.join('');
    console.log('Checking for valid word:', selectedLetters);
    const foundAnswer = correctAnswers.find(answer => selectedLetters.endsWith(answer));
    if (foundAnswer) {
        console.log('Found valid word:', foundAnswer);
        fillGrid(foundAnswer, selectedLetters.length - foundAnswer.length);
        // Reset selected letters array after finding a valid word
        selectedLettersArray = [];
    }
}

function drawLetterWheel() {
    const shuffleButtonUrl = 'images/shuffle.png';
    const shuffleButtonSize = 65;

    const circle = new PIXI.Graphics();
    circle.beginFill(0xfff7e6, 0.7);
    circle.drawCircle(circleCenterX, circleCenterY, circleRadius);
    circle.endFill();
    app.stage.addChild(circle);

    letters.forEach((letter, index) => {
        const angle = index * angleIncrement;
        const letterShiftFactor = 0.8;
        const x = circleCenterX + Math.cos(angle) * (circleRadius - letterRadius) * letterShiftFactor;
        const y = circleCenterY + Math.sin(angle) * (circleRadius - letterRadius) * letterShiftFactor;

        const letterText = new PIXI.Text(letter, {
            fontSize: letterRadius * 2,
            fill: letterColors[index],
            fontFamily: ['Poetsen One', 'Roboto', 'sans-serif']
        });
        letterText.anchor.set(0.5);
        letterText.position.set(x, y);
        app.stage.addChild(letterText);

        // Enable dragging for each letter
        letterText.interactive = true;
        letterText.buttonMode = true;

        letterText
            .on('pointerdown', onDragStart)
            .on('pointerup', onDragEnd)
            .on('pointerupoutside', onDragEnd);

        function onDragStart() {
            console.log('Drag start:', letter);
            handleLetterDragging(letter);
            letterText.interactive = false; // Disable interactivity after selection
        }

        function onDragEnd() {
            console.log('Drag end:', letter);
            letterText.interactive = true; // Re-enable interactivity after dragging
        }
    });

    const shuffleButton = PIXI.Sprite.from(shuffleButtonUrl);
    shuffleButton.anchor.set(0.5);
    shuffleButton.width = shuffleButton.height = shuffleButtonSize;
    shuffleButton.position.set(circleCenterX, circleCenterY);
    shuffleButton.interactive = true;
    shuffleButton.buttonMode = true;
    shuffleButton.on('pointerdown', () => {
        shuffleLetters();
    });
    app.stage.addChild(shuffleButton);
}

const correctAnswers = ['GOLD', 'DOG', 'GOD', 'LOG']; // Define correct answers here

function drawGrid() {


    for (let row = 0; row < numRows; row++) {
        for (let col = 0; col < numCols; col++) {
            if (gridContent[row][col] === null) {
                const cell = new PIXI.Graphics();
                cell.beginFill(0xfff7e6);
                cell.drawRoundedRect(0, 0, gridSize, gridSize, 20);
                cell.endFill();
                cell.position.set(gridStartX + col * (gridSize + gridPadding), gridStartY + row * (gridSize + gridPadding));
                app.stage.addChild(cell);
            }
        }
    }
}

function fillGrid(answer, startIndex) {
    for (let i = 0; i < answer.length; i++) {
        const row = Math.floor(startIndex / 4);
        const col = startIndex % 4;
        const cell = app.stage.children.find(child => child instanceof PIXI.Graphics &&
            child.position.x === col * (gridSize + gridPadding) + gridStartX &&
            child.position.y === row * (gridSize + gridPadding) + gridStartY);
        if (cell) {
            const text = new PIXI.Text(answer[i], { fill: 'black' });
            text.anchor.set(0.5);
            text.position.set(cell.x + gridSize / 2, cell.y + gridSize / 2);
            app.stage.addChild(text);
        }
        startIndex++;
    }
}

function shuffleLetters() {
    const letters = ['L', 'G', 'O', 'D'];
    for (let i = letters.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [letters[i], letters[j]] = [letters[j], letters[i]];
    }

    const letterTexts = app.stage.children.filter(child => child instanceof PIXI.Text);
    letters.forEach((letter, index) => {
        letterTexts[index].text = letter;
        letterTexts[index].interactive = true; // Re-enable interactivity after shuffling
    });
}

drawGrid();
drawLetterWheel();

};

Answer 1

我建议你检查一下鼠标事件。 pixi 对象具有内置事件，例如“pointerenter”。例如：

this.letterText.on('pointerenter', () => {//your code here})

您可以执行与第一次单击时相同的操作，但您可能希望将最近添加的和现有的字母保留在 currentLetter 和 letterContainers 等变量中，以供将来检查或操作。