Egret引擎学习笔记之一：实现简易贪吃蛇

Egret引擎学习笔记之一：实现简易贪吃蛇

初识egret，十分简约的一款H5游戏引擎，话不多说，开始制作我们的简易版彩虹贪吃蛇。

大体上是一个忽略的自生碰撞自身可以以一种离奇方式扭曲的彩虹蛇，我们姑且把他认为是五维生物。

---

一、食物类

首先在这条贪吃的彩虹蛇还未出现之前，神奇的宇宙便突然出现了美味的彩虹糖，它的颜色都是随机生成生成的，当然或许是上帝偏爱七色彩虹，所以你也可以指定这些颜色，只需把下面代码中注释的地方去掉，并且注释下一行代码即可，例如：

/**
 * 食物颜色
 */
private static colorList: number[] =
[0x70f3ff, 0xff461f, 0x00bc12, 0x21a675, 0x4c221b, 0xbf242a, 0x161823, 0xffa400,];
/**
 * 获取随机的颜色
 */
private randomColor(): number {
    // return Food.colorList[Math.round(Math.random() * Food.colorList.length)];
    return parseInt("0x" + ("000000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6));
}

随机颜色的获取其实就是获取六位随机十六进制数字然后在前加上“0x”标志。

为了确定食物所在的具体位置和大小，我们还需要传入二维坐标和食物的半径

private food: egret.Shape;
public color: number;
/**
 * 初始化
 * 
 * 1.绘制果实
 */
private init(x: number, y: number, r: number): void {

    //获取随机颜色
    this.color = this.randomColor();

    this.food = new egret.Shape();
    this.food.graphics.beginFill(this.color);
    this.food.graphics.drawCircle(0, 0, r);
    this.food.graphics.endFill();

    this.food.x = r;
    this.food.y = r;

    //位置
    this.x = x;
    this.y = y;

    this.addChild(this.food);
}

我们可以看到，食物的形状是作为一个Shape存在的，这是egret内置的一个对象类，可以使用画笔进行绘图，先获取事物对象的graphics画笔，由于粒子间的相互作用，食物被力制约成圆形，所以我们使用drawCircle( )函数进行绘制，绘制完成后设置食物的位置

我们可以看到上块代码中有
this.food.x = r;
this.food.y = r;
//位置
this.x = x;
this.y = y;
以上两种位置设置，首先需要说明的是typescript就像所有面向对象语言一样，在在类中this就代表了当前实例对象。那么第一个是设置该图像(即圆形)出现在食物中的位置，我们设定为处于中间位置即可，第二个是设置食物在空间中的位置，我们将传进来的位置写入即可。

最后作为食物就要有被吃掉的觉悟，我们将食物这个物体在父节点——也就是舞台中去除就好了。

/**
 * 被吃的
 */
public onEat() {
    this.parent.removeChild(this);
}

当然我们仍然不能忘记食物作为一个自定义类就必须拥有我们的构造函数。它需要传入的横纵坐标来确定位置，还需要半径来确定大小，之后我们调用前面的init方法初始化食物的样式和位置即可。

/**
* @param x 横坐标
* @param y 纵坐标
* @param r 半径
*/
public constructor(x: number, y: number, r: number) {
    super();
    this.init(x, y, r);
}

食物作为一个会在屏幕上反复出现的元素，我们将其称为精灵
在egret中使用Sprite来定义，所以我们的食物类便需要继承自它

当然，我们完全可以将食物看做在游戏中一次只会出现一个的“固定”的对象，每次更改食物都是单纯的更改它的属性；但为了日后可以制作多人网络对战的版本，我们选用目前的精灵版。

最后我们彩虹糖食物的代码看起来就像这样

class Food extends egret.Sprite {

    /**
     * 食物颜色
     */
    private static colorList: number[] =
    [0x70f3ff, 0xff461f, 0x00bc12, 0x21a675, 0x4c221b, 0xbf242a, 0x161823, 0xffa400,];

    /**
    * @param x 横坐标
    * @param y 纵坐标
    * @param r 半径
    */
    public constructor(x: number, y: number, r: number) {
        super();
        this.init(x, y, r);
    }

    private food: egret.Shape;
    public color: number;

    /**
     * 初始化
     * 
     * 1.绘制果实
     */
    private init(x: number, y: number, r: number): void {

        //获取随机颜色
        this.color = this.randomColor();

        this.food = new egret.Shape();
        this.food.graphics.beginFill(this.color);
        this.food.graphics.drawCircle(0, 0, r);
        this.food.graphics.endFill();

        this.food.x = r;
        this.food.y = r;

        //位置
        this.x = x;
        this.y = y;

        this.addChild(this.food);
    }

    /**
     * 获取随机的颜色
     */
    private randomColor(): number {
        // return Food.colorList[Math.round(Math.random() * Food.colorList.length)];
        return parseInt("0x" + ("000000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6));
    }

    /**
     * 被吃
     */
    public onEat() {
        this.parent.removeChild(this);
    }
}

二、彩虹蛇类

即使作为一只四维生物，彩虹蛇仍然改变不了贪吃的本质，所以我们要先给它一颗张着嘴巴的脑袋：

    //蛇头
    private head: egret.Shape;
    //蛇身的半径
    private radius;
    //蛇身的全部节点list（保存蛇每个节点的信息和蛇本身做区别）
    private bodyList: egret.Shape[] = [];
    /**
    * 根据横纵坐标，半径和颜色来初始化蛇头
    *  @param x 横坐标
    *  @param y 纵坐标
    *