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

Question

我正在使用Canvas做一个JavaScript游戏。 从表面上看，它运行良好，但是“ Uncaught TypeError：game_state.Update不是函数”一直存在。 我一整天都不知道原因...如何解决这个问题？

错误image1 ， 错误image2

可疑文件如下。

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

正如其他人所提到的， onMouseDown方法，则需要分配after_loading_state和game_state到PlayGameState这是一个功能，而不是一个对象。 因此，稍后要访问Update方法时，它根本不存在，因为它是在对象原型而非函数上定义的。 您可能需要执行以下操作，以便避免多次实例化（调用） PlayGameState ：

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