在1小时内开发网络游戏.docVIP

在一小时内开发网络游戏 Michael Oneppo 下载代码示例 您无需使用全新的技能集来开发游戏。事实上，HTML、JavaScript 和 CSS 等中的当前 Web 开发技能广泛适用于各种游戏。在使用 Web 技术制作游戏时，它几乎可以在带有浏览器的所有设备上运行。 为了证明这一点，我将演示如何使用 Web 技术和两个外部库在不到一小时的时间内从零开始制作一个游戏。我将介绍各种游戏开发主题，从基本设计和布局、控件和子画面到简单对手的人工智能 (AI)。我甚至要开发可在 PC、平板电脑和智能手机上运行的游戏。如果您对作为 Web 开发人员编程或其他开发领域有一些体验，但没有编写游戏的经验，本文将帮助您入门。请给我一小时，我一定向您展示相关窍门。 启动并运行 我将在 Visual Studio 中进行所有的开发工作，这将会允许随着我所进行的修改而快速执行 Web 应用。确保您安装的是最新版本的 Visual Studio（下载地址 bit.ly/1xEjEnX），那么您可以继续。我使用的是 Visual Studio 2013 Pro，但是 Visual Studio 2013 Community 中更新了代码。 此应用无需任何服务器代码，因此我首先在 Visual Studio 中新建空的网页项目。选择“文件”|“新建”|“ASP.NET 空白网站”后，选择 Visual C# 选项即可为网站使用空白的 C# 模板。 索引 HTML 文件仅需要以下三种资源：jQuery、主样式表和主 JavaScript 文件。在加载网页时，我将一个空的 CSS 文件添加到名称为 style.css 的项目和一个名称为 ping.js 的空 JavaScript 文件以避免错误： XML 复制 基本设计 我制作的游戏是我称作 Ping 的 Pong 的变体。除了有一点不同之外（当球击向任一个玩家时，该玩家会抓住球，然后直接把球回击回去，或者按照一定的角度向上或向下击球），Ping 和 Pong 在本质上具有相同的规则。通常，在制作游戏之前，最好绘制一下您预期的游戏外观。对于此游戏，我想要看到的整体布局显示在图 1 中。 图 1 Ping 的整体设计 开发游戏设计布局后，剩下需要做的就是向 HTML 中添加每个元素以制作游戏。但需要注意的是，我将计分板和控件组合到一起，以确保它们并排出现。那么，如您所见，我已经逐个添加了相应元素（如图 2 中所示）。 图 2 初始 HTML 布局 XML 复制 设置样式 如果您要加载此页面，则看不到任何内容，因为没有应用任何样式。我已经创建一个指向我的 HTML 中的 main.css 文件的链接，因此我可以将所有 CSS 存放到含有该名称的新文件。我要做的第一件事情是定位屏幕上所有内容。页面的主体需要占据整个屏幕，因此我首先对其进行设置： XML 复制 其次，我需要让竞技场充满整个屏幕，将竞技场背景图像应用到整个屏幕（请参见图 3）： XML 复制 图 3 竞技场背景图像 接下来，我将设置计分板的位置。我希望计分板显示在顶部中心，位于其他元素之上。命令位置：绝对可以让我将其放到我想要的任何位置，左侧：50%，将其放到窗口顶部一半的位置，但是从计分板元素的最左侧开始放置。若要使其完全居中，我会使用转换属性和 Z-索引属性来确保其始终位于顶部： XML 复制 我还希望文本字体具有复古风。大部分新型浏览器可允许我添加我自己的字体。我从 codeman38 () 中发现适当的 Press Start 2P 字体。若要向计分板添加该字体，我必须创建新的字体： XML 复制 现在，分数位于 h1 标记中，因此我可以为所有 h1 标记设置字体。为了防止该字体缺失，我将提供几个备用选项： XML 复制 对于其他元素，我将使用图像的子画面表单。在一个文件中，子画面表单包含该游戏所需的所有图像（请参见图 4）。 图 4 Ping 的子画面表单 含有此表单上的图像的所有元素都含有指定的 sprite 类。然后，对于每个元素，我将使用背景定位来定义我要显示的子画面表单的部分： XML 复制 接下来，我将向使用该 sprite 类的所有元素添加该类。我需要暂时跳转回 HTML 以执行此操作： XML 复制 现在，我需要在每一个元素的表单上指出每个子画面的位置。同样，我可以使用背景定位来执行此操作，如图 5 中所示。 图 5 为子画面表单添加偏移值 XML 复制 位置：玩家、对手和球的绝对属性可以让我通过 JavaScript 来移动它们。如果您现在查看该页面，您将发现有一些不必要的东西附加在这些控件和球上。这是因为子画面尺寸小于默认的 128 像素，所以我将它们调整到适当的尺寸。由于只有一个球，因此我将直接设置其尺寸