使用JavaScript创建一个简单的Windows 8游戏: 第 1部分- Windows 8应用基础知识

分享于 

8分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

我可以在的bowen http://blogs.msdn.com/cbowen?的Chris博客 check

创建一个简单的Windows 8游戏系列:

这是一系列文章中的第一篇,将展示如何创建( 非常) 简单 Windows 8游戏。 我们将使用 HTML5.JavaScript。WinJS和一些从 CreateJS的有用库。

  • 部分 1 - Windows 8应用基础
  • 第 2部分- 游戏基础 & createjs/easeljs
  • 第 3部分- 游戏逻辑
  • 第 4部分- 输入&声音

游戏是基于XNA样本游戏 "catapult war实验室"。 我们将在开发基于web技术的Windows 8的新版本时重用这个游戏的资产。

这个游戏重点是简单性,所以这样的示例中有很多中间技术。 有关更全面的示例,请参见本文章末尾的"进一步阅读"

让我们开始吧。在这篇文章中,我们将重点介绍 Windows 8项目的基础知识。

设置

要开发这个游戏,你需要同时拥有 Windows 8和 Visual Studio 2012。 在继续之前下载并安装这些。 我们不会在这里讨论因为它在网上解释得很好。

创建项目

启动 Visual Studio 2012并选择文件-> 新项目( 或者 CTRL + SHIFT + N )。 我们将使用 JavaScript,所以选择模板下的那个节点。 我们将依赖 HTML5 Canvas 为 UI,所以我们只需要"空白应用"模板( 其他模板具有公共地铁样式布局和内置的控件):

将项目命名为"catapultgame"并单击确定创建项目。 有关于空白应用模板插件的指南,但是我现在将给你一个快速的浏览。

了解项目

那么我们得到了什么? 在解决方案资源管理器中打开一些文件,然后查看周围的文件。 如果展开所有文件夹,你将看到如下所示的内容:

以下是主要的部分:

  • web服务 /References/Windows 库这是,JavaScript和 CSS,帮助我们开发用于 Windows 8的JavaScript Metro风格应用。 你不能修改这些文件,但我建议你先查看它们,( 稍后)。
  • /css/default.css - Starter CSS,包括通过媒体查询处理屏幕更改的基础知识。 我们还将在以后构建。
  • /js/default.js - 有一些启动JavaScript逻辑。 我们将在这里添加我们自己的。
  • default.html - 我们游戏的root HTML页面
  • package.appxmanifest - 包含许多帮助你个性化应用程序的设置。 它是 XML,但如果双击打开,你将得到一个友好的界面来更改设置。

此外,"图像"文件夹还有一些默认内容,应用程序用于标识和启动屏幕。 你将希望添加自己的。

运行游戏。好的空项目

那么,让我们来运行这个项目看看我们得到了什么。 首先,运行项目插件有一些选项:

使用本地计算机是默认的,但也很容易连接到另一台机器,以便在目标计算机上运行。 模拟器插件可以用于测试各种屏幕尺寸/分辨率,模拟触摸输入,调整位置以及更多。

现在,让我们用本地机器( 单击按钮,按 F5,或者选择调试-> 启动调试) 运行。

一个有趣的游戏 !

入门

那么,"内容在这里"的文本来自于? 打开 default.html,下面是你应该看到的内容:

.这里做什么?

  • 行 1 - 表示我们正瞄准 HTML5
  • 行 7 -10 - 引用 winjs & JavaScript的CSS
  • 行 12 -14 - 其他引用,包括默认的JS和CSS文件。 我们将在以后添加其他的。
  • 行 16 -18 - 我们的HTML页面的body

就像你看到的,它只是基本的HTML。 继续,在 <body> 中修改HTML并再次运行。

CSS适合于

我们已经看到 default.html 文件,提供了项目的引用和基本内容,但是HTML只是故事的一部分。 Web应用程序使用HTML来实现内容,JavaScript使事情发生,而 CSS ( 级联样式表) 以可以维护的方式来影响设计&的外观。

CSS样式通过标识( 选择) 目标元素和应用效果- 颜色,阴影,文本,转换,转换,布局来工作。 列表上面有这么多特性,帮助我们创建令人惊讶的效果,这将是一个不可以思议的概览。 只要知道 Visual Studio 2012有许多功能可以帮助你创建和修改样式,你知道的更多的CSS更有效。

查看 /css/default.css:

默认情况下,不应用任何样式,但这是什么?

  • 行标题 1 & 这将为引用这里文件的任何页面选择 <主体> 标记,并将应用任何我们添加的样式规则。
  • 这是对基于内容的布局来说非常有用的CSS媒体查询。 在这种情况下,地铁样式应用可以运行- 全屏 landscape。填充和全屏 portrait - 以及这些地图。 你可以使用这个方法来定制你的游戏以充分利用可用的屏幕空间。

我们将在以后添加。 保持调谐。

JavaScript,动作英雄

我们已经看到HTML内容&样式,但是如何实现生命? 游戏"知道"怎么会发生什么?

让我们使用 js/default。js文件,查看一下:

它看起来很像很多,但是很简单,只是在那里帮助我们开始:

  • 行 3 -33 - 以前没有看到类似这样的JavaScript函数? 它是一个"立即调用函数表达式"或者生命的问题。 短版本,它使变量和函数保持整洁,而不会影响全局命名空间。 medium 版本,阅读 Addy的第 4节,Osmani JavaScript命名空间模式。 Longer版本,我是 Allman post的
  • 行 6 -7 - 常用应用程序和激活类的变量。
  • 收费行( 调用 WinJS.strictProcessing 支持严格的声明性处理( 帮助更容易地发现错误)
  • 行 10 -21 - 激活代码。 第一个待办事项是新启动应用程序时,当应用返回 Windows 时,我们可以加载保存状态。
  • 行 23 -30 - 在应用程序挂起之前保存状态的机会。 特别重要的是,悬挂可以跟随终止,如果游戏状态没有保存在这里,玩家必须重新开始。

这就是我们即将添加游戏逻辑的地方。 从代码加载图像。管理游戏世界和各种 helper 函数,到游戏循环控制更新状态和显示内容。

通过这种方法,在这个例子中我们将只添加简单的代码添加代码,但是factored应用程序通常会包含多个JavaScript文件,例如 factored,planet,default.js,,等等,,等。

接下来

简要概述了基本齿轮和滑轮 behind的地铁样式应用。 我们将从第 2部分开始,通过引入"catapult战"起始项目中的内容,并获得游戏结构的基本位置来创建游戏。

进一步阅读

这个系列重点关注学习和简单性,所以对于更全面的游戏示例,请参见 "javascript和HTML5触摸游戏示例"相关教程( 在MSDN上)。


相关文章