本系列教程将指导如何使用HTML5、JavaScript、WinJS以及CreateJS等库创建一个简单的Windows 8游戏。将以XNA示例游戏“Catapult Wars Lab”为基础，重用其资源，开发一个基于Web技术的Windows 8新版本。
在第一部分中，将介绍Windows 8应用的基础知识，包括如何设置项目、配置环境以及理解Windows 8应用的基本结构。
在第二部分中，将介绍游戏开发的基础知识，包括如何使用CreateJS和EaselJS库来创建游戏的基本元素。
游戏的核心是游戏循环，它负责更新游戏状态并绘制新的场景。在第二部分中，已经搭建了游戏循环的框架。现在，将通过JavaScript添加一些游戏逻辑。
游戏循环是任何游戏的心跳。它是一个每秒运行多次的函数，主要负责更新游戏状态和绘制新场景。
幸运的是，EaselJS提供了一个Ticker类，它具有所需要的一些特性：
Ticker是一个静态类，可以直接使用它。在default.js中添加一个新的startGame()函数，并在prepareGame()函数的末尾调用它：
// 在default.js中添加startGame函数
function startGame() {
Ticker.setFPS(60);
Ticker.addEventListener("tick", gameLoop);
}
这里告诉Ticker使用window.requestAnimationFrame来控制gameLoop函数的调用频率。requestAnimationFrame是一个相对较新的Web应用程序API，它有助于确保不必要的工作不会被执行。
现在有一个运行中的游戏循环，是时候添加一些有趣的游戏逻辑了！每个玩家/投石机将向对方发射弹药/石头。需要知道是否有一个射击正在进行，轮到谁了，以及射击是如何移动的。
// 在default.js中添加更多变量
var shotIsFlying = false;
var shotVelocity = { x: 0, y: 0 };
var shot;
现在让使用其中的一些变量，通过添加以下代码到update()函数：
// 在update函数中添加逻辑
if (!shotIsFlying && turn === 1) {
fireShot();
}
目前，两个玩家在他们的回合中都会自动射击（以随机速度）。弹药位图被移动到发射投石机的顶部中心，shotVelocity被赋予一个在有界范围内的随机值（根据屏幕分辨率调整）。
在让射击穿过空中之前，让专注于游戏循环方程的第二部分——绘制到屏幕上。这通常可能非常复杂，但是EaselJS Stage负责绘制内容（所有添加到Stage的子元素——位图、文本等）到画布上，所以只需要这样做：
// 在update函数中添加绘制逻辑
stage.update();
就是这样！如果运行游戏，玩家1将自动射击，射击将出现在红色投石机上方……但它不会移动。让让事情动起来。
让回到update()函数，并在if (shotIsFlying)语句中添加逻辑：
// 在update函数中添加移动逻辑
if (shotIsFlying) {
shot.x += shotVelocity.x;
shot.y += shotVelocity.y;
shotVelocity.y += gravity;
if (shot.y > stage.canvas.height || shot.x < 0 || shot.x > stage.canvas.width) {
processHit();
}
}
还没有运行它，但仍然需要两个函数，但这是正在发生的事情：
现在，添加processHit()函数：
// 添加processHit函数
function processHit() {
shotIsFlying = false;
turn = turn === 1 ? 2 : 1;
}
这个函数简单地结束了射击，更换了玩家，并确保游戏没有结束。
让通过结束游戏来结束这篇文章。添加endgame(Image)函数：
// 添加endgame函数
function endgame(image) {
// 显示游戏结束画面
}
就是这样！现在可以运行游戏并看看谁赢了。