如何用javascript编程游戏状态？

您可以使用Flash ActionScript中的框架来保存欢迎屏幕、游戏内容和屏幕上的游戏；您可以在Microsoft XNA中创建游戏状态的枚举，并在draw方法中调用该状态时绘制所有图形和文本。您将如何在HTML5和JavaScript中实现这一点？我有一种感觉，这可以通过显示和隐藏div来实现，但我不完全确定如何做到这一点

<asp:DropDownList ID="DDL_SelectGame" runat="server" CssClass="BigText">
    <asp:ListItem>MatchMe (Memory)</asp:ListItem>
    <asp:ListItem>Royal Jewels (Bejeweled)</asp:ListItem>
    <asp:ListItem>Tetris</asp:ListItem>
</asp:DropDownList>
<div id="Welcome" class="Welcome">
    <asp:Button ID="BTN_StartGame" runat="server" CssClass="Button" />
</div>
<div id="Game" class="Game">
</div>
<div id="GameOver" class="GameOver">
    <asp:Button ID="BTN-Replay" CssClass="Button" runat="server" />
</div>

---

）。
这是我计划用于未来游戏开发的状态机

通过这样的方式，您应该能够实现不同状态的绘制，以及回调中的状态更改。通过显示/隐藏div，或在画布上绘制不同的缓冲区/图形

要创建国家：

// initially hide the divs using css or js

state.add("welcome",
    function () {
        document.getElementById("Welcome").style.display = "block";
    },
    function () {
        document.getElementById("Welcome").style.display = "none";
    }
);

state.add("level01",
    function () {
        document.getElementById("Game").style.display = "block";
    },
    function () {
        document.getElementById("Game").style.display = "none";
    }
);

state.add("end",
    function () {
        document.getElementById("GameOver").style.display = "block";
    }
);

第二个函数是可选的（实际上这两个函数都是可选的，但这样的状态不会起任何作用）

切换状态（假设我们添加了3个状态：“欢迎”、“01级”和“结束”）：

代码：

补充意见：

带有包装代码的匿名函数的结构是javascript的模块模式。这类似于其他语言中的名称空间

为了获得更好的查找性能（此处实现为Array.indexOf（name）），您可能需要添加一个对象，该对象具有与索引值关联的字符串键，特别是对于大量状态（例如，具有100+级别的游戏，或者状态切换更频繁的不同用例）。不过，我还没有对此进行基准测试，因此这是高度推测性的。理论上，数组搜索比哈希表查找慢n-1倍（对象可能实现为）

编辑：

修复了代码中的错误。state.add现在检查现有名称
增加了免责声明
添加了如何从回调显示/隐藏div的示例
删除免责声明，用改进版本替换代码
state.enter("welcome");

//... at some point welcome changes state using following:
state.enter("level01");

//... at the end of level1:
state.enter("end");

var state = (function () {
    "use strict";
    var currentState = -1,
        stateNames = [],
        stateCallbacks = [];

    return {
        current: function () {
            if (currentState >= 0) {
                return stateNames[currentState];
            }
        },
        add: function (name, onEnter, onExit) {
            var index = stateNames.indexOf(name);
            if (index !== -1) {
                throw "State " + name + " already exist!";
            }
            stateCallbacks.push({
                enterState: onEnter || false,
                exitState: onExit || false
            });
            stateNames.push(name);
        },
        remove: function (name) {
            var index = stateNames.indexOf(name);
            if (index === -1) {
                throw "State " + name + " not found!";
            }
            stateNames.splice(index, 1);
            stateCallbacks.splice(index, 1);
        },
        enter: function (name) {
            var index = stateNames.indexOf(name);
            if (index === -1) {
                throw "State " + name + " not found!";
            }
            if (stateCallbacks[currentState].exitState) {
                stateCallbacks[currentState].exitState();
            }
            currentState = index;
            if (stateCallbacks[index].enterState) {
                stateCallbacks[index].enterState();
            }
        },
        exit: function () {
            if (currentState === -1) {
                throw "Not currently in any state";
            }
            if (stateCallbacks[currentState].exitState) {
                stateCallbacks[currentState].exitState();
            }
            currentState = -1;
        }
    };
}());