Js Phaser 3 游戏 window 不显示

Question

我对 Phaser 3 还很陌生，我刚刚开始涉足场景。 这里的问题是游戏 window 不会显示，我不知道为什么。

将我的整个代码留在这里，以防万一其他地方出现问题。 对不起，文字墙。 任何帮助将不胜感激，即使它不是直接修复。

class scene1 extends Phaser.Scene{
    constructor() {
        super({ key: 'scene1' });
this.pause = false;
this.q = null;
this.player = null;
this.roundTxt = null;
this.handUp = true;
this.round = 1;
this.flash = true;
this.platforms = null;
this.hudStar = null;
this.starCountTxt = null;
this.bombs = null;
this.left = false;
this.lives = 3;
this.hudLives = null;
this.starCount = 0;
this.gameOver = false;
this.bCol = null;
this.pCol = null;
this.invincible = false;
this.invFlash = null;
this.tw = null;
this.slam = false;
this.bullets = null;
this.keySpace = null;
this.shot = false;
this.game = new Phaser.Game(config);
this.direction = 1;
this.bombs = null;
this.bullets = new Bullets(this);
this.cursors = this.input.keyboard.createCursorKeys();
    //initialize stars
this.stars = this.physics.add.group({
        key: 'star',
        repeat: 9,
        setXY: { x: 12, y: 0, stepX: 80 },
});
    // Define spacebar
this.keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
this.window.bullets = this.bullets;
    }


addBomb() {
    var x = Phaser.Math.Between(0, 800);
    var y = Phaser.Math.Between(30, 450);
    this.bombs.children.iterate(function (child) {
        x = Phaser.Math.Between(0, 800);
        y = Phaser.Math.Between(30, 450);
        if (child.active) {
        child.enableBody(true, child.x, child.y, true, true);
        } else {
            child.enableBody(true, x, y, true, true);
        }
        child.setVelocityX(50 * Phaser.Math.Between(10, 2));
            child.setVelocityY(50 * Phaser.Math.Between(10, 2));
            });
            x = Phaser.Math.Between(0, 800);
            y = Phaser.Math.Between(30, 450);
            scene1.bomb = this.bombs.create(x, y, 'bomb').setBounce(1).setCollideWorldBounds(true).setVelocityX(50 * Phaser.Math.Between(10, 2)).setVelocityY(50 * Phaser.Math.Between(10, 2));
}

preload () {
    this.load.image('sky', 'assets/tut/sky.png');
    this.load.image('ground', 'assets/tut/platform.png');
    this.load.image('star', 'assets/tut/star.png');
    this.load.image('bomb', 'assets/tut/bomb.png');
    this.load.spritesheet('dude', 'assets/tut/dude.png', { frameWidth: 32, frameHeight: 48 });
    this.load.image('life', 'assets/tut/dudeLife.png');
    this.load.image('bullet', 'assets/bullet7.png');
}
//end preload
//create
create () {

    //add sky background
    this.add.image(400, 300, 'sky');

    //add player
    this.player = this.physics.add.sprite(100, 450, 'dude');

    //player bounces

    //set world bounds
    this.player.setCollideWorldBounds(true);

    //animations
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });

    //create group 'platforms'
    this.platforms = this.physics.add.staticGroup();

    //add ground platforms
    this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    //add sky platforms
    this.platforms.create(600, 400, 'ground');
    this.platforms.create(50, 250, 'ground');
    this.platforms.create(750, 220, 'ground');
    //cursors

    //add stars
    this.stars.children.iterate(function(child) {
        child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
        child.setCollideWorldBounds(true);
    });

    //set bombs
    this.bombs = this.physics.add.group();
    this.addBomb();
    
    //collision
    this.pCol = this.physics.add.collider(this.player, this.platforms);
    this.physics.add.collider(this.stars, this.platforms);
    this.physics.add.collider(this.stars, this.bombs);
    this.physics.add.collider(this.bombs, this.platforms);
    this.bCol = this.physics.add.collider(this.player, this.bombs, hitBomb, null, this);
    this.physics.add.overlap(this.player, this.stars, collectStar, null, this);
    function collectStar(player, star) {
       scene1.star.disableBody(true, true);
        scene1.starCount++;
        if (scene1.stars.countActive(true) === 0)  {
            scene1.flash = true;
            scene1.round++;
            scene1.bCol.active = false;
            scene1.stars.children.iterate(function (child) {
                child.enableBody(true, child.x, 0, true, true);
            });
            scene1.addBomb();
        }
    }
    //function for player/bomb col
    function hitBomb(player, bomb) {
        if (scene1.slam) {
            bomb.disableBody(true, true);
            player.setVelocityY(-300);
        } else {
            if (scene1.invincible == false) {
                scene1.bCol.active = false;
                bomb.disableBody(true, true);
                scene1.invincible = true;
                scene1.lives--;
                if (scene1.lives == 2) {
                    scene1.hudLives.three.destroy();
                } else if (scene1.lives == 1) {
                    scene1.hudLives.two.destroy();
                } else {
                    scene1.gameOver = true;
                    scene1.hudLives.one.destroy();
                }
                player.setAlpha(0);
                scene1.add.tween({
                    targets: player,
                    alpha: 1,
                    duration: 100,
                    ease: 'Linear',
                    repeat: 5,
                    onComplete: function() {
                        scene1.invincible = false;
                        scene1.bCol.active = true;
                    }
                });
            }
        }
    }
