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键控制左球拍,右边方向键控制右球拍。
(第一次写,哪里没看懂的告诉我,我改一下)