(翻译)开始创建你的第一个游戏--CraftyJS
浏览数：49 /
时间：2015年06月09日
原文链接：http://craftyjs.com/getting-started/
buildnewgames.com的作者Darren Torpey写了一篇很棒的入门指南教你如何开始学习Crafty.js。
安装Crafty.js是很容易的，只要将它放入<script>标签中并且运行：
<html> <head></head> <body> <div id="game"></div> <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/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‘);
如你所见，一段字符串被传入e()方法中，这些都是Crafty.js可用的实体组件。你可以把它想成一个积木。在这里我们的实体包括颜色积木，并且也是2D组件，使之有可能放进游戏之中。
在下面你将学到更多关于组件的东西。
全部的代码将像下面这样：
<html> <head></head> <body> <div id="game"></div> <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/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(4);
请注意我们又增加了组件在字符串Color后面。当我们增加组件可访问的方法像“.fourway”这样的。传给方法的数字决定了运行速度，因此如果这个数字越高，它将移动得更快。
让我们试着将它弄得像一个平台游戏，实体能受到重力的影响。这可以通过“Gravity”组件来实现。
可是当我们现在新增Gravity组件，这个实体将掉下去，因为没有任何东西阻止它的下落。因此我们要增加一个“Floor”。注意我们是怎样增加一个名为Floor的组件的。因为它用到了“group”实体，我们等下可以选择它们 。
Gravity组件只能增加到要下落的实体上，因此我们不需要将其加上“Floor”实体上。
Crafty.e(‘Floor, 2D, Canvas, Color‘) .attr({x: 0, y: 250, w: 250, h: 10}) .color(‘green‘);
接着我们增加红色的盒子并且增加Gravity组件到这个实体上。
Crafty.e(‘2D, Canvas, Color, Fourway, Gravity‘) .attr({x: 0, y: 0, w: 50, h: 50}) .color(‘#F00‘) .fourway(4) .gravity(‘Floor‘);
你也许会注意到“.gravity()”方法的参数“Floor”。这个意思就是说所有的实体都能被Floor组件阻止进一步下落。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
