抓住神經貓的學習與實踐

2024-04-27 15:11:24

字體：大中小

來源：轉載

供稿：網友

最近學習了一款html小游戲叫抓住神經貓：

利用了createjs api以及簡單的游戲邏輯完成的

頁面部分：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>圍住神經貓</title>    <script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>    <script src="../js/circle.js"></script></head><body><center><canvas width="800px" height="800px" id="gameView"></canvas></center><script src="../js/myCat.js"></script><button onclick="javascript:window.location.reload()">再來一次</button></body></html>圓類：/** * Created by gjq on 2017/2/7. */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("#112233");                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;邏輯部分js
/** * Created by gjq on 2017/2/7. */var stage = new createjs.Stage("gameView");createjs.Ticker.setFPS(100);//設置幀數createjs.Ticker.addEventListener("tick",stage);//添加監聽事件/*創建圓*/var gameView = new createjs.Container();stage.addChild(gameView);gameView.x = 30;gameView.y = 30;var circleArr = [[],[],[],[],[],[],[],[],[]];var currentCat;var MOVE_NONE = -1, MOVE_LEFT = 0, MOVE_UP_LEFT = 1, MOVE_UP_RIGHT = 2, MOVE_RIGHT = 3, MOVE_DOWN_RIGHT = 4, MOVE_DOWN_LEFT = 5;function getMoveDir(cat) {//方向    var distanceMap = [];    //left    var can = true;    for (var x = cat.indexX; x >= 0; x--) {        if (circleArr[x][cat.indexY].getCircleType() == circle.TYPE_SELECTED) {            can = false;            distanceMap[MOVE_LEFT] = cat.indexX - x;//左邊可以動區域            break;        }    }    if (can) {        return MOVE_LEFT;    }    //left up    can = true;    var x = cat.indexX, y = cat.indexY;    while (true) {        if (circleArr[x][y].getCircleType() == circle.TYPE_SELECTED) {            can = false;            distanceMap[MOVE_UP_LEFT] = can.indexY - y;            break;        }        if (y % 2 == 0) {            x--;        }        y--;        if (y < 0 || x < 0) {//出界            break;        }    }    if (can) {        return MOVE_UP_LEFT;    }    //right up    can = true;    x = cat.indexX;    y = cat.indexY;    while (true) {        if (circleArr[x][y].getCircleType() == circle.TYPE_SELECTED) {            can = false;            distanceMap[MOVE_UP_RIGHT] = can.indexY - y;            break;        }        if (y % 2 == 1) {//單雙行            x++;        }        y--;        if (y < 0 || x > 8) {//出界            break;        }    }    if (can) {        return MOVE_UP_RIGHT;    }    //right    can = true;    for (var x = cat.indexX; x < 9; x++) {        if (circleArr[x][cat.indexY].getCircleType() == circle.TYPE_SELECTED) {            can = false;            distanceMap[MOVE_RIGHT] = x - cat.indexX;            break;        }    }    if (can) {        //  alert(cat.indexX);        return MOVE_RIGHT;    }    //right down    can = true;    x = cat.indexX;    y = cat.indexY;    while (true) {        if (circleArr[x][y].getCircleType() == circle.TYPE_SELECTED) {            can = false;            distanceMap[MOVE_DOWN_RIGHT] = cat.indexY;            break;        }        if (y % 2 == 1) {            x++;        }        y++;        if (y > 8 || x > 8) {            break;        }    }    if (can) {        return MOVE_DOWN_RIGHT;    }    //left down    can = true;    x = cat.indexX;    y = cat.indexY;    while (true) {        if (circleArr[x][y].getCircleType() == circle.TYPE_SELECTED) {            can = false;            distanceMap[MOVE_DOWN_LEFT] = y - cat.indexY;            break;        }        if (y % 2 == 0) {            x--;        }        y++;        if (y > 8 || x < 0) {            break;        }    }    if (can) {        return MOVE_DOWN_LEFT;    }    /*處理6個方向都有東西的情況*/    var maxDir = -1,maxValue = -1;    for(var dir = 0;dir<distanceMap.length;dir++){        if(distanceMap[dir]>maxValue){//還有路可走            maxValue = distanceMap[dir];            maxDir = dir;        }    }    if(maxValue>1){        return maxDir;    }else{        return MOVE_NONE;    }}function circleClicked(e) {    if (e.target.getCircleType() == circle.TYPE_UNSELECTED) {//空的點        e.target.setCircleType(circle.TYPE_SELECTED);    }else{        return;//不再運行,等待下次點擊    }    if (currentCat.indexX == 0 || currentCat.indexX == 8 || currentCat.indexY == 0 || currentCat.indexY == 8) {//邊界        alert("你輸了貓跑了.");        window.location.reload();        return;    }    var dir = getMoveDir(currentCat);    switch (dir) {        case MOVE_LEFT:            currentCat.setCircleType(circle.TYPE_UNSELECTED);            currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY];            currentCat.setCircleType(circle.TYPE_CAT);            break;        case MOVE_UP_LEFT:            currentCat.setCircleType(circle.TYPE_UNSELECTED);            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX - 1][currentCat.indexY-1];            currentCat.setCircleType(circle.TYPE_CAT);            break;        case MOVE_UP_RIGHT:            currentCat.setCircleType(circle.TYPE_UNSELECTED);            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1];            currentCat.setCircleType(circle.TYPE_CAT);            break;        case MOVE_RIGHT:            currentCat.setCircleType(circle.TYPE_UNSELECTED);            currentCat = circleArr[currentCat.indexX+1][currentCat.indexY];            currentCat.setCircleType(circle.TYPE_CAT);            break;        case MOVE_DOWN_RIGHT:            currentCat.setCircleType(circle.TYPE_UNSELECTED);            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1];            currentCat.setCircleType(circle.TYPE_CAT);            break;        case MOVE_DOWN_LEFT:            currentCat.setCircleType(circle.TYPE_UNSELECTED);            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1];            currentCat.setCircleType(circle.TYPE_CAT);            break;        default :            alert("你贏了，抓住了貓.");            window.location.reload();    }   /*簡單貓    var leftCircle = circleArr[currentCat.indexX - 1][currentCat.indexY];//左    var rightCircle = circleArr[currentCat.indexX + 1][currentCat.indexY];//右    var leftTopCircle = circleArr[currentCat.indexX - 1][currentCat.indexY - 1];//左上    var rightTopCircle = circleArr[currentCat.indexX][currentCat.indexY - 1];//右上    var leftBottomCircle = circleArr[currentCat.indexX-1][currentCat.indexY + 1];//左下    var rightBottomCircle = circleArr[currentCat.indexX][currentCat.indexY + 1];//右下    if(leftCircle.getCircleType() == 1){        leftCircle.setCircleType(3);        currentCat.setCircleType(1);        currentCat = leftCircle;    }else if(rightCircle.getCircleType() == 1){        rightCircle.setCircleType(3);        currentCat.setCircleType(1);        currentCat = rightCircle;    }else if(leftTopCircle.getCircleType() == 1){        leftTopCircle.setCircleType(3);        currentCat.setCircleType(1);        currentCat = leftTopCircle;    }else if(rightTopCircle.getCircleType() == 1){        rightTopCircle.setCircleType(3);        currentCat.setCircleType(1);        currentCat = rightTopCircle;    }else if(leftBottomCircle.getCircleType() == 1){        leftBottomCircle.setCircleType(3);        currentCat.setCircleType(1);        currentCat = leftBottomCircle;    }else if(rightBottomCircle.getCircleType() == 1){        rightBottomCircle.setCircleType(3);        currentCat.setCircleType(1);        currentCat = rightBottomCircle;    }else{        alert("你贏了，游戲結束");    }*/}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;            c.indexX = indexX;            c.indexY = indexY;            c.x = indexY%2?indexX*55+25:indexX * 55;            c.y = indexY * 55;            /*繪制貓*/            if(indexX===4&&indexY===4){                c.setCircleType(circle.TYPE_CAT);                currentCat = c;            }else if(Math.random()<0.1){                c.setCircleType(circle.TYPE_SELECTED);            }            c.addEventListener("click",circleClicked);        }    }}addCircles();