Jump to content

Scene not defined.


Recommended Posts

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">
<meta charset="UTF-8" />
<title>FCM Classes Test</title>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<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>


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);



let startButton, menubg;
class MainMenu extends Phaser.Scene{
constructor() {
super({key: "MainMenu"});
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);

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"});
bg = this.add.image(400,400,'background');
player = this.add.sprite(400,400,'dude');
this.player = new Player(this)

First time posting, so I'm sorry if I didn't follow correct etiquette. Thanks in advance for any ideas.

Link to comment
Share on other sites


I'm a Javascript beginner to (coming from cpp/python) so I'm not sure I understood it correctly, but as far as I know the order of the script mathers... When the browser reaches your testmain.js it trys to run it and therefor create your game. 

But at this time, your other scripts didn't run and therefor your scenes are not defined. 

So you could try moving your main script at the end or (probably even better) use 

window.onload = function () { var game = ... }

Not sure if this is the problem though.. 

Edit: As noted in the other post, it might be helpfull to set up some sort of development toolchain that handels all the importing stuff for you... It helped me to get something on the browser anyway.


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...