抓住那只喵(HTML5-神经猫)

1.使用createjs

那只喵需要easeljs-0.7.1.min.js

easeljsDemo:

    <canvas width="800px" height="800px" id="gameView"></canvas><script src="js.js"></script>

var stage = new createjs.Stage("gameView");var gameView = new createjs.Container();
stage.addChild(gameView);var s = new createjs.Shape();
s.graphics.beginFill("red");
s.graphics.drawCircle(50,50,25);
s.graphics.endFill();
gameView.addChild(s);createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage

2.那只喵的地盘

那只喵的地盘:可以走的,不能走的,还有那只喵的位置,用不同颜色的圆表示

在html的head中要引入circle.js

circle.js

/*绘制圆*/
function Circle(){createjs.Shape.call(this);//调用构造方法this.setCircleType=function(type){this.circleType = type;switch (type){case Circle.TYPE_UNSELECTED:this.setColor("gray");break;case Circle.TYPE_SELECTED:this.setColor("orange");break;case Circle.TYPE_CAT:this.setColor("red");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;

3.还没睡醒的那只喵

html:

<canvas width="550px" height="500px" id="gameView"></canvas>
<script src="js.js"></script>

js.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 = [[], [], [], [], [], [], [], [], []];//9个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 = indexX * 55;c.x = indexY % 2 ? indexX * 55 + 25 : indexX * 55;c.y = indexY * 55;if (indexX == 4 && indexY == 4) {//绘制猫c.setCircleType(3);currentCat = c;}c.addEventListener("click", circleClicked);//监听}}
}/*逻辑*/
var currentCat;function circleClicked(e) {if (e.target.getCircleType() != Circle.TYPE_CAT) {//不是猫e.target.setCircleType(Circle.TYPE_SELECTED);return;//不再运行,等待下次点击}if (currentCat.indexX == 0 || currentCat.indexX == 8 || currentCat.indexY == 0 || currentCat.indexY == 8) {//边界alert("游戏失败");}/*逻辑(还没睡醒的那只喵的喵)*/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("你赢了");}
}addCircles();

这只喵是按顺时针方向,有路就走,迷迷糊糊的喵

4.睡醒的那只喵

对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 = [[], [], [], [], [], [], [], [], []];//9个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 = indexX * 55;c.x = indexY % 2 ? indexX * 55 + 25 : indexX * 55;c.y = indexY * 55;if (indexX == 4 && indexY == 4) {//绘制猫c.setCircleType(3);currentCat = c;}else if(Math.random()<0.1){//默认的不能走的点c.setCircleType(Circle.TYPE_SELECTED);}c.addEventListener("click", circleClicked);//监听}}
}/*逻辑*/
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 = [];//leftvar 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 upcan = 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 upcan = 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;}//rightcan = 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 downcan = 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 downcan = 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("那只喵逃掉了.");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("成功抓住那只喵.");}}addCircles();

这只喵比较上只难抓一些,不过经测试会发现还有不少不足,下面是我优化过的.

5.机智的那只喵

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 = [[], [], [], [], [], [], [], [], []];//9个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 = indexX * 55;c.x = indexY % 2 ? indexX * 55 + 25 : indexX * 55;c.y = indexY * 55;if (indexX == 4 && indexY == 4) {//绘制那只喵c.setCircleType(3);currentCat = c;} else if (Math.random() < 0.1) {//默认的不能走的点c.setCircleType(Circle.TYPE_SELECTED);}c.addEventListener("click", circleClicked);//监听}}
}/*逻辑*/
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 = [];var min = [null, 9];//leftvar 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;min[0] = MOVE_LEFT;min[1] = cat.indexX;}//left upcan = true;var x = cat.indexX, y = cat.indexY;while (true) {if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED) {can = false;distanceMap[MOVE_UP_LEFT] = cat.indexY - y;break;}if (y % 2 == 0) {x--;}y--;if (y < 0 || x < 0) {//出界break;}}if (can) {
//        return MOVE_UP_LEFT;if (cat.indexY < min[1]) {min[0] = MOVE_UP_LEFT;min[1] = cat.indexY;}}//right upcan = true;x = cat.indexX;y = cat.indexY;while (true) {if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED) {can = false;distanceMap[MOVE_UP_RIGHT] = cat.indexY - y;break;}if (y % 2 == 1) {//单双行x++;}y--;if (y < 0 || x > 8) {//出界break;}}if (can) {//       return MOVE_UP_RIGHT;if (cat.indexY < min[1]) {min[0] = MOVE_UP_RIGHT;min[1] = cat.indexY;}}//rightcan = 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;if (8 - cat.indexX < min[1]) {min[0] = MOVE_RIGHT;min[1] = 8 - cat.indexX;}}//right downcan = 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;if (8 - cat.indexY < min[1]) {min[0] = MOVE_DOWN_RIGHT;min[1] = 8 - cat.indexY;}}//left downcan = 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;if (8 - cat.indexY < min[1]) {min[0] = MOVE_DOWN_LEFT;min[1] = 8 - cat.indexY;}}//   alert(min[0])if (min[1] < 9) {return min[0];}/*处理6个方向都有东西的i情况*/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("那只喵逃掉了");//   return;window.location.reload();//重新加载界面}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();}
}addCircles();

