I'm trying to code a simple game using scenes. I am new to Phaser 3 and relatively new to coding in general so I may be making a dumb mistake. I've just hit a wall.
I'm trying to get my main menu "start" button to start the game state. Simple enough right? But when I run the files on http-server, i get:
``ncaught ReferenceError: Game is not defined
at testmain.js:6``
my html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>FCM Classes Test</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.9.0/dist/phaser.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module" src="js/testmain.js"></script>
<script type="module" src="js/scenes/game.js"></script>
<script src="js/scenes/mainMenu.js"></script>
<script src="js/scenes/preload.js"></script>
</body>
</html>
main.js
var config = {
type: Phaser.AUTO,
width: 800,
height: 800,
parent: "#canvas",
scene: [Preload, MainMenu, Game ],
title: 'Fantasy Cage Match'
}
let game = new Phaser.Game(config);
mainMenu.js
let startButton, menubg;
class MainMenu extends Phaser.Scene{
constructor() {
super({key: "MainMenu"});
}
create()
{
this.menubg = this.add.image(400,400,'menubg');
this.startButton = this.add.sprite(400, 400, 'startbutton').setInteractive();
this.startButton.on('pointerdown', function startGame(pointer){
this.scene.start('gamescene');
}, this);
}
}
and my game.js I haven't added any other code because I just want to see my sprite move around on screen.. (I know i haven't done anything with cursors yet..)
import Player from '../characters/Player.js'
let bg, cursors, player;
class Game extends Phaser.Scene{
constructor() {
super({key: "gamescene"});
}
create(){
bg = this.add.image(400,400,'background');
player = this.add.sprite(400,400,'dude');
this.player = new Player(this)
setupCollision(this)
}
}
First time posting, so I'm sorry if I didn't follow correct etiquette. Thanks in advance for any ideas.