//    bullets = new Bullet(this);
    
    this.physics.add.overlap(scene1.bullets, scene1.bombs, scene1.shootBomb, null, this );
    //define pause button
    this.q = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
    /////////////////////////
    /////////////////////////
    /////////////////////////
    //////////HUD////////////
    /////////////////////////
    /////////////////////////
        scene1.starCountTxt = this.add.text(35, 10, scene1.starCount, { font: ' 20px sans-serif', fill: '#ffffff' });
    //star hud img
    scene1.hudStar = this.add.image(20, 20, 'star');
    //adds lives on hud
    scene1.hudLives = {
        one: this.add.image(20, 90, 'life'),
        two: this.add.image(30, 90, 'life'),
        three: this.add.image(40, 90, 'life')
    };
    scene1.roundTxt = { 
        label: this.add.image(20, 55, 'bomb'),
        num: this.add.text(35, 43, scene1.round, { font: '20px sans-serif', fill: '#ffffff'})
        
    };
//end of create
} //this curly bracket
//end of create

update () {
    scene1.roundTxt.num.setText(scene1.round);
    if (scene1.bombs.countActive(true) == 0) {
        scene1.addBomb();
        scene1.flash = true;
        scene1.round++;
    }
    if (scene1.flash) {
        scene1.flash = false;
        scene1.bCol.active = false;
        scene1.bombs.children.iterate(function(child) {
            child.setTint(0x00ff00);
            setTimeout(function(){
                child.setTint(0xffffff);
                scene1.bCol.active = true;
            }, 1000);
        });
    }
    if (scene1.cursors.left.isDown) {
        scene1.direction = -1;
    }
    else if (scene1.cursors.right.isDown) {
        scene1.direction = 1;
    } 
    scene1.starCountTxt.setText(scene1.starCount);
    if (scene1.gameOver) {
        this.physics.pause();

        scene1.player.setTint(0xff0000);

        scene1.player.anims.play('turn');

        var die = this.add.tween({
            targets: scene1.player,
            scaleX: '-=0.5',
            scaleY: '-=0.5',
            angle: '-=360',
            repeat: 1,
            duration: 500,
            onComplete: function() {
                die.delete();
            }
        });
    }
    if (scene1.cursors.left.isDown) {
        scene1.player.setVelocityX(-300);
        scene1.left = true;
        scene1.player.anims.play('left', true);
    }
    else if (scene1.cursors.right.isDown) {
        scene1.player.setVelocityX(300);
        scene1.left = false;
        scene1.player.anims.play('right', true);
    }
    else {
        scene1.player.setVelocityX(0);

        scene1.player.anims.play('turn');
    }
    if (scene1.cursors.up.isDown && scene1.player.body.touching.down) {
        scene1.player.setVelocityY(-400);
    }
    if (scene1.cursors.down.isDown && scene1.player.body.touching.down && scene1.player.y < 500) {
        if (!scene1.slam) {
            scene1.player.y += 5;
            scene1.slam = true;
        }
    } else if (scene1.player.body.touching.down == false && scene1.cursors.down.isDown) {
        if (!scene1.slam) {
            scene1.player.setVelocityY(1000);
            scene1.slam = true;
        }
    } else if (scene1.cursors.down.isDown == false) {
        scene1.slam = false;
    }
    if (scene1.player.body.velocity.y < 0) {
        scene1.pCol.active = false;
    } else {
        scene1.pCol.active = true;
    }
    if (scene1.keySpace.isDown) {
        if (!scene1.shot && scene1.handUp) {
            this.bullets.fireBullet(scene1.player.x, scene1.player.y+5);
            console.log(this.bullets);
            scene1.shot = true;
                this.tweens.addCounter({
                    from: 50,
                    to: 200,
                    duration: 200,
                    onUpdate: function (tween)
                    {
                        var value = Math.floor(tween.getValue());

                        scene1.player.setTint(Phaser.Display.Color.GetColor(value, value, value));
                    }
                }); 
                this.time.delayedCall(300, function(){
                    scene1.shot = false;
                    scene1.player.setTint(0xffffff);
                }, [], this);
        }
        scene1.handUp = false;
    }
    if (scene1.keySpace.isUp) {
        scene1.handUp = true;
    }
    if (Phaser.Input.Keyboard.JustDown(scene1.q)) {
        if (scene1.pause) {
            this.physics.resume();
            scene1.pause = false;
        } else {
            this.physics.pause();
            scene1.pause = true;
        }
    }
//end of update
}   //this curly bracket
//end of update

