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};

// Render the maze
function init()
{
  var ctx=document.getElementById('preview').getContext('2d');
  ctx.clearRect(0,0,220,220);
  ctx.fillStyle='#000000';
  for(var x=0;x < 11;x++)
  {
  	for(var y=0;y < 11;y++)
    {
    	if(maze[x][y] === true)
    		continue;
      ctx.fillRect(x*20, y*20, 20, 20);
    }
  }
  
  ctx.fillStyle='#00FF00';
	ctx.fillRect(start.x*20, start.y*20, 20, 20);

  ctx.fillStyle='#FF0000';
	ctx.fillRect(end.x*20, end.y*20, 20, 20);
}

init();