最近人工智能老师安排了一个8位数的实验，在网上找到了很多启发式A*算法，但是大部分都是用C或者C在控制台上实现的，所以我用js在网页上做了一个类似的。

首先，八个数字是一个有一个空格的九方形网格，另外八个数字对应数字1-8。

移动空间，使最终状态有序，如下图所示

启发式算法是指利用启发式函数去除不符合规则的解节点，从而减少问题的解空间。

A*算法是一种使用评价函数的启发式算法。在这个例子中，通过使用不同于当前节点状态和最终节点状态的网格号来评估节点的优缺点，并且稍后存储和扩展上级节点，并且丢弃下级节点。

要使用web实现这一点，首先在html中添加九个输入文本框，如图所示，背景图片为数字网格

页面代码为

！doctype html lang=' en ' head meta charset=' utf-8 ' title八位数/title style type=' text/CSS ' # resultinput { display : inline-block；Font-family: '微软雅黑'；font-size : 60px；font-weight : 900；文本对齐：中心；宽度width:100px高度：100 px；background : URL(images/0 . png)；背景尺寸：封面；}/style/headbody div id='result '输入类型='text' id='r1 '输入类型='text' id='r2 '输入类型='text' id='r3'br输入类型='text' id='r4 '输入类型='text' id=' r5 '输入类型=' text' id=' R6' br输入类型=' text' id=' r7 '输入类型=' text' id=' r8 '输入类型=' text' id=' r9' br/div按钮onclick='

var startArray=[[8，1，3]，[0，2，4]，[7，6，5]]；//初始化八位数组//获取初始输入状态var CPIC=1；for(var I=0；iN；I){ for(var j=0；jN；j){ var rid=' r ' CPIC；var inputValue=getId(rid)。价值；if(InputValue==' '){ InputValue=0；} startArray[I][j]=ParSeint(InputValue)；getId(rid)。值=' '；} } var startGraph=new Graph(startArray)；var endArray=[[ 1，2，3]，[ 8，0，4 ]，[ 7，6，5]]；var endGraph=new Graph(endArray)；//目标节点评估图(开始图、结束图)；显示图表(开始图表)；Graph类用于保存状态节点的相关数据：

//节点类vargraph=function(form data){ this。form=formdatathis . evalue=0；this . udi rect=0；this.parent=null};实现showGraph()函数来显示八位数的状态：

函数show graph(graph){ var c=1；for(var I=0；iN；I){ for(var j=0；jN；j){ var s=' r ' c；getId(s). style . background image=' URL(images/' graph . form[I][j]'。png)'；}}}使用评估函数evaluateGraph()评估当前节点和目标节点之间的间隙值

//求值函数求值图(the graph，end graph){ var difference=0；//的间隙数(var I=0；iN；I){ for(var j=0；jN；j ) { if (theGraph.form[i][j]！=endgraph . form[I][j]){ different；} } } GetGraph . evalue=different；回报不同；}使用moveGraph()函数移动并返回一个新节点：

//移动数字组函数移动图(the graph，direct){ var hasgetblank=0；//是否查找空格位置var AbleMove=1；//是否可以移动var i，j，t_i，t _ j；//求空间坐标I，j为(I=0；iN；I){ for(j=0；jN；j){ if(ThE graph . form[I][j]==0){ HasGetBlank=1；打破；} } if(HasGetBlank==1)break；} t _ i=it _ j=j//移动空间开关(直接){ case 1://on t _ I-；if(t _ i0)able move=0；//移动到边界断点之外；第2://号案件下的t _ I；if(t _ I=N)able move=0；打破；案例3://左t _ j-；if(t _ j0)able move=0；打破；案例4://右t _ j；if(t _ j=N)able move=0；打破；}//直接的方向不能移动，如果(AbleMove==0){ return the graph；}//直接移动方向生成新节点varta=[[0，0，0]，[0，0，0]，[0，0，0]]；var New _ Graph=New Graph(ta)；for(var x=0；xN；X )//复制数字组{ for(var y=0；yN；y){ New _ graph . form[x][y]=Graph . form[x][y]；} }//交换new _ graph . form[I][j]=new _ graph . form[t _ I][t _ j]；//在移动方向上交换空格和数字New _ graph . form[t _ I][t _ j]=0；返回New _ graph}最后是一个搜索函数，可以从初始节点开始逐层向下搜索，直到到达目标节点，再返回到子节点，从子节点开始逐层追溯父节点，从而找到求解路径：

//搜索路径函数搜索(开始图，结束图){var G1，G2，g；var Step=0；//深度var Direct=0；//方向var I；var前=-1，后=-1；g1=beginGraph//初始八位节点while (g1)//队列不为空，所以取出一个节点{ for(I=1；I=4；I ){//分别从四个方向推导出新的子节点Direct=I；if (Direct==g1.udirect)继续；//跳过屏蔽方向g2=moveGraph(g1，Direct)；if (evaluateGraph(g2，g1)！=0){//数字组是否可以移动evaluateGraph(g1，endGraph)；评估图(g2，endGraph)；//计算新节点if (g2。评估=G1。求值1)//用求值值判断是否是上级节点{//如果是，将G2的父节点指向g1 g2.parent=g1//设置屏蔽方向，防止g2.udirect=2 on开关(Direct){ case 1://；打破；G2.udirect=1在案例2://下；打破；case ://left g 2 . udi rect=4；打破；case 4://right g 2 . udi rect=3；打破；} Qu[后]=G2；//将上级节点放入关闭队列if (G2。evaluate==0)//如果为0，则搜索完成{ g=g2打破；} } else { g2=null}//放弃下级节点} }//搜索完毕，继续退出if (typeof g！==' undefined '){ if(g . evalue==0){ break；} }步骤；//统计深度如果(StepMax_Step){ alert('超过搜索深度！');打破；} g1=曲[正面]；//从close队列中取出一个节点继续下一轮扩展} return g；}最后依次将解路径节点推入栈中，每秒弹出一个节点显示并形成动画：

var top=-1；var G；G=搜索(开始图、结束图)；//取消排序并存储在堆栈中var P=G；而(P！=null){ top；ST[top]=P；P=P.parent}//动画执行var si=set interval(function(){ if(top-1){ show graph(ST[top])；top-；} else { ClearInterval(si)；} },1000);}以上是使用JavaScript在网页上实现8位启发式A*算法动画效果的介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！