Still I find them fun to play from time to time. Perhaps one days I will get round to actually writing more than a toy one. In this entry I am just going to present a simple html interface for such game.
I initially attempted to use iscroll to provide some nice scrolling but hit problems when moving the input bar into the scroll area I just could not get it accept input so eventually I have settled on JScrollPane. As I am using JQuery anyway it was not really much of an issue to install this plug in.
The basic idea is to have an HTML unordered list to represent the game. The last list item is the input area. As the player enters commands the response can be displayed as a list element that we insert. We automatically scroll to the bottom after each response.
Lets start with the html code
<html>
<head>
<link rel="stylesheet" href="jquery.jscrollpane.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="container">
<ul id="text-items">
<li id='end-buffer' > <input type="text" id="text-input" name="" value="" /></li>
</ul>
</div>
</body>
</html>
As you can see the html is pretty simple. We just create the container and the unordered list.
Our css file as also pretty simple as I comment on this later.
#container{
width:640px;
margin-left: auto;
margin-right: auto;
height:400px;
}
#text-input {
width:100%;
}
#container li{
list-style-type:none;
}
Yep, we pretty much just centre up my elements and turn bullet points off for my list elements.
The JavaScript makes use of JQuery and of course JScrollPane a JQuery plug in.
function start(){
var ti = $('#text-input');
$('#container').jScrollPane();
var scrollApi = $('#container').data('jsp');
ti.on("keyup", function(evt) {
if(evt.keyCode === 10 || evt.keyCode === 13){
var li = $("<li/>").text(ti.val());
$("#end-buffer").before(li);
scrollApi.reinitialise();
scrollApi.scrollToBottom();
ti.val("");
}
});
};
We attach a callback to out input element to monitor when return is pressed. Create an element that just echoes back your input and then scroll down to the bottom so you can still see the input line. Of course in a real game you would have to do something other than just echo back the result...You will notice I have not done any styling. The colours are pretty uninspiring and the overall it does not feel polished. A lot of this polish is partially determined by the type of game and partially by your own preferences how you think it should work.
A couple of obvious things is an input history so you can cursor though old commands and probably putting a limit on the maximum number of list items in the output display. Just remove the oldest one when adding a new one and there are more then say 100 list items.
The other thing I am not so keen on it having the text entry at the top when you first start. This may not be much of an issue if you have a back story to push the input down. I was also tempted to blat in a lot of empty list items to force it down the screen.
I could go on about the limitations but this is really on meant to be an example to show how simple it can be to get started.
Comments are welcome.
