利用JavaScript在网页实现八数码启发式A*算法动画效果


Posted in Javascript onApril 16, 2017

最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的。

首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8,

利用JavaScript在网页实现八数码启发式A*算法动画效果

移动空格,使得最后状态为有序,如下图

利用JavaScript在网页实现八数码启发式A*算法动画效果

启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间。

A*算法是利用评价函数的启发式算法,在本例中,利用当前节点状态与最终节点状态所不同的格子数来评估节点的优劣,将优越节点储存并在之后展开,将劣质节点抛弃。

利用web实现这一点首先在html中添加九个如图所示input文本框,背景图片为数码格

利用JavaScript在网页实现八数码启发式A*算法动画效果

页面代码为

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>八数码</title>
 <style type="text/css">
 #result input{
  display: inline-block;
  font-family:"微软雅黑";
  font-size: 60px;
  font-weight: 900;
  text-align: center;
  width:100px;
  height:100px;
  background:url(images/0.png);
  background-size:cover;
 }
</style>
</head>
<body>
 <div id="result">
  <input type="text" id="r1">
  <input type="text" id="r2">
  <input type="text" id="r3"><br>
  <input type="text" id="r4">
  <input type="text" id="r5">
  <input type="text" id="r6"><br>
  <input type="text" id="r7">
  <input type="text" id="r8">
  <input type="text" id="r9"><br>
 </div>
 <button onclick="run()">求解</button>
</body>
</html>

然后利用javascript获取输入的值,并保存在二维数组中

var startArray=[[8,1,3],[0,2,4],[7,6,5]];//初始化八数码数组
   //获取输入的初始状态
   var cpic=1;
   for(var i=0;i<N;i++){
    for(var j=0;j<N;j++){
     var rid='r'+cpic++;
     var inputValue=getId(rid).value;
     if(inputValue==""){inputValue=0;}
     startArray[i][j]=parseInt(inputValue);
     getId(rid).value="";
    }
   }
var startGraph=new Graph(startArray);
var endArray=[[ 1,2,3],[ 8,0,4 ],[ 7,6,5 ]];
var endGraph=new Graph(endArray);//目标节点
evaluateGraph(startGraph,endGraph);
showGraph(startGraph);

其中Graph类是用来来保存一个状态节点相关数据:

//节点类
  var Graph = function(formData){
   this.form=formData;
   this.evalue=0;
   this.udirect=0;
   this.parent=null;
  };

实现一个showGraph()函数来显示八数码状态:

function showGraph(graph) {
   var c=1;
   for(var i=0;i<N;i++){
    for(var j=0;j<N;j++){
     var s='r'+c++;
     getId(s).style.backgroundImage="url(images/"+graph.form[i][j]+".png)";
    }
   }
  }

利用评估函数evaluateGraph()评估当前节点与目标节点的差距值

//评估函数
  function evaluateGraph(theGraph, endGraph){
   var differ = 0;//差距数
   for (var i = 0; i<N; i++)
   {
    for (var j = 0; j<N; j++)
    {
     if (theGraph.form[i][j] != endGraph.form[i][j]){differ++;}
    }
   }
   theGraph.evalue = differ;
   return differ;
  }

利用moveGraph()函数来移动并返回一个新节点:

//移动数码组
  function moveGraph(theGraph, direct){
   var HasGetBlank = 0;//是否找到空格位置
   var AbleMove = 1;//是否可移动
   var i, j, t_i, t_j;
   //查找空格坐标i,j
   for (i = 0; i<N; i++)
   {
    for (j = 0; j<N; j++)
    {
     if (theGraph.form[i][j] == 0)
     {
      HasGetBlank = 1;
      break;
     }
    }
    if (HasGetBlank == 1)
     break;
   }
   t_i = i;
   t_j = j;
   //移动空格
   switch (direct)
   {
    case 1://上
     t_i--;
     if (t_i<0)
      AbleMove = 0;//移动超过边界
     break;
    case 2://下
     t_i++;
     if (t_i >= N)
      AbleMove = 0;
     break;
    case 3://左
     t_j--;
     if (t_j<0)
      AbleMove = 0;
     break;
    case 4://右
     t_j++;
     if (t_j >= N)
      AbleMove = 0;
     break;
   }
   //Direct方向不能移动,返回原节点
   if (AbleMove == 0)
   {
    return theGraph;
   }
   //向Direct方向移动,生成新节点
   var ta=[[0,0,0],[0,0,0],[0,0,0]];
   var New_graph = new Graph(ta);
   for (var x = 0; x<N; x++)//复制数码组
   {
    for (var y = 0; y<N; y++)
    {
     New_graph.form[x][y] = theGraph.form[x][y];
    }
   }
   //交换
   New_graph.form[i][j] = New_graph.form[t_i][t_j];//交换空格和移动方向上的数字
   New_graph.form[t_i][t_j] = 0;
   return New_graph;
  }

