JSFiddle - React, Tailwind, and code Playground

by Trevor W

HTML

<body>
	
	<!-- 
	Keep in mind, this is JavaScript. 
	High numbers will crash your browser. 
	-->
	<ul style="display:none;">
		<li class="easyVar height">8</li><!--8-->
		<li class="easyVar width">8/li><!--8-->
		<li class="easyVar speed">25</li><!--50-->
		<li class="easyVar boards">3</li><!--1-->
	</ul>
  <button id="new">new</button>
	<button id="playButton">start/stop</button>

</body>

CSS

*{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.board{float:left;padding:5px}.board.success{background-color:rgba(0,255,0,.2)}.board.failed{background-color:rgba(255,0,0,.2)}.board.selected{background-color:rgba(255,255,0,.2)}.board.selected.success{box-shadow:inset 0 0 3px 5px rgba(0,255,0,.5)}.board.selected.failed{box-shadow:inset 0 0 3px 5px rgba(255,0,0,.5)}.box{margin:3px;height:20px;width:20px;border:1px solid #000;float:left}.box.on{background-color:#00f}.box.beenHereAlready{background-color:red}.box.start{background-color:green}.box.traversedBlock{background-color:rgba(255,0,255,.4)}.box.active{border:4px solid orange}#new,#playButton{margin:10px;width:100%;max-width:200px;height:40px}

JavaScript

function boardFinished(e){$("#"+e+" .off:not(.start)").length||$("#"+e+" .beenHereAlready:not(.start)").length?(console.log("Failed! "+e+" was not completed!"),$("#"+e).addClass("failed")):(console.log("Success! "+e+" has been completed!"),$("#"+e).addClass("success")),activeBoards.indexOf(e)>-1&&boardsToSplice.push(e)}function spliceFinishedBoards(){for(var e=0;e<boardsToSplice.length;e++){var o=boardsToSplice[e],s=activeBoards.indexOf(o);s>-1&&activeBoards.splice(s,1)}}function createBoard(e,o,s,t,n){activeBoards[activeBoards.length]=e,$("body").append('<div class="board" size="'+s+"x"+o+'" id="'+e+'"></div>');for(var a=1,r=1;r<=o;){for(a=1;a<=s;)$("#"+e).append('<div id="'+e+"-"+a+"-"+r+'" class="box off" x="'+a+'" y="'+r+'"></div>'),a++;$("#"+e).append('<div style="clear:both;"></div>'),r++}chooseStart(e,o,s,t,n)}function chooseStart(e,o,s,t,n){if(void 0==t)var t=parseInt(Math.floor(Math.random()*s+1));if(void 0==n)var n=parseInt(Math.floor(Math.random()*o+1));$("#"+e+"-"+t+"-"+n).addClass("start active on").removeClass("off"),createActiveOpenBlockArray(e,t,n)}function createActiveOpenBlockArray(e,o,s){activeOpenBlockArray[e]=[];for(var t=0,n=0,a=1;a<=4;a++){if(1==a)t=o,n=s-1;else if(2==a)t=o,n=s+1;else if(3==a)t=o+1,n=s;else{if(4!=a)continue;t=o-1,n=s}doesBlockExist(e,t,n)&&activeOpenBlockArray[e].push(t+"-"+n)}}function moveToNext(e,o,s){1==s&&($("#"+e).hasClass("userTouched")||$("#"+e).addClass("userTouched"));var t=parseInt($("#"+e+" .active").attr("x")),n=parseInt($("#"+e+" .active").attr("y"));switch(o){case"up":n--;break;case"down":n++;break;case"right":t++;break;case"left":t--;break;default:console.log("moveToNext(): direction not recognized: "+o)}var a=t+"-"+n,r=activeOpenBlockArray[e].indexOf(a);-1!=r&&activeOpenBlockArray[e].splice(r,1),moveToThisElement="#"+e+"-"+t+"-"+n,doesBlockExist(e,t,n)?(blockHasClass("on",e,t,n)&&($(moveToThisElement).addClass("beenHereAlready"),boardFinished(e)),blockHasClass("start",e,t,n)&&boardFinished(e),$("#"+e+"...