首页 > 代码库 > (翻译)开始创建你的第一个游戏--CraftyJS

(翻译)开始创建你的第一个游戏--CraftyJS

2024-08-10 07:24:06   211人阅读

原文链接：http://craftyjs.com/getting-started/

 

buildnewgames.com的作者Darren Torpey写了一篇很棒的入门指南教你如何开始学习Crafty.js。

 
http://buildnewgames.com/introduction-to-crafty/
 
安装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>
 
执行后：
 

<iframe src="http://jsfiddle.net/kevinsimper/pShLx/embedded/" frameborder="0" width="100%" height="300"></iframe>

 
现在我们能展示东西在屏幕上了，让我们尝试通过使用键盘方向键使之移动。
 
可能通过“Fourway”组件来实现。
 
Crafty.e(‘2D, DOM, Color, Fourway‘)  .attr({x: 0, y: 0, w: 100, h: 100})  .color(‘#F00‘)  .fourway(4);

 

请注意我们又增加了组件在字符串Color后面。当我们增加组件可访问的方法像“.fourway”这样的。传给方法的数字决定了运行速度，因此如果这个数字越高，它将移动得更快。
 

<iframe src="http://jsfiddle.net/kevinsimper/9jCr7/embedded/" frameborder="0" width="100%" height="300"></iframe>

 
让我们试着将它弄得像一个平台游戏，实体能受到重力的影响。这可以通过“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组件阻止进一步下落。
 

<iframe src="http://jsfiddle.net/kevinsimper/2nBLb/2/embedded/" frameborder="0" width="100%" height="300"></iframe>

(翻译)开始创建你的第一个游戏--CraftyJS


联系
我们