Как добавить экран меню, который сначала загружается в мою игру Phaser.js? - PullRequest
Новая
       10

Как добавить экран меню, который сначала загружается в мою игру Phaser.js?

0 голосов
/ 17 мая 2018

Я пытаюсь добавить простое меню в мою игру 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>
...