在 Phaser 3 中如何启用单击数组中的单个项目并在屏幕的不同部分显示每个项目？

Question

我正在使用 Phaser 3 和 javascript 开发一个拼字游戏。到目前为止，我已经能够通过点击一个按钮在屏幕上显示一个乱序的单词。现在我需要用户能够点击他们认为是被打乱的单词的第一个字母。如果他们是对的，这个字母就会被放在乱序单词上方的某个地方，然后他们继续这样做，直到这个单词被正确拼写出来。如果他们点击了错误的字母，它不会被放在上面，所以他们会再试一次。我不知道下一步该怎么做。这是我目前拥有的：

public onSceneCreated() {
     // Fit world to screen
        this.scene.game.scale.scaleMode = Phaser.Scale.FIT;
        this.scene.game.scale.refresh(PhaserHelper.worldSize.width, PhaserHelper.worldSize.height);

    // See the world size, eventually remove
       this.scene.cameras.main.setBackgroundColor("rgba(255, 255, 255, 0.2)");

    let centerX = PhaserHelper.worldSize.width / 2;
    let centerY = PhaserHelper.worldSize.height / 2;   
    
    // Random word picked from array
    let word = this.activityItems[Math.floor(Math.random() * this.activityItems.length)];
    
    // Function that scrambles a word
    let scramble = (a) => {
        a = a.split("");
        for(let b = a.length - 1; 0 < b; b--) {
            let c = Math.floor(Math.random()*(b + 1));
            let d = a[b];
                a[b] = a[c];
                a[c] = d;
        }
         return a.join("");
    }        

    // Adds button (clickable text)
    let clickButton = this.scene.add.text(1000, 800, 'Button', { 
        fontFamily: Fonts.BalsamiqSans,
        fontSize: 50,
        color: Colors.black,
         });    
        clickButton.setInteractive();
    // Display scrambled word by clicking button
        clickButton.on('pointerdown', () => {
    this.scene.add.text(centerX, centerY, scramble(`${word.answer.text}`), {
        fontFamily: Fonts.BalsamiqSans,
        fontSize: 100,
        color: Colors.black,
        });
     });
    console.log(`${word.answer.text}`);
}

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我不知道移相器，但这可能会帮助你理解 javascript

中的想法

var cnt =  0 

var spans = document.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
    spans[i].onclick=getLetter;

function getLetter(){

var correct = document.getElementById('correct')

    var letter =this.innerHTML
    
    
    if (cnt == 0 && letter == 'v'){
       correct.innerHTML = 'v'
       cnt++
    }
    else if( cnt == 1 && letter == 'o')
    {
       correct.innerHTML = 'vo'
       cnt++
    }
    else if( cnt == 2 && letter == 't')
    {
       correct.innerHTML = 'vot'
       cnt++  
    }
    else if( cnt == 3 && letter == 'e')
    {
       correct.innerHTML = 'vote'
       cnt++
    }
    else if( cnt == 4 && letter == 's')
    {
       correct.innerHTML = 'votes'
       cnt++      
    }
}

span{
display:inline-block;
border:solid 1px black;
width:20px;

margin:5px;
padding:5px;
text-align:center;
}

#correct{
margin:50px;
}

#scrambled{
border:solid black 1px;
width:210px;}

<div id="correct"></div>
<div id='scrambled'><span>e</span><span>o</span><span>v</span><span>s</span><span>t</span></div>

在 Phaser 3 中如何启用单击数组中的单个项目并在屏幕的不同部分显示每个项目？

How do you enable clicking on individual items in an array and display each item in a different part of the screen in Phaser 3?

javascript

phaser-framework