Introduction to graphic code for implementing the animation effect of the * algorithm using JavaScript on webpages

This article mainly introduces how to use JavaScript to implement the 8 digital heuristic A * algorithm animation effect on webpages, for more information, see the next article. This article mainly introduces how to use JavaScript to achieve 8 digital heuristic A * algorithm animation effects on webpages. For more information, see

Recently, the AI instructor assigned an octal digital experiment. Many octal digital heuristic A * algorithms are displayed on the Internet, but most of them are implemented on the console using C or C ++, so I used js to make a similar in the webpage.

First, the eighth digital is a nine-square-lattice with a space. The other eight correspond to numbers 1-8,

The page code is

 
  Digital 8  
      
      
      
 
 Solution

Then, javascript is used to obtain the input value and save it in a two-dimensional array.

Var startArray = [[, 3], [, 4], [, 5]; // initialize the Eight Digital array // obtain the initial input state var cpic = 1; for (var I = 0; I
 
  
The Graph class is used to save data related to a State node:
  
// Node class var Graph = function (formData) {this. form = formData; this. evalue = 0; this. udirect = 0; this. parent = null ;};
  
Implement a showGraph () function to display the Eight Digital states:
  
Function showGraph (graph) {var c = 1; for (var I = 0; I
   
    
EvaluateGraph () is used to evaluate the gap between the current node and the target node.
    
// Evaluation function evaluateGraph (theGraph, endGraph) {var differ = 0; // gap number for (var I = 0; I
     
      
Use the moveGraph () function to move and return a new node:
      
// Mobile digital group function moveGraph (theGraph, direct) {var HasGetBlank = 0; // whether the space position var AbleMove = 1 is found; // whether the var I, j, t_ I, t_j; // search space coordinates I, j for (I = 0; I
       
        
= N) AbleMove = 0; break; case 3: // left t_j --; if (t_j <0) AbleMove = 0; break; case 4: // right t_j ++; if (t_j> = N) AbleMove = 0; break;} // Direct direction cannot be moved, return the original node if (AbleMove = 0) {return theGraph ;} // move to the Direct direction to generate a new node var ta = [[0, 0], [0, 0], [0, 0]; var New_graph = new Graph (ta); for (var x = 0; x
        
         
Finally, the search function starts from the initial node and goes down layer by layer until it reaches the target node, returns the child node, and traces back the parent node from the child node layer by layer to find the solution path:
         
// Search path function Search (beginGraph, endGraph) {var g1, g2, g; var Step = 0; // depth var Direct = 0; // direction var I; var front =-1, rear =-1; g1 = beginGraph; // The initial eight digital nodes while (g1) // The queue is not empty, take out a node {for (I = 1; I <= 4; I ++) from the close queue {// derive the new subnode Direct = I from four directions respectively; if (Direct = g1.udirect) continue; // skip the shielding direction g2 = moveGraph (g1, Direct); if (evaluateGraph (g2, g1 )! = 0) {// whether the digital group can move evaluateGraph (g1, endGraph); evaluateGraph (g2, endGraph); // if (g2.evalue <= g1.evalue + 1) // use the evaluation value to determine whether the node is a superior node {// if it is an excellent node, Direct the parent node of g2 to g1 g2.parent = g1; // set the blocking direction to prevent the switch from being pushed back (Direct) {case 1: // g2.udirect = 2; break; case 2: // g2.udirect = 1; break; case 3: // left g2.udirect = 4; break; case 4: // right g2.udirect = 3; break;} Qu [++ rear] = g2; // put the superior node in the close queue if (g2.evalue = 0) // if the value is 0, the search is complete {g = g 2; break ;}} else {g2 = null;} // discard inferior node }}// search complete, continue to exit if (typeof g! = 'Undefined') {if (g. evalue = 0) {break;} Step ++; // statistics depth if (Step> Max_Step) {alert ("exceeds the search depth! "); Break;} g1 = Qu [++ front]; // pull a node from the close queue to continue the next round} return g ;}
         
Finally, push the nodes in the path to the stack in sequence. A node is displayed every second to form an animation:
         
Var top =-1; var G; G = Search (startGraph, endGraph); // store the sequence into the stack var P = G; while (P! = Null) {top ++; St [top] = P; P = P. parent;} // animation execution var si = setInterval (function () {if (top>-1) {showGraph (St [top]); top --;} else {clearInterval (si) ;}, 1000 );}
         
The preceding section describes the graphic code that uses JavaScript to implement the animation effect of the 8 digital heuristic A * algorithm on the webpage. For more information, see other related articles in the first PHP community!