最后是搜索函数,通过从初始节点开始一层层向下搜索,直到抵达目标节点,返回子节点,从子节点一层层向上回溯父节点,便可找到解路径:

//搜索路径
  function Search(beginGraph, endGraph){
   var g1, g2, g;
   var Step = 0;//深度
   var Direct = 0;//方向
   var i;
   var front=-1,rear=-1;
   g1=beginGraph;//初始八数码节点
   while (g1)//队列不空,从close队列中拿出一个节点
   {
    for (i = 1; i <= 4; i++){//分别从四个方向推导出新子节点
     Direct = i;
     if (Direct == g1.udirect)
      continue;//跳过屏蔽方向
     g2=moveGraph(g1,Direct);
     if (evaluateGraph(g2,g1)!=0){//数码组是否可以移动
      evaluateGraph(g1,endGraph);
      evaluateGraph(g2,endGraph);//评价新的节点
      if (g2.evalue <= g1.evalue + 1)//利用评估值判断是否为优越节点
      { //若为优,将g2的父节点指向g1
       g2.parent = g1;
       //设置屏蔽方向,防止往回推
       switch (Direct){
        case 1://上
         g2.udirect = 2;
         break;
        case 2://下
         g2.udirect = 1;
         break;
        case 3://左
         g2.udirect = 4;
         break;
        case 4://右
         g2.udirect = 3;
         break;
       }
       Qu[++rear]=g2;//把优越节点放到close队列
       if (g2.evalue == 0)//为0则搜索完成
       {
        g = g2;
        break;
       }
      }
      else{g2 = null;}//抛弃劣质节点
     }
    }
    //搜索完成,继续退出
    if (typeof g !== 'undefined')
    {
     if (g.evalue == 0)
     {
      break;
     }
    }
    Step++;//统计深度
    if (Step>Max_Step){
     alert("超过搜索深度!");
     break;}
    g1=Qu[++front];//从close队列中拿出一个节点继续下一轮展开
   }
   return g;
  }

最后将解路径节点按顺序压入堆栈,每秒弹出一个节点,显示,形成动画:

var top=-1;
   var G;
   G = Search(startGraph, endGraph);
   //解序列存入堆栈
   var P=G;
   while (P != null)
   {
    top++;
    St[top] = P;
    P = P.parent;
   }
   //动画执行
   var si=setInterval(function () {
    if (top>-1)
    {
     showGraph(St[top]);
     top--;
    }else {
     clearInterval(si);
    }
   },1000);
  }

以上所述是小编给大家介绍的利用JavaScript在网页实现八数码启发式A*算法动画效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Vue精简版风格概述
Jan 30 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 #Javascript
JavaScript简单计算人的年龄示例
Apr 15 #Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 #Javascript
微信小程序动态的加载数据实例代码
Apr 14 #Javascript
JAVA中截取字符串substring用法详解
Apr 14 #Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python logging添加filter教程
2019/12/24 Python
使用django自带的user做外键的方法
2020/11/30 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
火山动力Java笔试题
2014/06/26 面试题
体育教师自荐信范文
2013/12/16 职场文书
认错检讨书
2014/10/02 职场文书
督导岗位职责范本
2015/04/10 职场文书
焦裕禄观后感
2015/06/03 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Java 数组的使用
2022/05/11 Java/Android
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技