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

问题描述

我正在使用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,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,});
     });
    console.log(`${word.answer.text}`);
}

任何帮助将不胜感激。谢谢。

解决方法

我不知道相位器，但这可能会帮助您实现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>

javascript phaser