html界面添加刷新:

<div align="center"><canvas width="550px" height="500px" id="gameView"></canvas><hr><button id="btn" style="color: red;">向那只喵认输</button>
</div>
<script>var btn= document.getElementById("btn");btn.onclick = function () {window.location.reload();};
</script>
<script src="js.js"></script>

源码下载:http://download.csdn.net/detail/oyuemijindu/8453525

抓住那只喵(HTML5-神经猫)相关推荐

poj 3278 bzoj 1646: [Usaco2007 Open]Catch That Cow 抓住那只牛（BFS）
1646: [Usaco2007 Open]Catch That Cow 抓住那只牛 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 1223 Solv ...
Catch That Cow抓住那只奶牛（BFS，广度优先搜索）
# **Catch That Cow(抓住那只奶牛)** [题意]:农场主要去追一直逃跑的牛,每次移动有三种选择,位置加一,位置减一,位置乘二,要找到最快的方法让农夫追到牛(也就是移动的次数最少,这个 ...
[CTF]抓住那只猫(XCTF 4th-WHCTF-2017)
原作者:darkless 题目描述:抓住那只猫思路: 打开页面,有个输入框输入域名,输入baidu.com进行测试发现无任何回显,输入127.0.0.1进行测试. 发现已经执行成功,执行的是一个p ...
一只喵引发的思考：动物们的开源技术和工具
我今天早上和我的猫讨论开源技术,他让我想到了一个好点子:"为什么不为动物写一篇关于开源技术的文章呢?" Donald (我的猫)是对的.动物相关的开源项目理应受到关注.毕竟动物越来 ...
一晚啪了5只喵，累到在医院打点滴，这中国喵把英国人看傻了 | 今日最佳
世界只有3.14 % 的人关注了青少年数学之旅最近,一只叫xiaopi的中国猫在英国红了! 好多媒体都报道了它- "猫咪一夜连XX 5只母喵后,累到挂点滴" <LADbi ...
一只喵的西行记-7 爱在奈何桥上
如果一天,我们的脚开始厌烦这土地,开始惦记着逃离,你说我们该怎么办?是随着人类的飞船离开这里,还是进化出一双翅膀.可这些都是小概率事件,甚至是不可能事件.但是,今天我却意外的得到了答案,那就是饮下孟婆 ...
一只喵的西行记-4 蛋蛋的忧桑
车水马龙,灯红酒绿.我想我一定置身一个繁华的城市中,甚至我会想我是不是处在红灯区.哈哈,当然这不是属于我的红灯区,只是今天遇上的故事没有对话,只有情节.相信你听完会羞红了脸,开始我还准备不和你叙述,但 ...
一只喵的西行记-11 与大叔小萝莉的不打不相识
还记得曾经我们一起躲在窗户外面听一户人家传来的音乐吗?没记错的话,那首歌好像叫<Shape Of My Heart>.那时,我跳到窗台上盯着电视,一点点把看到的内容向你复述.那是一个杀手和 ...
一只喵的西行记-9 喵林英雄虹猫梦
"I have adream !"当听到这句话,不由的想到马丁.路德金曾在万人面前说出了这个激奋人心的话的场面.A dream,他究竟是何物?是信仰还是信念?你还记得你曾经的梦想吗 ...