createjs之easeljs【游戏围住神经猫】

最新推荐文章于 2021-06-04 12:07:09 发布

小章鱼哥

最新推荐文章于 2021-06-04 12:07:09 发布

阅读量2.2k

点赞数

分类专栏： javascript 游戏

本文链接：https://blog.csdn.net/u014787301/article/details/44036655

版权

本文介绍如何借助CreateJS库中的EaselJS模块来开发一款名为‘围住神经猫’的游戏。内容涵盖HTML文件的引入设置、EaselJS的基本用法以及游戏逻辑的实现。

摘要由CSDN通过智能技术生成

在html文件中引入

<script src="circle.js"></script>	创建圆类

<canvas width="800px" height="800px" id="gameView">您的浏览器不支持</canvas>
<script src="app.js"></script>        游戏逻辑

circle.js文件中/**
 * Created by Administrator on 2015/3/3.
 */

function Circle(){
    createjs.Shape.call(this);

    this.setCircleType= function (type) {
        this._circleType=type;
        switch (type){
            case Circle.TYPE_UNSELECTED:
                this.setColor("#cccccc");
                break;
            case Circle.TYPE_SELECTED:
                this.setColor("#ff6600");
                break;
            case Circle.TYPE_CAT:
                this.setColor("#0000ff");
                break;
        }
    }

    this.setColor= function (colorString) {
        this.graphics.beginFill(colorString);
        this.graphics.drawCircle(0,0,25);
        this.graphics.endFill();
    }
    this.getCircleType=function(){
        return this._circleType;
    }
    this.setCircleType(1);
}
Circle.prototype = new createjs.Shape();
Circle.TYPE_UNSELECTED=1;
Circle.TYPE_SELECTED=2;
Circle.TYPE_CAT=3;

与看你有多色游戏的rect差别的大，唯一差别就是这里为了app.js更好调用，为每一种颜色定义了一个变量。
Circle.TYPE_UNSELECTED=1;
Circle.TYPE_SELECTED=2;
Circle.TYPE_CAT=3;</pre>
this.graphics.drawCircle(0,0,25);    画半径为25的圆

app.js文件中
var stage = new createjs .Stage("gameView");
var gameView = new createjs.Container ();
gameView.x=30;
gameView.y=30;   gameView的x，y都移动30的原因是不使最左端最上端的圆只剩一半。

stage.addChild(gameView);

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);

仿照看你有多色的做法，创建了addCircles类
var circleArr=[[],[],[],[],[],[],[],[],[]];  创建二维数组记录棋盘
var currentCat;

function addCircles() {
    for(var indexY=0;indexY<9;indexY++){
       for(var indexX=0;indexX<9;indexX++){
           var c=new Circle();
           gameView.addChild(c);
           circleArr[indexX ][indexY]=c;     indexX和indexY记录棋盘的第几行第几个，把它记录到数组中
           c.indexX=indexX;
           c.indexY