Monday, 5 August 2013

User Input and Hashmaps

There is only one beginners trick to user-input.  That trick is not to rely on the system's own primary input but to buffer it.

Let me explain.  We will only be dealing with the keyboard for our games.  Phone/slider input is possible, but a different ball-game at present.  There are two events we are interested in.  A key-down event, and a key-up event.

If we were to solely rely on the key-status itself without capturing it properly, we'd get input that would resemble the typo-matic rate of your keyboard.  You can try it for yourself.  Open up notepad if you're using windows and hold down the 'A' key.  At first there is a pause, and then the letter repeats until you let go.  We don't want our game to behave like that, its unnatural and looks bad.

Let me introduce your new best friend first, before we go into any more detail.  Its about time we met jQuery.  jQuery is an incredible library (free too) that is used by just about everyone writing java-script.  All we need to do is download (if you're that way inclined) and host it on your own web-site, or, given the power of the Internet, link to the library from your own web-page.

You will need to get used to jQuery, as you would with any new library.  For now, all you need to know is that anything to do with jQuery starts with the dollar symbol ($).

Typically, jQuery is used to reference objects in your DOM.  Supposed you have the following html;

<html>
<body>
<div id='div1'></div>
</body>
</html>

Nothing very exciting I'm afraid, but this is just to give you the initial basics of jQuery.  There are plenty of tutorials on how to use it.  jQuery would refer to the <div> inside this html page using its id like so;

$('#div1').html('hi there!');

This statement means, put the string "hi there!" inside the html of the DOM object with id 'div1'.  Takes a little getting used to.  The hash (#) tells jQuery that the thing followig it is a DOM element id.

jQuery can refer to other aspects of the DOM too.  This is what we're interested in right now.

function KeyboardMapper()
{
  var self = this;
  var keymap = { "left": false, "right": false, "up": false, "down": false };

  this.left = function( isDown )
  {
    keymap["left"] = isDown;
  };

  this.right = function( isDown )
  {
    keymap["right"] = isDown;
  };

  this.up = function( isDown )
  {
    keymap["up"] = isDown;
  };

  this.down = function( isDown )
  {
    keymap["down"] = isDown;
  };

  this.showKeys = function( context )
  {
    context.fillStyle = "#ffffff"; // white colour for text
    context.font = "12px Tahoma"; // font-size and name

    if ( keymap["left"] )
      context.fillText( "left-arrow key is down", 10, 10 );
    else
      context.fillText( "left-arrow key is up", 10, 10 );

    if ( keymap["right"] )
      context.fillText( "right-arrow key is down", 10, 30 );
    else
      context.fillText( "right-arrow key is up", 10, 30 );

    if ( keymap["up"] )
      context.fillText( "up-arrow key is down", 10, 50 );
    else
      context.fillText( "up-arrow key is up", 10, 50 );

    if ( keymap["down"] )
      context.fillText( "down-arrow key is down", 10, 70 );
    else
      context.fillText( "down-arrow key is up", 10, 70 );
  };
}

// create the object
var keyObject = new KeyboardMapper();

$(document.body).on('keydown', function(e)
{
  switch (e.which)
  {
    case 37:
      keyObject.left(true); break;
    case 39:
      keyObject.right(true); break;
    case 40:
      keyObject.down(true); break;
    case 38:
      keyObject.up(true); break;
  }
});

$(document.body).on('keyup', function(e)
{
  switch (e.which)
  {
    case 37:
      keyObject.left(false); break;
    case 39:
      keyObject.right(false); break;
    case 40:
      keyObject.down(false); break;
    case 38:
      keyObject.up(false); break;
  }
});

The statements above use jQuery to hook into the document's (the html page's) key-down and key-up events.  These are special functions that are called by the system when a key goes... down... and... up again.  Don't ask why, but the arrows keys are represented by the following numbers on the keyboard.

left arrow = 37
right arrow = 39
down arrow = 40
up arrow = 38

Each key on the keyboard has a number.  Just Google "java-script event keycode" or go to http://www.asquare.net/javascript/tests/KeyCode.html for a good demonstration of key-codes.

Our little sample again uses a canvas to draw things (get used to it).  The code showing a working sample on how to use the keyboard and how it reacts to your keys can be downloaded here.  The canvas below is a live sample of the code we've been discussing.  Click on it (just to give this page input focus in case it hasn't got it already) and use the arrow keys on your keyboard to see how it works.


Hashmaps

Lets talk about hashmaps.  We've just used our first hashmap in anger.  Hashmaps are wonderful things.  Java-script uses them all the time, and if you're the clever person you are (for reading this blog) you should get used to them as fast as you can.  It seems that these hashmaps are rather central to java-script.

A hashmap is what we in computer science call a data-structure.  A hashmap is a name-value store.  You can put things into a hashmap by name, and retrieve them again by name really efficiently.  There is no need to know how a hashmap works internally.  A hashmap is a data-structure that uses a little bit more memory (usually around 30% more than you're actually storing) for an incredibly fast retrieval speed.

Lets look at an example;

var myHashmap = {};

This creates an empty hashmap called "myHasmap".  We can now put some stuff into it;

myHashmap["peter"] = "this is a hashmap";

This inserts a value string "this is a hashmap" and stores it under the name "peter".  To retrieve the string you put in, just go like

var myValue = myHashmap["peter"];

"myValue" will be "null" if there is nothing stored under "peter".  But in our example, "myValue" will be the string "this is a hashmap".

You could also create a hashmap with a set of values in it from the start, when you create it, as we did in the keyboard example above.

var keymap = { "left": false, "right": false, "up": false, "down": false };

This hashmap hash four values in it with the names "left", "right", "up", and "down".  All their values are initially set to the boolean value false.

A hashmap does not use strings alone.  It can use numbers, and strings for its names, and its values can be anything that java-script can create.  Booleans, numbers, strings, classes (aka. functions in java-script).  I suspect that java-script itself is rather one big hashmap.  For our purposes, and for most purposes to be honest, we tend to use strings for the name/key of a hashmap.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)