Realmscape

05 August 2015  -  Jon Hall

Text Interface

This interactive demonstration is linked to from The Very Beginning in our blog series on Game Engines in JavaScript.

Interactive Example

Use the 'Interact' button to inject text into the vertically scrolling Div element

 

Source Code

<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(); //Method to scroll new line into view
}
function interact(interaction){
	if(interaction != null && interaction.length >= 1){
		console.log(interaction);
		addLine('console1',interaction);
	}
}
  </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>
<button id="consoleInteract" onclick="javascript:interact(window.prompt('Output to console:'));">Interact</button>

<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 full example code, as found on GitHub