tyler6699/dans maze

## dans maze
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Dans Maze </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Dan Stonehouse</title>
</head>

<body>
    <h1>Hello, world!</h1>

    <header>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#">Dan's Maze</a>
        </nav>
    </header>

    <!-- Begin page content -->
    <main role="main" class="container">
        <h1 class="mt-5">Dan's Github Noop Mazebot</h1>
        <p class="lead">This is Dan Stonehouse's Github home page, showing an exmaple of a JQuery Maze. Use the arrow keys to complete the maze.</p>
    </main>

    <div class="container">
      <!-- Dans Maze Code-->
      <div class="jumbotron">
        <h2 id="mazename"></h2>
        <h2 id="startpoint"></h2>
        <h2 id="endpoint"></h2>
        <h2 id="exsol"></h2>
        <h2 id="currentCol"></h2>
        <h2 id="currentRow"></h2>
        <h2 id="mapSize"></h2>
      </div>

      <button type="button" class="btn btn-dark" id="newMap">New Map</button>
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-dark" id="Left">Left</button>
        <button type="button" class="btn btn-dark" id="Right">Right</button>
        <button type="button" class="btn btn-dark" id="Up">Up</button>
        <button type="button" class="btn btn-dark" id="Down">Down</button>
      </div>
      <p id="map"></p>
    </div>

    <script>
        $(document).ready(function() {
            var currentCol;
            var currentRow;
            var mapSize;
            var complete = false;
            var block = "&#9608;";
            // generating maze when the page loads
            generateMaze();
            $("#Left").click(function() {
                moveLeft();
            });
            $("#Right").click(function() {
                moveRight();
            });
            $("#Up").click(function() {
                moveUp();
            });
            $("#Down").click(function() {
                moveDown();
            });
            $(document).keydown(function(e) {
                switch (e.which) {
                    case 37: // left
                        moveLeft();
                        break;
                    case 38: // up
                        moveUp();
                        break;
                    case 39: // right
                        moveRight();
                        break;
                    case 40: // down
                        moveDown();
                        break;
                    default:
                        return; // exit this handler for other keys
                }
                e.preventDefault(); // prevent the default action (scroll / move caret)
            });

            function moveLeft() {
                if (currentCol > 0 && complete == false) {
                    if (isWall(currentRow, currentCol - 1) == false) {
                        console.log("Left");
                        // set current tile to a space
                        clearSpace();
                        // increase cuurentcol by 1
                        currentCol--;
                        // set new tile as current
                        moveCharacter();
                        // update currentCol text
                        $('#currentCol').text("currentCol / " + currentCol);
                    }
                } else {
                    console.log("Unable Left");
                }
            }

            function moveRight() {
                if (currentCol < mapSize - 1 && complete == false) {
                    if (isWall(currentRow, currentCol + 1) == false) {
                        console.log("Right");
                        // set current tile to a space
                        clearSpace();
                        // increase cuurentcol by 1
                        currentCol++;
                        // set new tile as current
                        moveCharacter();
                        // update currentCol text
                        $('#currentCol').text("currentCol / " + currentCol);
                    }
                } else {
                    console.log("Unable Right");
                }
            }

            function moveUp() {
                if (currentRow > 0 && complete == false) {
                    if (isWall(currentRow - 1, currentCol) == false) {
                        console.log("Up");
                        // set current tile to a space
                        clearSpace();
                        // decrease cuurentrow by 1
                        currentRow--;
                        // set new tile as current
                        moveCharacter();
                        // update currentCol text
                        $('#currentRow').text("currentRow / " + currentRow);
                    }
                } else {
                    console.log("Unable Up");
                }
            }

            function moveDown() {
                if (currentRow < mapSize - 1 && complete == false) {
                    if (isWall(currentRow + 1, currentCol) == false) {
                        console.log("Down");
                        // set current tile to a space
                        clearSpace();
                        // increase cuurentrow by 1
                        currentRow++;
                        // set new tile as current
                        moveCharacter();
                        // update currentCol text
                        $('#currentRow').text("currentRow / " + currentRow);
                    }
                } else {
                    console.log("Unable Down");
                }
            }

            function isWall(row, col) {
                var id = "#" + row + "_" + col;
                var type = $(id).data("type");
                if (type == "wall") {
                    return true;
                } else {
                    return false;
                }
            }

            function clearSpace() {
                var id = "#" + currentRow + "_" + currentCol;
                $(id).html(block);
                $(id).css({
                    'color': 'Yellow',
                    'background-color': '#fff'
                });
            }

            function moveCharacter() {
                id = "#" + currentRow + "_" + currentCol;
                // Check if tile is endpoint
                var type = $(id).data("type");
                console.log(type);
                if (type == "Finish") {
                    complete = true;
                    $("span").css({
                        'color': 'Pink',
                        'background-color': 'Green'
                    });
                } else {
                    $(id).css({
                        'color': 'green'
                    });
                }
            }
            $("#newMap").click(function() {
                generateMaze();
            });

            function generateMaze() {
                // clear current text values
                $('#mazename').text("loading");
                $('#startpoint').text("loading");
                $('#endpoint').text("loading");
                $('#map').text("loading");
                $('#currentCol').text("loading");
                $('#currentRow').text("loading");
                $('#mapSize').text("loading");
                complete = false;
                $.get("https://api.noopschallenge.com/mazebot/random?minSize=10&maxSize=30", function(data, status) {
                    //alert("Data: " + data + "\nStatus: " + status);
                    console.log(data);
                    $('#mazename').text("mazename: " + data.name);
                    $('#startpoint').text("startPoint x:  " + data.startingPosition[0] + " y: " + data.startingPosition[1]);
                    $('#endpoint').text("endingPoint x: " + data.endingPosition[0] + " y: " + data.endingPosition[1]);
                    // set map size
                    mapSize = data.map.length
                    $('#mapSize').text("mapSize: " + mapSize);
                    // clear loading message
                    $('#map').text("");
                    //loop through the array of map rows
                    $.each(data.map, function(i, row) {
                        // add current row number
                        $('#map').append(i + "/ ");
                        // loop through the array of columns
                        $.each(row, function(j, column) {
                            var tile = column;
                            if (tile == " ") {
                                tile = "<span id='" + i + "_" + j + "' data-type='space' style='color:silver'>" + block + "</span>";
                            } else if (tile == "X") {
                                tile = "<span id='" + i + "_" + j + "' data-type='wall' style='color:purple'>" + block + "</span>";
                            } else if (tile == "A") {
                                tile = "<span id='" + i + "_" + j + "' style='color:Green;'>" + block + "</span>";
                                currentCol = j;
                                currentRow = i;
                                $('#currentCol').text("currentCol: " + currentCol);
                                $('#currentRow').text("currentRow: " + currentRow);
                            } else if (tile == "B") {
                                tile = "<span id='" + i + "_" + j + "' data-type='Finish' style='color:red;'>" + block + "</span>";
                            }
                            $('#map').append(tile);
                        });
                        $('#map').append("<br>");
                    });
                    //console.log
                });
            }
        });
    </script>
    <!-- End of Dans Code -->
    <footer class="footer">
        <div class="container">
            <span class="text-muted">Dan Stonehouse 2019</span>
        </div>
    </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title> Dans Maze </title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<title>Dan Stonehouse</title>
	</head>

	<body>
	<h1>Hello, world!</h1>

	<header>
	<!-- Fixed navbar -->
	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
	<a class="navbar-brand" href="#">Dan's Maze</a>
	</nav>
	</header>

	<!-- Begin page content -->
	<main role="main" class="container">
	<h1 class="mt-5">Dan's Github Noop Mazebot</h1>
	<p class="lead">This is Dan Stonehouse's Github home page, showing an exmaple of a JQuery Maze. Use the arrow keys to complete the maze.</p>
	</main>

	<div class="container">
	<!-- Dans Maze Code-->
	<div class="jumbotron">
	<h2 id="mazename"></h2>
	<h2 id="startpoint"></h2>
	<h2 id="endpoint"></h2>
	<h2 id="exsol"></h2>
	<h2 id="currentCol"></h2>
	<h2 id="currentRow"></h2>
	<h2 id="mapSize"></h2>
	</div>

	<button type="button" class="btn btn-dark" id="newMap">New Map</button>
	<div class="btn-group" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-dark" id="Left">Left</button>
	<button type="button" class="btn btn-dark" id="Right">Right</button>
	<button type="button" class="btn btn-dark" id="Up">Up</button>
	<button type="button" class="btn btn-dark" id="Down">Down</button>
	</div>
	<p id="map"></p>
	</div>

	<script>
	$(document).ready(function() {
	var currentCol;
	var currentRow;
	var mapSize;
	var complete = false;
	var block = "█";
	// generating maze when the page loads
	generateMaze();
	$("#Left").click(function() {
	moveLeft();
	});
	$("#Right").click(function() {
	moveRight();
	});
	$("#Up").click(function() {
	moveUp();
	});
	$("#Down").click(function() {
	moveDown();
	});
	$(document).keydown(function(e) {
	switch (e.which) {
	case 37: // left
	moveLeft();
	break;
	case 38: // up
	moveUp();
	break;
	case 39: // right
	moveRight();
	break;
	case 40: // down
	moveDown();
	break;
	default:
	return; // exit this handler for other keys
	}
	e.preventDefault(); // prevent the default action (scroll / move caret)
	});

	function moveLeft() {
	if (currentCol > 0 && complete == false) {
	if (isWall(currentRow, currentCol - 1) == false) {
	console.log("Left");
	// set current tile to a space
	clearSpace();
	// increase cuurentcol by 1
	currentCol--;
	// set new tile as current
	moveCharacter();
	// update currentCol text
	$('#currentCol').text("currentCol / " + currentCol);
	}
	} else {
	console.log("Unable Left");
	}
	}

	function moveRight() {
	if (currentCol < mapSize - 1 && complete == false) {
	if (isWall(currentRow, currentCol + 1) == false) {
	console.log("Right");
	// set current tile to a space
	clearSpace();
	// increase cuurentcol by 1
	currentCol++;
	// set new tile as current
	moveCharacter();
	// update currentCol text
	$('#currentCol').text("currentCol / " + currentCol);
	}
	} else {
	console.log("Unable Right");
	}
	}

	function moveUp() {
	if (currentRow > 0 && complete == false) {
	if (isWall(currentRow - 1, currentCol) == false) {
	console.log("Up");
	// set current tile to a space
	clearSpace();
	// decrease cuurentrow by 1
	currentRow--;
	// set new tile as current
	moveCharacter();
	// update currentCol text
	$('#currentRow').text("currentRow / " + currentRow);
	}
	} else {
	console.log("Unable Up");
	}
	}

	function moveDown() {
	if (currentRow < mapSize - 1 && complete == false) {
	if (isWall(currentRow + 1, currentCol) == false) {
	console.log("Down");
	// set current tile to a space
	clearSpace();
	// increase cuurentrow by 1
	currentRow++;
	// set new tile as current
	moveCharacter();
	// update currentCol text
	$('#currentRow').text("currentRow / " + currentRow);
	}
	} else {
	console.log("Unable Down");
	}
	}

	function isWall(row, col) {
	var id = "#" + row + "_" + col;
	var type = $(id).data("type");
	if (type == "wall") {
	return true;
	} else {
	return false;
	}
	}

	function clearSpace() {
	var id = "#" + currentRow + "_" + currentCol;
	$(id).html(block);
	$(id).css({
	'color': 'Yellow',
	'background-color': '#fff'
	});
	}

	function moveCharacter() {
	id = "#" + currentRow + "_" + currentCol;
	// Check if tile is endpoint
	var type = $(id).data("type");
	console.log(type);
	if (type == "Finish") {
	complete = true;
	$("span").css({
	'color': 'Pink',
	'background-color': 'Green'
	});
	} else {
	$(id).css({
	'color': 'green'
	});
	}
	}
	$("#newMap").click(function() {
	generateMaze();
	});

	function generateMaze() {
	// clear current text values
	$('#mazename').text("loading");
	$('#startpoint').text("loading");
	$('#endpoint').text("loading");
	$('#map').text("loading");
	$('#currentCol').text("loading");
	$('#currentRow').text("loading");
	$('#mapSize').text("loading");
	complete = false;
	$.get("https://api.noopschallenge.com/mazebot/random?minSize=10&maxSize=30", function(data, status) {
	//alert("Data: " + data + "\nStatus: " + status);
	console.log(data);
	$('#mazename').text("mazename: " + data.name);
	$('#startpoint').text("startPoint x: " + data.startingPosition[0] + " y: " + data.startingPosition[1]);
	$('#endpoint').text("endingPoint x: " + data.endingPosition[0] + " y: " + data.endingPosition[1]);
	// set map size
	mapSize = data.map.length
	$('#mapSize').text("mapSize: " + mapSize);
	// clear loading message
	$('#map').text("");
	//loop through the array of map rows
	$.each(data.map, function(i, row) {
	// add current row number
	$('#map').append(i + "/ ");
	// loop through the array of columns
	$.each(row, function(j, column) {
	var tile = column;
	if (tile == " ") {
	tile = "<span id='" + i + "_" + j + "' data-type='space' style='color:silver'>" + block + "</span>";
	} else if (tile == "X") {
	tile = "<span id='" + i + "_" + j + "' data-type='wall' style='color:purple'>" + block + "</span>";
	} else if (tile == "A") {
	tile = "<span id='" + i + "_" + j + "' style='color:Green;'>" + block + "</span>";
	currentCol = j;
	currentRow = i;
	$('#currentCol').text("currentCol: " + currentCol);
	$('#currentRow').text("currentRow: " + currentRow);
	} else if (tile == "B") {
	tile = "<span id='" + i + "_" + j + "' data-type='Finish' style='color:red;'>" + block + "</span>";
	}
	$('#map').append(tile);
	});
	$('#map').append("<br>");
	});
	//console.log
	});
	}
	});
	</script>
	<!-- End of Dans Code -->
	<footer class="footer">
	<div class="container">
	<span class="text-muted">Dan Stonehouse 2019</span>
	</div>
	</footer>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	</body>

	</html>