使用 JavaScript 创建简单的 Windows 8 游戏：第 1 部分 – Windows 8 应用基础

Chris_Bowen

5.00/5 (13投票s)

2012 年 8 月 30 日

CPOL

7分钟阅读

43352

我们将一路使用 HTML5、JavaScript、WinJS 和 CreateJS 的一些有用库。

30 天开发一个 Windows 8 应用

欢迎访问 Chris Bowen 的博客：http://blogs.msdn.com/cbowen?

创建简单的 Windows 8 游戏系列

使用 JavaScript 创建简单的 Windows 8 游戏：第 1 部分 – Windows 8 应用基础
使用 JavaScript 创建简单的 Windows 8 游戏：第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
使用 JavaScript 创建简单的 Windows 8 游戏：第 3 部分 – 游戏逻辑
使用 JavaScript 创建简单的 Windows 8 游戏：第 4 部分 – 输入与声音

这是系列文章中的第一篇，将向您展示如何创建一个（非常）简单的 Windows 8 游戏。我们将一路使用 HTML5、JavaScript、WinJS 和 CreateJS 的一些有用库。

第 1 部分 – Windows 8 应用基础知识
第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
第 3 部分 – 游戏逻辑
第 4 部分 – 输入与声音

该游戏基于 XNA 示例游戏 “投石机大战实验室”。我们将在开发基于 Web 技术的 Windows 8 新版本时重复使用该游戏中的资源。

此游戏侧重于简单性，因此此示例中未使用许多中级技术。有关更全面的示例，请参阅本文末尾的“延伸阅读”。

我们开始吧。在本文中，我们将重点介绍 Windows 8 项目的基础知识。

设置

要开发此游戏（或任何 Windows 8 Metro 风格应用程序），您需要同时拥有 Windows 8 和 Visual Studio 2012。请在继续之前下载并安装它们。我们不会在这里介绍，因为它在网上有很好的解释。

创建项目

启动 Visual Studio 2012 并选择 FILE -> New Project（或 CTRL + SHIFT + N）。我们将使用 JavaScript，因此请在 Templates 下选择该节点。我们将依赖 HTML5 canvas 作为 UI，因此我们只需要“空白应用程序”模板（其他模板内置了常见的 Metro 风格布局和控件）：

将项目命名为“CatapultGame”，然后单击“OK”创建项目。有关空白应用程序模板的指南，但我现在将快速向您介绍一下。

理解项目

那么，我们得到了什么？在 Solution Explorer 中打开一些文件并四处看看。如果您展开所有文件夹，您会看到类似这样的内容：

以下是需要关注的主要部分

/References/Windows Library for JavaScript – 这是“WinJS”，它是一个 JavaScript 和 CSS 层，可帮助我们为 Windows 8 开发 JavaScript Metro 风格应用程序。您无法修改这些文件，但我建议您（稍后）查看它们。
/css/default.css – 启动 CSS，包括通过媒体查询处理屏幕变化的基础知识。我们稍后也会在此基础上构建。
/js/default.js – 包含一些启动 JavaScript 逻辑。我们很快就会在这里添加我们自己的。
default.html – 我们游戏的根 HTML 页面
package.appxmanifest – 包含许多可帮助您个性化应用程序的设置。它是 XML，但如果双击打开，您将获得一个友好的界面来更改设置。

此外，“images”文件夹包含应用程序用于徽标和启动屏幕的一些默认内容。您将需要添加自己的内容。

运行游戏……好吧，是空项目

那么，让我们运行项目看看我们得到了什么。首先，有一些运行项目的选项

使用本地计算机是默认选项，但连接到另一台远程计算机也很容易，这样您就可以在目标计算机上运行和使用项目，同时在本地计算机上进行调试。模拟器允许您测试各种屏幕尺寸/分辨率、模拟触摸输入、调整位置等。

现在，让我们使用本地计算机运行（单击按钮、按 F5 或选择 DEBUG -> Start Debugging）。

确实是一款有趣的游戏！

入门

那么，“内容在此处”文本是从哪里来的呢？打开 default.html，您应该会看到以下内容：

