Eight-Puzzle Game

Posted Oct 25, 2020 2 min read

This is a JavaScript implementation of the classic 8-puzzle game. I’ve also built in an AI to solve the puzzle if you are stuck.

Features

  • Uses the A* algorithm to find the shortest way to solve the puzzle
  • You can choose any image to show in the tiles. It will replace the numbers though.
  • The blank tile can also be controlled using hand gestures. It was trained using supervised learning on a set of over 5000 photos.

Controls

↑
← ↓ →

Arrow keys

✋
👈 👇 👉

Hand Gestures (using camera)

W
A S D

Keyboard keys

Game

Code

Here’s the code for A* path finding algorithm that solves the puzzle:

function AStar(v1, v2){
	function route(v1, v2){
	    if (parents[v2] != 'NONE'){route(v1, parents[v2])}
		path.push(v2)
        }
    parents = {}
    searched = []
    fcost = {}
    queue = {}

    parents[v1] = "NONE"
    gcost[v1] = 0
    fcost[v1] = h(v1)
    queue[v1] = fcost[v1]

    while (queue.length != 0){
        x = sortProperties(queue);
        node = x[0][0];
        delete queue[node];
        searched.push(node);
        if (node == v2){
            try{print("found");
                route(v1, v2);}
            catch{print('No path exists');}
            return 0;
        }
        hash_ = generatechild(node);
        for(let[n, c] of Object.entries(hash_)){
            if (c + gcost[node] < gcost[n]){
            	if (searched.includes(n)){continue;}
            	else{
                    gcost[n] = c + gcost[node];
                    fcost[n] = (gcost[n] + h(n));
                    parents[n] = node;
                    if (!queue.hasOwnProperty(n)){queue[n] = fcost[n]}
                }
            }
        }
    }
    print('NO path Found')
}
Tahsin Tariq
Tahsin Tariq
Masters Student

I am a Master’s Student studying Robotics and Mechatronics Engineering with a focus on Computer Vision.

Previous