CraftyJs初探

CraftyJs初探

1. 前言

前不久听了一趟分享课，分享课的主题是JS游戏的制作，但是如果是自己写游戏比较的繁琐，如果能应用一个游戏引擎，就能大大的简化游戏的开发速度和开发效率，于是我在网上参考了几个游戏引擎，找到了CraftyJs这个游戏引擎还是挺不错的，但是苦于网上的教程不是很全面，所以今天就开个坑，写个入门级的教程，仅供参考。

2. 初始化

首先从官网上下载CraftyJs的脚本引用到项目中来。然后就可以开始写我们自己的程序了。

CraftyJs.init(this.config.width,this.config.height);

这段代码用于初始化整个stage，用官方的话来说就是舞台，所有的元素将在这整个舞台里活动。这个舞台的宽度是this.config.width(px)，高度是this.config.height(px)。如果有元素超出了舞台的范围，这个元素将被遮住，因为整个舞台设置了样式overflow:hidden将超出的元素隐藏掉。

Crafty.background("#f0f0f0");

你还可以通过background()方法给整个舞台设置背景颜色

3. 放置场景

当整个舞台初始化后就可以玩游戏了吧？不！你去剧院看戏一入座演员就给你演戏么，当然不是，还需要一些场景的带入和切换。这些场景比如加载动画、菜单选项等一系列。

Crafty.defineScene("loading", function() {
    Crafty.background("#000")