I designed a maze that adjusts its background size based on the height and width values entered by the user. The background color of the maze object is set, but I want it to dynamically resize along with the width of the maze itself. How can I achieve this? Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.maze
{
color: Blue;
text-align: center;
background-color: Yellow;
width: 100%;
}
.prompt
{
background-color: Yellow;
color: Red;
}
</style>
<script src="mazegenerator.js"></script>
<title>Maze</title>
</head>
<body>
<div id="maze">
<form style="text-align: center" name="forma1">
<br/>
<label>
HEIGHT: </label>
<input type="text" id="height" name="height" autofocus="autofocus"
maxlength="2" size="6" value="" />
<label>
WIDTH: </label>
<input type="text" id="width" name="width" maxlength="2" size="6" value="" />
<br/>
<br/>
<span id="prompt"></span>
<br/>
<input type="button" alt="submit" onclick="CreateMaze();"
value="Generate" style="margin-top: 10px;">
</form>
</div>
<div id="Mzobj" align="center">
<pre id="out" class="maze"></pre>
</div>
</body>
</html>
This JavaScript function retrieves the user input for width and height:
function CreateMaze(){
//gets the value of Height & Width from user
var a = parseInt(document.getElementById("height").value);
var b = parseInt(document.getElementById("width").value);
//Values of Height and Width can't be zero
if (a == 0) {
document.getElementById('prompt').innerHTML = "<b>height</b> is invalid";
document.getElementById('prompt').className = "prompt";
return;
}
if (b == 0) {
document.getElementById('prompt').innerHTML = "<b>width</b> is invalid";
document.getElementById('prompt').className = "prompt";
return;
}
//Width can't be smaller than height
if (a > b) {
document.getElementById('prompt').innerHTML = "not possible";
document.getElementById('prompt').className = "prompt";
}
else {
document.getElementById('prompt').innerHTML = "";
document.getElementById('prompt').className = "";
}
document.getElementById('out').innerHTML = display(maze(a,b));
}
//Display the maze
function display(m) {
var text= [];
for (var j= 0; j<m.x*2+1; j++) {
var line= [];
if (0 == j%2)
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
line[k]= '+';
else
if (j>0 && m.verti[j/2-1][Math.floor(k/4)])
line[k]= ' ';
else
line[k]= '-';
else
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
if (k>0 && m.horiz[(j-1)/2][k/4-1])
line[k]= ' ';
else
line[k]= '|';
else
line[k]= ' ';
if (0 == j) line[1]=line[3]=' ',line[2]= 'S';
if (m.x*2-1 == j) line[4*m.y]= 'E';
text.push(line.join('')+'\r\n');
}
return text.join('');
Here is an image showing the result of the generated Maze: