圍住神經(jīng)貓游戲開(kāi)發(fā)

作為一個(gè)前端小白，有一個(gè)熱愛(ài)學(xué)習(xí)的心。對(duì)游戲開(kāi)發(fā)有這深刻的興趣，將圍住神經(jīng)貓游戲開(kāi)發(fā)的源碼，分享一下。
或許很多人沒(méi)有聽(tīng)說(shuō)過(guò)這款游戲，游戲思路很簡(jiǎn)單，就是讓這只貓無(wú)路可走。

就類似這樣一個(gè)頁(yè)面，直到讓這只貓無(wú)路可走。
我并沒(méi)有找到這只貓的圖片，隨意我用另一種顏色的球來(lái)代替，模擬這只貓。主要用了canvas，面向?qū)ο?，以及一些?jiǎn)單的邏輯。
并且引了一個(gè)基于canvas開(kāi)發(fā)的easeljs框架，可以去網(wǎng)站去下載一下http://createjs.com/

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
        <script src="js/easeljs-0.8.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/Circle.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="gameView" width="800px" height="800px"></canvas>        
        <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

Circle.js

function Circle(){
    createjs.Shape.call(this);
    this.setCircleType = function(type){
        this._circleType = type;
        switch (type){
            //沒(méi)有點(diǎn)擊過(guò)的顏色
            case Circle.TYPE_UNSELECTED:
            this.setColor("#cccccc");
                break;
            //點(diǎn)擊過(guò)的顏色
            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();
//三種狀態(tài)    表示 一個(gè)為點(diǎn)擊之后的  一個(gè)點(diǎn)擊之前  一個(gè)是貓
Circle.TYPE_UNSELECTED = 1;
Circle.TYPE_SELECTED = 2;
Circle.TYPE_CAT = 3;

app.js

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
gameView.x = 30;
gameView.y = 30;
stage.addChild(gameView);
var circleArr = [[],[],[],[],[],[],[],[],[]];
var currentCat;
//定義7種狀態(tài) 表示 移動(dòng)位置
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;
    var 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){
        return MOVE_RIGHT;
    }
    //ritht 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] = y -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.index;
            break;
        }
        if(y%2 == 0){
            x--;
        }
        y++;
        if(y>8 || x<0){
            break;
        }
    }
    if(can){
        return MOVE_DOWN_LEFT;
    }
    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(event){
    if(event.target.getCircleType() != Circle.TYPE_CAT){
        event.target.setCircleType(Circle.TYPE_SELECTED);
    }else{
        return;
    }
    //表示碰到邊緣 游戲結(jié)束
    if(currentCat.indexX == 0 ||currentCat.indexX == 8 ||currentCat.indexY==0 ||currentCat.indexY==8){
        alert("游戲結(jié)束");
        return;
    } 
    var dir = getMoveDir(currentCat);
    switch (dir){
        //判斷他要走那一個(gè)方向
        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;  
        //沒(méi)有方向走 游戲結(jié)束
        default:
            alert("游戲結(jié)束");
    }   
}
 


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;
            //因?yàn)閅軸是 一前一后 所有判斷一下 Y%2
            c.x = indexY%2?indexX*55+25:indexX*55;
            c.y = indexY * 55;
            if(indexX == 4 && indexY == 4){
                
                //中間出現(xiàn)一只貓
                c.setCircleType(3);
                currentCat = c;
            }else if(Math.random() <0.1){
                //讓頁(yè)面上隨機(jī)出現(xiàn) 不能走的方框 方便圍這只貓
                c.setCircleType(Circle.TYPE_SELECTED);
            }
            //添加事件
            c.addEventListener("click",circleClicked);
        }
    }
}
addCircles();

這樣制作出了一個(gè)簡(jiǎn)單的圍住神經(jīng)貓的游戲開(kāi)發(fā)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,229評(píng)論 25贊 708
  • HTML5游戲從2014年Egret引擎開(kāi)發(fā)的神經(jīng)貓引爆朋友圈之后，就開(kāi)始一發(fā)不可收拾，今年《傳奇世界》更是突破流...
    秋玄語(yǔ)道閱讀 4,863評(píng)論 3贊 10
  • 不記得什么時(shí)候聽(tīng)過(guò)了，一個(gè)女生總是會(huì)喜歡上那個(gè)每晚陪她聊天的男生。也許是QQ上不經(jīng)意間看到的一個(gè)大火苗，就忽然讓你...
    零叁叁陸閱讀 153評(píng)論 0贊 0
  • 楔/ “我只屬于你啊，傻瓜” “我愛(ài)的就是你啊” 正/ (一) 她和他的相逢注定是一場(chǎng)孽緣，她和他的愛(ài)情注定是一場(chǎng)...
    灬茶荼灬閱讀 468評(píng)論 0贊 0
  • 【原文】（12.19） 季康子問(wèn)政于孔子曰：“如殺無(wú)道，以就有道，何如？”孔子對(duì)曰：“子為政，焉用殺？子欲善...
    錢江潮369閱讀 643評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容