easeljs web开发围住神经小猫咪【二】

最新推荐文章于 2023-07-13 16:36:44 发布

小章鱼哥

最新推荐文章于 2023-07-13 16:36:44 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：游戏 javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/44459005

前两天状态不好。

接着上次没写完的继续写。

围住神经小猫咪游戏，我确定小猫类，圆圈类，并会加载鼠标点击事件，在点击事件里面，我不但控制圆圈的变化，还控制小猫的移动，就这么简单！哈哈

一.加载圆圈

开始写圆圈类

圆圈能有的属性是什么，函数又是什么呢？

很容易想到，圆圈有一个颜色的变化，红色，白色，这里我可以给它设置一个TYPE值。

function Circle(type,row,col){
    this.row=row;
    this.col=col;
    this.type;
    this.setType(type);
}
Circle.TYPE_UNSELECTED=0;
Circle.TYPE_SELECTED=1;
Circle.prototype=new createjs.Bitmap();
Circle.prototype.setType=function(type){
    this.type=type;
    switch(type){
        case Circle.TYPE_UNSELECTED:
            createjs.Bitmap.call(this,"res/pot1.png");
            break;
        case Circle.TYPE_SELECTED:
            createjs.Bitmap.call(this,"res/pot2.png");
            break;
    }
}

这里加入了圆圈的属性type。

开始在main类（游戏主循环）中加入circle。

易见，圆圈跟泡泡龙游戏中的泡泡一样，是交错分布的，奇数排和偶数排总差一个OFFSET，并且我需要一个数组来存储啦CircleArr[]。

var CircleDiameter=45;   设置圆圈的半径
var GridOffsetX=50;
var GridOffsetY=300;   设置圆圈居左居右的偏移

var grid=new Array(9); 这是我宏定义的一个圆圈数组

function addCircle(row,col,type){        增加泡泡函数
    var bitmap = new Circle(type ,row,col);
    stage.addChildAt(bitmap,0);
    var offset=row%2?CircleDiameter/2:0;   奇数行偶数行不同，差一个offset
    bitmap.regX=CircleDiameter/2;
    bitmap.regY=CircleDiameter/2;
    //列
    bitmap.x=GridOffsetX +CircleDiameter*col+offset;
    //行
    bitmap.y=GridOffsetY+CircleDiameter*row;
    grid[row][col]=bitmap;