Js Phaser 3 game window not displaying - phaser-framework

Question

I'm fairly new to Phaser 3, and I just started dipping my feet in scenes. The problem here is that the game window won't display, and I can't figure out why.
Leaving my entire code here just in case there's a problem somewhere else. Sorry about the wall of text. Any help would be appreciated, even if it isn't a direct fix.
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

When configuring the game you're asking it to load inside of an element with an id of gameDiv, by using parent on the game configuration.
var config = {
type: Phaser.GAME,
width: 800,
height: 600,
parent: 'gameDiv',
// ...
};
If the game isn't displaying at all, that suggests that it may not be able to find an element with the id of gameDiv.
Can you verify that an element (typically a div, so <div id="gameDiv"></div>) exists in your HTML file?