文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

html5怎么实现神经猫游戏

2024-04-02 19:55

关注

本文小编为大家详细介绍“html5怎么实现神经猫游戏”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5怎么实现神经猫游戏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

  游戏设计思路

  从猫当前的位置找六个方向中可通行的邻居,然后从这些邻居出发,再找它们各自的可通行邻居,一直这样找下去,一边找的过程中,一边判断当前已经找到的邻居中有没有处在游戏区边缘的,如果有,那么寻找过程提前结束,判断结果是:猫没有被围住。如果直到所有的可通行邻居都找到了,里面都没有处在游戏区边缘的,那么判断结果是:猫被围住了。

  参考代码

  cat.html

  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种状态 表示 移动位置

  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

  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;

  }

  //表示碰到边缘 游戏结束

  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("游戏结束");

  }

  }

  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轴是 一前一后 所有判断一下 Y%2

  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);

  }

  }

  }

  addCircles();

  Circle.js

  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;

读到这里,这篇“html5怎么实现神经猫游戏”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