未捕获的类型错误：不是函数

Question

I am making a javascript game, using Canvas. It works well superficially, but "Uncaught TypeError: game_state.Update is not a function" keeps going. I cannot know the reason for all day...How can I solve the problem?

error image1 , error image2

Suspected files are below.

gfw.js

function onGameInit()
{
    document.title = "Lion Travel";

    GAME_FPS = 30;
    debugSystem.debugMode = true;

    //resourcePreLoading
    resourcePreLoader.AddImage("/.c9/img/title_background.png");
    resourcePreLoader.AddImage("/.c9/img/title_start_off.png");
    resourcePreLoader.AddImage("/.c9/img/title_start_on.png");
    resourcePreLoader.AddImage("/.c9/img/title_ranking_off.png");
    resourcePreLoader.AddImage("/.c9/img/title_ranking_on.png");
    resourcePreLoader.AddImage("/.c9/img/game_background_sky.png");

    soundSystem.AddSound("/.c9/background.mp3", 1);

    after_loading_state = new TitleState();
    game_state = TitleState;

    setInterval(gameLoop, 1000 / GAME_FPS);
}

window.addEventListener("load", onGameInit, false);

GameFramework.js

window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

var GAME_FPS;
var game_state;

function onMouseDown(e) 
{
    if(game_state.onMouseDown != undefined)
        game_state.onMouseDown(e);

    // alert("x:" + inputSystem.mouseX + " y:" + inputSystem.mouseY);
}

function onMouseUp(e)
{
    if(game_state.onMouseUp != undefined)
        game_state.onMouseUp(e);
}

function ChangeGameState(nextGameState)
{
    if(nextGameState.Init == undefined)
        return;

    if(nextGameState.Update == undefined)
        return;

    if(nextGameState.Render == undefined)
        return;

    game_state = nextGameState;
    game_state.Init();
}

function GameUpdate() 
{
    timerSystem.Update();
    **game_state.Update();**
    debugSystem.UseDebugMode();
}

function GameRender()
{
    var theCanvas = document.getElementById("GameCanvas");
    var Context = theCanvas.getContext("2d");

    game_state.Render();

    if(debugSystem.debugMode)
    {
        Context.fillStyle = "#ffffff";
        Context.font = '15px Arial';
        Context.textBaseline = "top";
        Context.fillText("fps: "+ frameCounter.Lastfps, 10, 10);
    }
}

function gameLoop()
{
    game_state = after_loading_state;

    GameUpdate();
    GameRender();

    frameCounter.countFrame();
}

RS_Title.js

function TitleState() 
{
    this.imgBackground = resourcePreLoader.GetImage("/.c9/img/title_background.png");
    this.imgButtonStartOff = resourcePreLoader.GetImage("/.c9/img/title_start_off.png");
    this.imgButtonStartOn  = resourcePreLoader.GetImage("/.c9/img/title_start_on.png");
    this.imgButtonRankingOff = resourcePreLoader.GetImage("/.c9/img/title_ranking_off.png");
    this.imgButtonRankingOn  = resourcePreLoader.GetImage("/.c9/img/title_ranking_on.png");

    soundSystem.PlayBackgroundMusic("/.c9/background.mp3");

    return this; 
}

TitleState.prototype.Init = function()
{
    soundSystem.PlayBackgroundMusic("/.c9/background.mp3");
};

TitleState.prototype.Render = function()
{
    var theCanvas = document.getElementById("GameCanvas");
    var Context = theCanvas.getContext("2d");
    Context.drawImage(this.imgBackground, 0, 0);

    //drawing button
    if(inputSystem.mouseX > 170 && inputSystem.mouseX < 170+220 
    && inputSystem.mouseY > 480 && inputSystem.mouseY < 480+100)
    {
        Context.drawImage(this.imgButtonStartOn, 170, 480);
        this.flagButtonStart = true;
    }
    else
    {
        Context.drawImage(this.imgButtonStartOff, 170, 480);
        this.flagButtonStart = false;
    }

    if(inputSystem.mouseX > 420 && inputSystem.mouseX < 420+220 
    && inputSystem.mouseY > 480 && inputSystem.mouseY < 480+100)
    {
        Context.drawImage(this.imgButtonRankingOn, 420, 480);
        this.flagButtonRanking = true;
    }
    else
    {
        Context.drawImage(this.imgButtonRankingOff, 420, 480);
        this.flagButtonRanking = false;
    }
};

TitleState.prototype.Update = function()
{

};

TitleState.prototype.onMouseDown = function()
{
    if(this.flagButtonStart)
        ChangeGameState(new PlayGameState());
        after_loading_state = PlayGameState;
        game_state = PlayGameState;

    if(this.flagButtonRanking)
        ChangeGameState();
};

RS_PlayGame.js

function PlayGameState()
{
    this.imgBackgroundSky = resourcePreLoader.GetImage("/.c9/img/game_background_sky.png");
}

PlayGameState.prototype.Init = function()
{
    var theCanvas = document.getElementById("GameCanvas");
    var Context = theCanvas.getContext("2d");
    Context.drawImage(this.imgBackgroundSky, 0, 0);
};

PlayGameState.prototype.Render = function()
{
    var theCanvas = document.getElementById("GameCanvas");
    var Context = theCanvas.getContext("2d");
    Context.drawImage(this.imgBackgroundSky, 0, 0);
};

PlayGameState.prototype.Update = function()
{
    var theCanvas = document.getElementById("GameCanvas");
    var Context = theCanvas.getContext("2d");
    Context.drawImage(this.imgBackgroundSky, 0, 0);
};

Answer 1

As mentioned by the others, in the onMouseDown method you are assigning after_loading_state and game_state to PlayGameState which is a function and not an object. So later on when you want to access the Update method, it simply doesn't exist, because it is defined over the object prototype and not the function. You might want to do something like this so that you also avoid instantiating (calling) PlayGameState multiple times:

game_state = new PlayGameState();
ChangeGameState(game_state);
after_loading_state = game_state;