入门 - 创建你的第一个游戏

这是一个帮助你使用Crafty的快速入门指南。

更加深入的介绍你可以看看 Darren Torpey 的指南. (从 0.6.3 开始, 除了 Darren 在最后提到的变化, 你需要改变 Crafty.load 的调用方式。)

开始

首先让我们来编写 HTML 文件。我们想让你快速上手, 所以在文件中直接引用 Crafty 最新版本。(当然你也可以从本地安装)

<html>
  <head></head>
  <body>
    <div id="game"></div>
    <script type="text/javascript" src="//cdn.bootcss.com/crafty/0.8.0/crafty-min.js"></script>
    <script>
      Crafty.init(500,350, document.getElementById('game'));
    </script>
  </body>
</html>

一个 Crafty.js 游戏使用实体创建 —— 玩家角色，敌人，障碍物都使用这种方式表示。

让我们来创建一个带颜色的方块:

Crafty.e('2D, DOM, Color').attr({x: 0, y: 0, w: 100, h: 100}).color('#F00');

代码解释如下:

我们使用一个组件列表调用 Crafty.e 来创建实体。组件提供功能的基本构建单元。在这个例子中, 我们添加了 2D, DOM, 和 Color。你稍后还会学到更多组件!
我们在新创建的实体上调用了两个方法: attr() 和 color()。attr 方法在所有实体上都可以调用, 但是 color() 方法是由 "Color" 组件提供的。大部分方法调用都会返回实体本身, 从而允许你进行链式调用。

完整的代码如下:

<html>
  <head></head>
  <body>
    <div id="game"></div>
    <script type="text/javascript" src="//cdn.bootcss.com/crafty/0.8.0/crafty-min.js"></script>
    <script>
      Crafty.init(500,350, document.getElementById('game'));
      Crafty.e('2D, DOM, Color').attr({x: 0, y: 0, w: 100, h: 100}).color('#F00');
    </script>
  </body>
</html>

执行结果:

现在我们的屏幕上出现了一些东西，让我们通过键盘来移动它吧。

这可以使用 "Fourway" 组件来完成。这个组件非常适合自上而下的游戏，可以让我们朝四个方向移动（顾名思义）。

Crafty.e('2D, DOM, Color, Fourway')
  .attr({x: 0, y: 0, w: 100, h: 100})
  .color('#F00')
  .fourway(200);

注意我们如何把这个组件的名称添加到 Color 的后边。这增加了新的方法，如 ".fourway" 功能。传递给函数的数字决定了速度，所以如果数字越高，移动速度越快。

让我们试着让它看起来像一个平台游戏，实体受到重力的影响。这可以用 "Gravity" 组件来完成。

但是，如果我们添加了 Gravity 组件，实体就会一直下落，因为没有东西阻止它。所以让我们添加一个长薄的盒子来让它停在上边：

Crafty.e('Floor, 2D, Canvas, Color')
  .attr({x: 0, y: 250, w: 250, h: 10})
  .color('green');

注意我们如何添加一个新的组件 "Floor" 到这个实体。你在组件的API文档中找不到这个组件，这个组件不会添加新的方法，它只是一个我们用来标记这个实体的名字。

Gravity 组件只应加到应该掉落的物体上，所以我们不需要把它添加到我们的新实体中。

现在我们添加 Gravity 组件到我们之前的红色盒子：

Crafty.e('2D, Canvas, Color, Twoway, Gravity')
  .attr({x: 0, y: 0, w: 50, h: 50})
  .color('#F00')
  .twoway(200)
  .gravity('Floor');

你需要注意 ".gravity()" 方法调用的时候有一个参数 "Floor"。这意味着所有拥有 Floor 组件的实体可以阻止物体进一步下落。

此外，我们使用 "Twoway" 组件替换 Fourway 组件。这个组件适合侧面滚动平台，使我们能够在两个方向上移动（顾名思义）。它还允许我们与 Gravity 组件相结合。注意我们使用 "twoway" 函数替换了 "fourway"函数，它同样可以用来控制速度。

嗯，这不是一个好的游戏，但是一个好的开始！要了解更多关于如何使用 Crafty 的知识，你可以探索我们对常见主题的概述，以及详细的 api 文档。