这里发生了什么？

第 1 行 – 表示我们正在针对 HTML5
第 7-10 行 – 引用 WinJS 的 CSS 和 JavaScript
第 12-14 行 – 其他引用，包括默认的 JS 和 CSS 文件。我们稍后会在这里添加其他文件。
第 16-18 行 – 我们 HTML 页面的主体

如您所见，这只是基本的 HTML。继续在中更改 HTML 并再次运行，找点乐子。

CSS 的作用

我们已经看到了 default.html 文件，它提供了项目的引用和基本内容，但 HTML 只是故事的一部分。Web 应用程序使用 HTML 来显示内容，使用 JavaScript 来实现功能，并使用 CSS（层叠样式表）以可维护的方式影响设计和外观。

CSS 样式通过识别（选择）目标元素并应用效果——颜色、阴影、文本、过渡、变换、布局……列表还在继续。CSS 有如此多的功能可以帮助我们创建惊人的效果，在这里尝试概述将是荒谬的。只需知道 Visual Studio 2012 具有许多功能可以帮助您创建和修改样式，您了解的 CSS 越多，您的效率就越高。

查看 /css/default.css

默认情况下，没有应用任何样式，但这有什么用呢？

第 1 和 2 行 – 这会选择引用此文件的任何页面的标签，并将我们添加的任何样式规则应用于该内容。
第 4-14 行 – 这些是 CSS 媒体查询，对于根据内容显示方式调整布局非常有用。在这种情况下，Metro 风格应用程序可以运行的四种状态——全屏横向、填充、贴靠和全屏纵向——这些状态映射到这四个区域。您可以使用此方法自定义您的游戏，以充分利用可用的屏幕空间。

我们稍后会添加更多内容。敬请期待。

JavaScript，行动英雄

我们已经看到了 HTML 内容和 CSS 样式，但是事物是如何变得生动的呢？游戏如何“知道”正在发生什么？

让我们切换到 js/default.js 文件并查看一下

它看起来可能很多，但它非常简单，只是帮助我们入门

第 3-33 行 – 以前没见过这样的 JavaScript 函数吗？它是一个“立即调用函数表达式”（Immediately-Invoked Function Expression，简称 IIFE，读作“iffy”）。简单来说，它可以在不影响全局命名空间的情况下使变量和函数保持整洁。中等解释，请阅读 Addy Osmani 的“基本 JavaScript 命名空间模式”第 4 节。更长的解释，我是 Ben Allman 的 IIFE 文章的粉丝。
第 6-7 行 – 常用 Application 和 Activation 类的变量。
第 8 行 – 调用 WinJS.strictProcessing 启用严格声明式处理（有助于更容易地检测错误）
第 10-21 行 – 激活代码。第一个 TODO 是应用程序首次启动时，第二个 TODO 是当应用程序从 Windows 暂停状态返回时，我们可以加载保存状态的地方。
第 23-30 行 – 在应用程序暂停之前保存状态的机会。这尤为重要，因为暂停之后可能会终止，如果游戏状态没有在此处保存，那么玩家在返回游戏时必须重新开始。

我们很快就会在这里添加游戏的逻辑。从加载图像的代码、管理游戏世界和各种辅助函数，到控制更新状态和显示内容的游戏循环。

顺便说一下，在这个示例中，我们将通过仅将代码添加到 default.js 来做简单的事情，但是良好构建的应用程序通常会有多个 JavaScript 文件，例如为游戏元素（玩家、星球、物品、世界等）创建类。有关一些优秀的建议和实践，请参阅 Greg Smith 的“JavaScript 游戏代码组织”。

下一步是什么？

以上是对 Metro 风格应用程序背后基本机制的简要概述。在第二部分中，我们将通过引入“弹射器大战”启动项目中的内容并设置游戏的基本结构来开始创建游戏。

延伸阅读

再次强调，本系列文章侧重于易学性和简洁性，因此，对于更全面的游戏示例，请参阅 MSDN 上的“JavaScript 和 HTML5 触摸游戏示例”以及相关教程。