Uncaught TypeError: Cannot read property 'toLowerCase' of undefined in phaser while using game.add.text()

Question

这是我试过的代码。

  <html>
    <head>
        <title>Cat Catcher 2000</title>
        <script type="text/javascript" src="js/phaser.min.js"></script>
        <script type="text/javascript">
            var game = new Phaser.Game(800,600, Phaser.CANVAS,'cat-catcher', {preload: preload, create: create, update: update });
            var cat,catcher,cursors,txtScore,score;
            function preload(){
                game.load.image('cat','img/cat.png');
                game.load.image('catcher','img/catcher.png');
                game.load.image('bg','img/bg.png');
            }
            function create(){
                // background setup
                game.add.sprite(0,0,"bg");
                // catcher setup
                catcher = game.add.sprite(400,300,'catcher');
                catcher.anchor.setTo(0.5,0);
                game.physics.enable(catcher,Phaser.Physics.ARCADE);
                // cat setup
                cat = game.add.sprite(Math.random() * game.width , Math.random() * game.height, 'cat');
                game.physics.enable(cat,Phaser.Physics.ARCADE);
                // Score setup
                score = 0;
                var style = {font: "Arial", fill: "#fff"};
                txtScore = game.add.text(10,10,score.toString(),style);

            }
            function update(){

            }
        </script>
    </head>
    <body>

    </body>
</html>

虽然运行上面的代码我得到了错误 Uncaught TypeError: Cannot read 属性 'toLowerCase' of undefined inside the create function and特别是在行

txtScore = game.add.text(10,10,score.toString(),style);

控制台输出

http://phaser.io â™¥â™¥â™¥
phaser.min.js:3 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at c.Text.setStyle (phaser.min.js:3)
    at new c.Text (phaser.min.js:3)
    at c.GameObjectFactory.text (phaser.min.js:3)
    at Object.create (index.html:26)
    at c.StateManager.loadComplete (phaser.min.js:3)
    at c.Loader.finishedLoading (phaser.min.js:3)
    at c.Loader.processLoadQueue (phaser.min.js:3)
    at c.Loader.asyncComplete (phaser.min.js:3)
    at c.Loader.fileComplete (phaser.min.js:3)
    at HTMLImageElement.a.data.onload (phaser.min.js:3)
c.Text.setStyle @ phaser.min.js:3
c.Text @ phaser.min.js:3
text @ phaser.min.js:3
create @ index.html:26
loadComplete @ phaser.min.js:3
finishedLoading @ phaser.min.js:3
processLoadQueue @ phaser.min.js:3
asyncComplete @ phaser.min.js:3
fileComplete @ phaser.min.js:3
a.data.onload @ phaser.min.js:3

提前致谢

Answer 1

我正在使用 "phaser CE 2.7.8"，我找到了该错误的解决方案。实际上，phaser 需要对齐、boundsAlignV 和 boundsAlignH 样式属性来对齐文本。在代码中 var style = {} 添加必要的样式属性后错误消失了。

正确的代码

`function create(){
                // background setup
                game.add.sprite(0,0,"bg");
                // catcher setup
                catcher = game.add.sprite(400,300,'catcher');
                catcher.anchor.setTo(0.5,0);
                game.physics.enable(catcher,Phaser.Physics.ARCADE);
                // cat setup
                cat = game.add.sprite(Math.random() * game.width , Math.random() * game.height, 'cat');
                game.physics.enable(cat,Phaser.Physics.ARCADE);
                // Score setup
                score = 0;
                var style = {font: "20px Arial", fill: "#fff",align:"left",boundsAlignH: "top",boundsAlignV:"top"};**// NOTE THIS LINE**
                txtScore = game.add.text(10,10,score.toString(),style);

            }`

注意上面代码中的 var style={} 行我添加了必要的属性。 谢谢大家！

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined in phaser while using game.add.text()

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined in phaser while using game.add.text()

javascript

phaser-framework