最近學習了一款html小游戲叫抓住神經(jīng)貓：
利用了createjs api以及簡單的游戲邏輯完成的
頁面部分：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圍住神經(jīng)貓</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);//設置幀數(shù)createjs.Ticker.addEventListener("tick",stage);//添加監(jiān)聽事件/*創(chuàng)建圓*/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;//左邊可以動區(qū)域 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();
新聞熱點
疑難解答
