Question

我试图在我首先加载的Phaser游戏中添加一个简单的菜单，然后一旦有人点击按钮，游戏就会真正启动。我可以弄清楚以后如何添加按钮，我只是想不通如何添加菜单屏幕。我已经在网上研究了很多关于如何完成这项工作的方法，但没有一个方法适合我。我也尝试将代码分解成不同的状态，但这对我也没有用。也许我做错了。有人能告诉我正确的方法是在实际游戏之前加载一个菜单加载到游戏中吗？

<!doctype html> 
    <html lang="en"> 
    <head> 
        <meta charset="UTF-8" />
        <title>test</title>
        <script src="//cdn.jsdelivr.net/npm/phaser@3.1.1/dist/phaser.js"></script>
         <script type="text/javascript" src="menu.js"></script>
        <style type="text/css">
           body {
                margin-top: 45px;
                margin-left: 250px;
                background-color: black;
            }

            .page-title {
                color: white;
            }
        </style>
    </head>
    <body>

<script type="text/javascript">

//CONFIGURE GAME
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update,

}
};

var player;
var stars;
var bombs;
var platforms;
var cursors;
var score = 0;
var gameOver = false;
var scoreText;

var game = new Phaser.Game(config);
game.state.add('title', title);
game.state.start('title');


//PRELOAD FUNCTION
function preload ()
{
    this.load.image('sky', 'phaser_assets/sky.png');
    this.load.image('background', 'phaser_assets/background.png');
    this.load.image('ground', 'phaser_assets/platform.png');
    this.load.image('star', 'phaser_assets/star.png');
    this.load.image('bomb', 'phaser_assets/head1.png', { frameWidth: 48, frameHeight: 100 });
    this.load.spritesheet('trump', 'phaser_assets/trump.png', { frameWidth: 48, frameHeight: 100 });
}



//CREATE FUNCTION
function create ()
{
    //  A simple background for our game
    this.add.image(400, 300, 'sky');
    //  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = this.physics.add.staticGroup();
    //  Here we create the ground.
    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    //  Now let's create some ledges
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
    // The player and its settings
    player = this.physics.add.sprite(100, 450, 'trump');
    //  Player physics properties. Give the little guy a slight bounce.
    player.setBounce(0.2);
    player.setCollideWorldBounds(true);
}



//UPDATE FUNCTION
function update ()
{
    if (gameOver)
    {
        return;
    }

    if (cursors.left.isDown)
    {
        player.setVelocityX(-200);
        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(200);
        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);
        player.anims.play('turn');
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.setVelocityY(-330);
    }
}
</script>
</body>
</html>

如何添加首先加载到Phaser.js游戏的菜单屏幕？

0 个答案: