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

Posted 2023-03-15

【中文标题】如何在 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?

【发布时间】：2020-10-18 23:51:04

【问题描述】：

我正在使用 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`);

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

【参考方案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>