Question

您可以在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>

上面的代码是我在网站上设置游戏页面的示例（http://www.graphics-geek.com）。

Answer 1

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

使用这样的东西，您应该能够实现不同状态的绘制，并在回调中声明更改。通过显示/隐藏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个状态;“welcome”，“level01”和“end”）：

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

补充意见：

包含代码的匿名函数的结构是来自http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html的javascript的模块模式。这类似于其他语言的命名空间。

为了获得更好的查找性能（在此实现为Array.indexOf（name）），您可能希望添加一个带有与索引值相关联的字符串键的对象，尤其是对于大量状态（即具有100+的游戏）级别，或更严格地切换状态的不同用例）。我没有对此进行基准测试，因此它具有高度的推测性。从理论上讲，数组搜索比哈希表查找慢了n - 1倍（这些对象可能实现为）。

编辑：

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

你如何在JavaScript中编写游戏状态？

1 个答案: