Deployment: https://jinsuichen.github.io/8-puzzle-visualization/
This is a visualization of 8 puzzle problem with A* algorithm using html, css, javascript. The project uses javascript to implement the priority queue and the A* algorithm. Animations are implemented using native html and css.
You can customize the start and end states and the program can react correctly to any state.
For demonstration purposes, you can click the "Random" button to get a random set of start and end states.
If you enter a status that is illegal, the program will alert for it.
The algorithm will determine whether the set of states has a solution based on the inverse pair of the starting and ending states. If there is no solution, an alert will be given.
For a set of states, the program calculates how to operate to get from the start one to the end one in the shortest steps. And it will show it in the form of an animation.