《HTML5游戏框架之CraftyJS》一个简单乒乓球游戏的例子

CraftyJS是一个GPL和MIT双授权的基于Javascript 的开源HTML5框架，其最大的特点是没有使用典型的类和继承体系，而是为开发者提供了基于实体（entity）和组件（component）的结构来组织代码。这种组织结构能给你的代码带来很大的灵活性。

官网地址：http://craftyjs.com/

首先说说CraftyJS编程的基本结构：

实体

游戏中所有的对象都被看作实体，比如文本、玩家等等。我们使用Crafty.e()来创建一个实体，比如

var myEntity = Crafty.e("2D");

上面的代码就创建了一个实体，这个实体只拥有一个组件“2D”。那么组件是什么？

组件

组件用于为实体提供功能，所谓提供功能其实就是为实体提供了属性和方法，在上面的例子中"2D"就是一个组件，且是Crafty提供的一个预定义的组件，“2D”组件能够使你的实体拥有坐标，高、宽等等基本属性，我们可以设置这些属性来设置实体的位置，比如：

myEntity.attr(x:200,y:200,w:10,h:100);

上面的代码中.attr()是一个函数用来设置实体的各个属性，这个函数由Crafty的核心对象提供（以后再详细说），这里我们将实体的位置设置为(200,200)的位置上，w代表实体的宽，h代表实体的高。

现在我们有了一个实体，但实体听不会绘制在canvas上，我们还需要其他的组件来完成这个任务。

Canvas和DOM

这两个预定义的组件分别提供了两种绘制实体的方法，看名字就知道，一种是用canvas来绘制实体，一种是用DOM来绘制实体。下面使用Canvas来重新定义我们的实体：

var myEntity = Crafty.e("2D,Canvas");

myEntity.attr(x:200,y:200,w:10,h:100);

这样能将我们的实体以canvas 的方式绘制在屏幕，如果像使用DOM来绘制实体只要更换组件即可。

var myEntity = Crafty.e("2D,DOM");

myEntity.attr(x:200,y:200,w:10,h:100);

注意：这里还有个颜色问题，上面的代码我没有试验，但以我之前的经验，用canvas绘制的实体默认颜色是黑的，用DOM时默认是白的，如果想设置颜色需要使用另一个名叫Color的组件，这个组件提供了.color()函数用来设置实体属性。

看到这里就可以明白为什么说Crafty非常灵活，如果以后想支持SVG绘图，那只要再定义一个SVG组件就行了。

这里说的都是使用组件，组件也是可以自定义的，Crafty.c()函数定义，因为例子里用不到所以先不说，

下面是乒乓球游戏的代码（为了更简单把官网上的例子简化了一下，没有使用记分牌）

Crafty.init(600, 300);
Crafty.background('rgb(127,127,127)');

//球拍（其实就是两个矩形。。）
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
	.color('rgb(255,0,0)')
	.attr({ x: 20, y: 100, w: 10, h: 100 })
	.multiway(4, { W: -90, S: 90 });
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
	.color('rgb(0,255,0)')
	.attr({ x: 580, y: 100, w: 10, h: 100 })
	.multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 });

//球
Crafty.e("2D, DOM, Color, Collision")
	.color('rgb(0,0,255)')
	.attr({ x: 300, y: 150, w: 10, h: 10, 
			dX: Crafty.math.randomInt(2, 5), 
			dY: Crafty.math.randomInt(2, 5) })
	.bind('EnterFrame', function () {
		//hit floor or roof
		if (this.y <= 0 || this.y >= 290)
			this.dY *= -1;

		if (this.x > 600) {
			this.x = 300;
		}
		if (this.x < 10) {
			this.x = 300;
		}

		this.x += this.dX;
		this.y += this.dY;
	})
	.onHit('Paddle', function () {
	this.dX *= -1;
})

首先说说代码中有但我还没有说的东西，首先是

Crafty.init(600,300);

初始化代码，必须有，用来创建游戏舞台，600表示舞台的宽，300表示舞台的高。

Crafy.background("rgb(127,127,127)"));

这段代码用来设置背景色，背景色被设置为灰色。

然后是组件Paddle和Collision

组件Paddle是一个未定义的组件，不提供任何功能，仅仅其标识作用，这里我们知道可以为实体添加一个未定义的组件。这个组件仅仅在系统提供的预定义组件Collision的onHit()函数中用到，Collision组件用于碰撞检测，提供的onHit()函数在产生碰撞后将调用其回调函数。

还有一个MultiWay组件，是用来设置键盘响应的，就是用键盘来控制两个球拍，这个组件提供了multiway()函数。

关于游戏逻辑

玩一下游戏就知道了= =，w和s键控制左球拍，右边方向键控制右球拍。

（第一次写，哪里没看懂的告诉我，我改一下）