JSFiddle - React, Tailwind, and code Playground

by Trevor W

HTML

<body>
	<button id="new">new</button>
	<button id="playButton">start/stop</button>
	<!-- 
	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>

</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

// ============================================================================================
// == General Start
// ============================================================================================
activeOpenBlockArray = [];
boardsToSplice = [];

function boardFinished(boardElementID){

	// document.getElementById("elementid")

	if(!$("#"+boardElementID+" .off:not(.start)").length && 
		!$("#"+boardElementID+" .beenHereAlready:not(.start)").length){
		console.log("Success! "+boardElementID+" has been completed!");
		$("#"+boardElementID).addClass("success");
	}else{
		console.log("Failed! "+boardElementID+" was not completed!");
		$("#"+boardElementID).addClass("failed");
	}

	//remove from progress array
	var index = activeBoards.indexOf(boardElementID);
	if (index > -1) {
		boardsToSplice.push(boardElementID);
	}
}
function spliceFinishedBoards(){
	for (var i = 0; i < boardsToSplice.length; i++) {
		var board = boardsToSplice[i];

		var index = activeBoards.indexOf(board);
		if (index > -1) {
	    activeBoards.splice(index, 1);
		}
	};
}


function createBoard(boardElementID,height,width,startX,startY){
	activeBoards[activeBoards.length] = boardElementID;

	$('body').append('<div class="board" size="'+width+'x'+height+'" id="'+boardElementID+'"></div>');
	var w = 1,
			h = 1;
	while(h <= height){//height		
		w = 1;
		while(w <= width){//width
			$('#'+boardElementID).append('<div id="'+boardElementID+'-'+w+'-'+h+'" class="box off" x="'+w+'" y="'+h+'"></div>');
			w++;
		}
		$('#'+boardElementID).append('<div style="clear:both;"></div>');
		h++;
	}
	chooseStart(boardElementID,height,width,startX,startY);
}

function chooseStart(boardElementID,height,width,x,y){
	if(x == undefined){
		var x = parseInt(Math.floor((Math.random() * width) + 1));
	}
	if(y == undefined){
		var y = parseInt(Math.floor((Math.random() * height) + 1));
	}
	$('#'+boardElementID+'-'+x+'-'+y).addClass("start active...