Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Quote Originally Posted by felgall View Post
    What browser are you expecting your visitors to use - Netscape 3 perhaps?
    Hmmm...
    Code:
    <!doctype html>
    Probably not. <grin/>
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    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>
    Last edited by Old Pedant; 01-30-2013 at 10:06 PM.
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    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.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Oh, yes, <!DOCTYPE html> was valid. But nobody back then used it. That's all I meant.
    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.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •