在 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>