Realmscape

The Very Beginning

05 Aug 2015  -  Jon Hall

Start at the start.
That's the most common feedback from the most rookie followers of the blog series so far.

So although this may slow down the rate at which new posts are made, I'll be making much more of an effort to explain almost line‐by‐line what the code is doing, along with a complete working example to accompany each post.
This way, advanced readers can skim through the new stuff, while people not yet comfortable with JavaScript can use the working example to experiment further.

In an attempt to develop a modular engine with only the bare essentials at the core, I'll begin with an interface—so we can see the reactions to our actions.
Forget about 3D graphics, and even 2D for just a minute here as we venture back to text-based interactions. We can concentrate on the inner workings of our game logic without the added complexities of rendering output, lighting, shapes and models, post-processing effects, and pretty visuals.

Setting up a text interface

For those already familiar with the Developer Tools built into their browser, you'll be aware of the Web Console[1] and being able to use the debugging console[2] as an interface for text output via methods like console.log().
For everyone else, this post will take you through setting up a Div element on an HTML page and using that element as a wrapper for ordered text output.

Beginning with an empty HTML document, we can add a Div element to the Body with a bit of styling to make it look pretty. The style is some standard CSS, setting a height and width for the element, giving it a fine black border, and asserting a monospace font so that each character will be of a similar width (handy later on, for aligning text on different rows)

<BODY>
 <DIV id="console1" style="height:80px;width:350px;border:1px solid black;font-family:monospace;"></DIV>
</BODY>
The styled Div element nestled in the Body

A script tag is appended to the end of the Body, so the following JavaScript is executed once the DOM has been set up. This script ensures the essential styles are applied to the Div element: Vertical scrolling, and a maximum height.

<SCRIPT type="text/javascript">
//Prep DOM
var dev = document.getElementById("console1"); //Get a reference to our element
dev.style.overflowY = "scroll"; //Force a vertical scrollbar
dev.style.maxHeight = dev.style.height || "200px"; //Assign a max-height, if none is specified
</SCRIPT>

</BODY>
Assert the overflowY and maxHeight styles

Up in the Head of the HTML, we add a JavaScript function for 'printing' a new line into our pseudo-console Div element.
Each new line is a P element containing our new content, appended to the end of our Div element, which is scrolled vertically so the new line (being below all the others) is visible.

function addLine(elem,content){
 var c = document.getElementById(elem); //Get a reference to the element
 var line = document.createElement('p'); //Create a P element to wrap our content
 line.setAttribute("id","p"+c.children.length); //Assign that element an ID
 line.innerHTML = content; //Wrap the element around our content
 c.appendChild(line); //Append the wrapper to our 'console' element
 line.scrollIntoView(); //Method to scroll new line into view
}
JavaScript function to add a line to our output

A style is declared for all P elements, so our lines of text have no margin between them.

<STYLE type="text/css">
p {
 margin:0;
}
</STYLE>
Give our paragraphs a margin of 0

We now have a functional element to which we can append and display arbitrary HTML content wrapped in P elements, the only issue is that we can only add to it via JavaScript using our addLine() function—not directly accessible on the page itself without using the debugging console.

<html>
 <head>
  <script type="text/javascript">
function addLine(elem,content){
 var c = document.getElementById(elem);
 var line = document.createElement('p');
 line.setAttribute("id","p"+c.children.length);
 line.innerHTML = content;
 c.appendChild(line);
 line.scrollIntoView();
}
  </script>
  <style type="text/css">
p {
 margin:0;
}
  </style>
 </head>
 <body>
  <div id="console1" style="height:80px;width:350px;border:1px solid black;font-family:monospace;"></div>
  <script type="text/javascript">
//Prep DOM
var dev = document.getElementById("console1");
dev.style.overflowY = "scroll";
dev.style.maxHeight = dev.style.height || "200px";
  </script>
 </body>
</html>
The entire document so far

Interacting with the interface

A good exercise for you to attempt is adding some form of interaction and output, either via a button, or keystrokes, or a text prompt.
I'd suggest you try to make use of a JavaScript function to process the interaction and display a result, both for readability and future maintainability. There's nothing like coming back to an old project and having to go through the entire thing to figure out what's going on.

Challenges to be aware of in this example are null or zero-length interactions from the user, as well as attempts at injecting malicious code via the prompt.

Try it out yourself

An interactive example of the complete code used in this post can be found in the Realmscape Labs, and a copy can be found on GitHub.

Comments, Feedback, and Discussion can be found on our subreddit

 

[1] MDN Web Console documentation
[2] MDN Console Interface documentation