JSFiddle - React, Tailwind, and code Playground

by a_bertrand

HTML

<canvas id='preview' width='220' height='220'></canvas>

JavaScript

// A simple Maze (generated by my maze code)
var maze= [[false,false,false,false,false,false,false,false,false,false,false],[false,true,true,true,true,true,true,true,true,true,false],[false,true,false,true,false,false,false,false,false,true,false],[false,true,false,true,true,true,true,true,false,true,false],[false,true,false,true,false,true,false,false,false,true,false],[false,true,false,true,false,true,true,true,false,true,false],[false,true,false,true,false,false,false,false,false,true,false],[false,true,false,true,true,true,true,true,false,true,false],[false,true,false,true,false,true,false,false,false,false,false],[false,true,false,true,false,true,true,true,true,true,false],[false,false,false,false,false,false,false,false,false,false,false]];

// Start point
var start={x:9,y:1};
// Goal point
var end={x:9,y:9};

// Our "class" pathSolver
var pathSolver = function(startX, startY, goalX, goalY)
{
	// Stores all the visited steps
	this.visitedStep = [];
  // Stores the number of operations we did
  this.operations = 0;
  // Stores the end goal
  this.goalX = goalX;
  this.goalY = goalY;
  
  // Used to calculate the distance between the start and the end
  var a = startX - this.goalX;
  var b = startY - this.goalY;

	// Creates a first step with our start point
  this.todoStep = [
    { x: startX, y: startY, steps: 0, path: [], operations: 0, distance: Math.sqrt(a * a + b * b) }
  ];
  // Stores it as well as visited
  this.visit(this.todoStep[0]);
}

// Solve the path
pathSolver.prototype.solve = function()
{
  // As long as there is something to visit run this function and
  // as long as we didn't run 500 operations
  while (this.todoStep.length > 0 && this.operations < 500)
  {
  	// incrementes the opration counts
    this.operations++;
    var res = this.calcStep();
    if (res != null)
      return res;
  }
  return null;
}

// Create a new coordinate step
pathSolver.prototype.addCoordinate = function(coord, x, y)
{
  var x = coord.x + x;
  var y =...