shootBomb(bullets, bombs) {
    bombs.disableBody(true, true);
    bullets.disableBody(true, true);
}
}
class Bullet extends Phaser.Physics.Arcade.Sprite {
    constructor(scene1, x, y) {
        super(scene1, x, y, 'bullet');
    }
 
    fire(x, y) {
        this.body.reset(x, y);
        this.setVelocityX(1000 * scene1.direction);
        this.enableBody();
        this.body.setAllowGravity(false);
        this.setActive(true);
        this.setVisible(true);
        
    }
 
    preUpdate(time, delta) {
        super.preUpdate(time, delta);
 
        // Reset the bullets when it reaches end of screen
        if (this.x > 2600) {
            this.setActive(false);
            this.setVisible(false);
        }
    }
}

class Bullets extends Phaser.Physics.Arcade.Group {
    constructor(scene) {
        super(scene.physics.world, scene);
 
        this.createMultiple({
            frameQuantity: 20,
            key: 'bullet',
            active: false,
            visible: false,
            classType: Bullet
        });
    }
 
 
    fireBullet(x, y) {
        let bullet = this.getFirstDead(false);
    
        if (bullet) {
            bullet.fire(x, y);
        }
    }
}

var config = {
    type: Phaser.GAME,
    width: 800,
    height: 600,
    parent: 'gameDiv',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: [scene1],
    debug: true
};

Answer 1

配置游戏时，您要求它通过在游戏配置上使用parent加载到 id 为gameDiv的元素内。

var config = {
    type: Phaser.GAME,
    width: 800,
    height: 600,
    parent: 'gameDiv',
    // ...
};

如果游戏根本没有显示，这表明它可能无法找到 id 为gameDiv的元素。

您能否验证 HTML 文件中是否存在一个元素（通常是div ，因此<div id="gameDiv"></div> ）？