Hi all. I'm trying to make a simple online roguelike in javascript. Right now, I'm simply trying to print a map and the location of a user.
I can print out everything but it's all in the default font. I need it to be a monospaced font, preferably courier. I have managed to do this with the user cursor, but not the map tiles. I think that this a super easy problem, which is why I can't find a solution anywhere online. Here is the code:
How much do you want to be the instructor marks it as wrong because he does *NOT* use document.write? Because the instructor is still teaching vintage 1998 or so JavaScript?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>met@verse Test</title>
<style type="text/css">
#myMap {
font-family: courier;
font-size: x-large;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script type="text/javascript">
(
function()
{
var map = [
['#','#','#','#','#'],
['#','.','.','.','#'],
['#','.','.','.','#'],
['#','.','.','.','#'],
['#','#','#','#','#']
];
function plotCurrentLocation( x, y )
{
var useMap = [].concat(map); // clone the original map
useMap[y][x] = "@"; // place users current location
// convert the inner arrays into strings
for ( var row = 0; row < useMap.length; ++row )
{
useMap[row] = useMap[row].join("");
}
// and convert the entire array to one string and then to HTML:
document.getElementById("myMap").innerHTML =
useMap.join("<br/>");
}
// demonstrate that it works
var userx = 1;
var usery = 1;
plotCurrentLocation( userx, usery );
}
)();
</script>
</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Last edited by Old Pedant; 01-30-2013 at 10:06 PM..
I really hated that ugly array of arrays.
Here's a simpler way to do it, I think:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>met@verse Test</title>
<style type="text/css">
#myMap {
font-family: courier;
font-size: x-large;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script type="text/javascript">
(
function()
{
var map = [
"#####",
"#...#",
"#...#",
"#...#",
"#####"
];
function replaceCharAt( str, char, at )
{
var temp = str.split("");
temp[at] = char;
return temp.join("");
}
function plotCurrentLocation( x, y )
{
// clone the master map
var useMap = [].concat(map);
// replace the appropriate character in the appropriate row:
useMap[y] = replaceCharAt( useMap[y], "@", x );
// dump it all out as a single string to the div's contents:
document.getElementById("myMap").innerHTML =
useMap.join("<br/>");
}
// demo that it works
var userx = 3;
var usery = 2;
plotCurrentLocation( userx, usery );
}
)();
</script>
</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
But that doctype is valid for any version of HTML except for HTML 1 (which didn't have the concept of a doctype) - it is simply the short version of any of the (X)HTML doctypes with the version not specified.
Didn't Netscape 3 support HTML 2?
I agree that the HTML is probably not aimed at that browser but the JavaScript definitely was.
Oh, yes, <!DOCTYPE html> was valid. But nobody back then used it. That's all I meant.
I was using doctypes with Netscape 4 - it has always made validating to the standards easier.
I do know that Netscape 2 didn't recognise doctypes and simply displayed it as part of the text of the page but it worked fine with Netscape 4 and I think even Netscape 3 would recognise it.
Doctypes weren't actually used for anything except validating against the standard until Microsoft needed a way to distinguish between pages written to follow the draft CSS2 standard that IE5 implemented and the somewhat different final standard. That's what happens when browsers try to implement proposed standards before they are finalised. It would be just as if a browser were to decide to implement HTML5 in 2015 (by which time HTML5 should be about as close to becoming a standard as CSS2 was when IE5 implemented it - and with about the same potential for changes).
Before you post, read our: 
(by which time HTML5 should be about as close to becoming a standard as CSS2 was when IE5 implemented it - and with about the same potential for changes).
