使用JavaScript创建简单的Windows 8游戏：游戏基础和CreateJS / EaselJS
这是在四周内的一系列四个职位的第二会告诉你如何创建一个简单的Windows 8游戏，使用HTML5，JavaScript的，WinJS和CreateJS 。
在第一篇文章是一个快速地介绍了基本的Windows 8应用的移动部件。 在这篇文章中，我们将开始创建认真比赛。
什么是我们建设呢？
下面是游戏看起来像在原来版本的XNA：
我们不会通过将所有这些功能，但我们会亲近！
添加资产
除非你创造下一个伟大的基于文本的冒险，你可能需要一些图像和声音。 在我们的例子中，我们使用的已经创建者“星球大战弹弓实验室”的2D游戏示例。 本教程是为XNA开发的，但我们希望的JavaScript，所以让我们抓住图形和声音，并得到编码！
- 启动的Visual Studio 2012，并创建一个名为“CatapultWars”项目，使用从JavaScript的“空白应用程序”模板 - >“的Windows Metro风格”模板。
- 下载并解压“弹弓战争实验室”样品 （CatapultWars_4_0.zip）
- 从该文件夹的Windows资源管理器视图中，选择从将所有四个文件夹
/Assets/Media/Textures的文件夹，并在Visual Studio中，代替它们下的图像文件夹中。 （这将拷贝，并将其添加到项目中。） - 创建一个名为新文件夹
sounds在项目的根。 - 从文件复制
/Assets/Media/Sounds新sounds文件夹。
您的项目应该是这样的：
现在，我们有一些资产，让我们把他们使用。
闪屏与商标
注意，当你运行游戏，你第一次看到一个“X”在一个正方形？ 这就是闪屏，默认显示/images/splashscreen.png图像，但我们可以做的更好。 要调整闪屏，双击package.appxmanifest ：
该文件/images/Backgrounds/gameplay_screen.png就是我们想用，但图像必须是620×300像素。 所以，在你喜欢的编辑器，调整大小打开图像并保存为title_screen_620x300.png 。 添加新的文件到项目中。
现在，我们可以设定Splash screen领域imagesBackgroundstitle_screen_620x300.png 。 虽然我们在这里，选择您想要的任何背景颜色，以配合图像（如darkGray ）。 现在运行的时候，游戏招呼我们提供了一个新的启动画面：
我们还可以调整应用程序的瓷砖，在默认情况下看起来像这样：
此外，在应用程序清单中，我们看到了标志许多地方。 我们可以添加150×150，310×150，并在不同的地方使用30×30的标志。
现在我们有方形和宽幅定制瓷砖：
看起来不错！ 现在，只要我们有一个游戏玩...
添加HTML5的Canvas
首先，我们将需要一些东西来显示游戏。 HTML5的canvas元素本质上是可以绘制动态像素的沙箱。 我们将使用画布来渲染游戏，所以我们需要将它添加到我们的HTML页面。 打开default.html并更换线17（ Content goes here用帆布标记线），所以它看起来是这样的：
通常情况下，你会指定宽度和高度，并添加画布的情况下，不支持回退的内容，但我们会在以后设置宽度/高度，我们知道帆布将得到支持。 然而，这仅仅是你应该考虑的编码要重用你的一些应用程序代码作为一个传统的Web应用程序的情况下，实践的多次之一 - 但那是另一个系列文章的故事...
与CreateJS使事情变得更简单
那么，我们如何添加的东西像我们的背景和投石车？ 与HTML内容，帆布内容完全是通过JavaScript指令创建。 对于基础知识，阅读“如何画上的HTML5画布”上MSDN。
当然，我们可以用帆布方法直接绘制我们的游戏，但也有JavaScript代码库都来帮助，包括那些非常适合于游戏的开发。 CreateJS是一组JavaScript库和工具，包括EaselJS ， PreloadJS ，等等。 我们将在我们的游戏中使用这些，所以下载 EaselJS和PreloadJS，为他们创造一个新的文件夹/js/CreateJS ，并复制脚本（从lib文件夹）如下：
JavaScript文件添加到项目是不够使用它们，所以从引用它们default.html ：
提示：您可以通过拖动从Solution Explorer中的脚本到页面中添加脚本引用。 （额外提示：在HTML5中，你不需要type="text/javascript"脚本属性了。）
我们将使用PreloadJS来帮助负载资产之前，在游戏和EaselJS使用，使其更易于管理的游戏循环和图片资源的图。
开始游戏
开始游戏，我们需要知道什么时候该页面已准备好运行。 为此，我们使用DOMContentLoaded事件告诉我们，当页面结构已经被加载和脚本已经准备好运行。 这是从onload事件，这要下载的所有引用的内容等待不同。
在default.js ，添加一个initialize()函数，并把它称为由DOMContentLoaded 。 虽然我们在这，让我们添加游戏循环的基础，也是：
注： app.oncheckpoint功能处于折叠状态，使事情更容易阅读。
变量
为了与帆布，存储图像，并创建位图，我们会需要一组变量工作。 同时，由于原来的游戏假定一个800×480的屏幕，我们需要扩展我们绘制到实际屏幕尺寸的图像。
添加以下变量default.js ：
初始化画布和使用PreloadJS
此前，我已经提到的帆布仅通过JavaScript更新。 要连接到画布上，你需要先找到该元素，然后检索它的2D背景。 这方面暴露了绘图功能。 我们还将扩展画布，以配合我们的全屏大小。
更新initialize()如下：
现在，我们需要载入我们的图像，所以我们可以吸引他们到画布上。 有很多方法可以做到这一点，但PreloadJS是有帮助的，因为我们可以列出我们会使用并确保我们之前引用他们，他们被加载。 如果我们不这样做，我们可能无法可靠地运行时得到这样的图像大小的细节，创建错误。
PreloadJS作品通过阅读资源的数组，然后调用时，功能齐全。 我们将指定所有我们将要使用的图像。
延长initialize()函数，如下所示：
当PreloadJS已经准备好我们的资产，该prepareGame()方法将被调用。
使用EaselJS创建和绘制图像
现在，我们需要得到屏幕这些图像（通过画布）。 幸运的是，EaselJS具有多项功能，我们会发现有用：
我们会在北京时间晚了一点，但现在让我们添加的阶段，所以我们可以开始与内容填充它。 在default.js ，添加以下的initialize()函数：
这将创建阶段并将其连接到我们的游戏中的canvas元素。 现在，我们可以添加项目（称为子）的阶段。
右下方的initialize()函数中，添加一个prepareGame()函数。 （还记得我们告诉PreloadJS调用prepareGame当它完成加载资产。）现在，让我们只需添加一个项目-背景：
这里发生了什么？
- 62号线 -
preload.getResult()是要求PreloadJS它已经载入我们的图像 - 63号线 -创建EaselJS
Bitmap实例，使用图像，因为它的源 - 线64＆65 -缩放
Bitmap到我们的屏幕的分辨率（相对于原有资产的800×480） - 第66行 -添加
Bitmap到Stage作为一个孩子 - 68号线 -问
Stage讲述的一切就知道画布
让我们来运行游戏。 闪屏之后，我们现在看到的：
快换用CSS
正如你所看到的，我们添加了背景图像是透明的，所以我们的背景颜色是通过展示。 黑色的背景是怪异，但相当不是我们所要找的。
有一件事我们可以做的是，我们正在使用的WinJS CSS碱基变化。 默认情况下，我们使用ui-dark.css ，但在一个快速变化default.html ，以点到ui-light.css ，事情自动拿起新的风格：
一个快速运行现在显示：
然而，让我们尝试了天空般的颜色多...说，“天蓝”。 我们可以通过CSS设置我们自己的覆盖WinJS背景颜色。 打开/css/default.css和改变的机身风格，如下所示：
再次运行。
一个美丽的天空，准备战争！
添加剩余资产
现在，您已经看到了如何添加背景。 它主要是重复的问题，包括其他的后脑勺（其中投入了更多的数学。） default.js并且包括以下prepareGame()
在这几点注意事项：
- 该弹射器出现在“地面”，我们需要的规模与图像的整体尺寸沿
- 绘图机2的弹射器是棘手的，因为我们需要它要面对的另一个方向。 使用
regX设置一个转换点，并设置负比例能够完成任务。 - 我们创建并添加弹药（巨石）图像，却隐藏着它，直到它后来被解雇。
添加了一些文本
为了总结的东西了这个岗位，让我们使用EaselJS的Text类与指标每个玩家的剩余弹射器旁边加上游戏标题。 首先，我们需要接近顶部的几个变量default.js ：
然后，添加以下到prepareGame() ;
到了Stage ， Text实例是孩子就像Bitmap š我们前面添加。
什么游戏的样子呢？
下一步是什么？
事情看起来很不错，但不幸的是它的 - 没有任何的运动。 在接下来的文章中，我们将在游戏的机械潜水，通过增加运动，碰撞检测，评估机制和残局充实的游戏循环。