CodingForums.com - Write out a variable via JS in a specific font

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Write out a variable via JS in a specific font (http://www.codingforums.com/showthread.php?t=286748)

coolguy8

01-30-2013 05:35 PM

Write out a variable via JS in a specific font

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:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>met@verse Test</title>

</head>
<body>
<script>
var map =
[ ['#','#','#','#','#'],
['#','.','.','.','#'],
['#','.','.','.','#'],
['#','.','.','.','#'],
['#','#','#','#','#']];

var userx = 1;
var usery = 1;

function print_2d_string_array (array)
{
for (row=0; row < array.length; row++)
{
for (col = 0; col < array.length; col++)
{
if (userx==col && usery==row)
{
document.write('<font face=courier>@</font>');
}
else
{
document.write(array[row][col]);
}

}
document.write("<br>");

}
}

print_2d_string_array (map);

</script>

</body>
</html>

felgall

01-30-2013 06:13 PM

What browser are you expecting your visitors to use - Netscape 3 perhaps?

That was about the last browser that needed document.write and font tags.

All modern browsers expect fonts to be set in the CSS.

You can update the HTML from JavaScript using innerHTML and update the font using style.font

Old Pedant

01-30-2013 09:46 PM

Quote:

Originally Posted by felgall (Post 1309818)

What browser are you expecting your visitors to use - Netscape 3 perhaps?

Hmmm...

Code:

<!doctype html>

Probably not. <grin/>

Old Pedant

01-30-2013 10:01 PM

W.T.H. Why not? Even if this surely is homework.

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>

Old Pedant

01-30-2013 10:08 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>

felgall

01-31-2013 01:50 AM

Quote:

Originally Posted by Old Pedant (Post 1309862)

Hmmm...

Code:

<!doctype html>

Probably not. <grin/>

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.

Old Pedant

01-31-2013 01:53 AM

Oh, yes, <!DOCTYPE html> was valid. But nobody back then used it. That's all I meant.

felgall

01-31-2013 09:10 AM

Quote:

Originally Posted by Old Pedant (Post 1309905)

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).

All times are GMT +1. The time now is 11:43 PM.