Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

About Keyboard Hero

Demonstrates

  • glow.anim
  • glow.events

Overview

Keyboard Hero demonstrates how the Glow modules glow.anim and glow.events can be used together to create a unique and fun interaction for the user.

glow.anim is used to move each word down the 'slope' (a section of the game's interface). The animation is used with a tween to control the speed of the word as it moves downward.

glow.events is used in two places to add event listeners. The first event listener is added to the word animation, the code waits for the animation to complete before continuing. The second event listener is assigned to the keyboard to capture user input.

Animating words on the slope

Each time a word is moved down the slope, this method is called:

glow.anim.css(el, 1,
  {
    "top": {
      to: (parseInt(el.css("top"))+step_size)
    },
    "font-size": {
      from: el.css("font-size"),
      to: ( parseInt( el.css("font-size") ) +10 )
    }
  },
  {
    tween: glow.tweens.easeIn()
  }
);

Lets go through the code:

el is a glow.dom.NodeList object that references the element that we want to animate. Because we are going to refer to this element many times a shortcut is made for it before the method call:

var el = glow.dom.get("div#word");

Glow.anim.css is a method that allows you to animate an element by changing the values of CSS properties. The method call has four parameters:

el
The element that the animation will be applied to.
1
The duration of the animation in seconds.
JSON object
This object describes the CSS properties to animate.
JSON object
An optional options object. Here we use it to define the type of tween to use.

The first JSON object describes the CSS properties to animate, lets look at that in detail:

  {
    "top": {
      to: (parseInt(el.css("top"))+step_size)
    },
    "font-size": {
      from: el.css("font-size"),
      to: ( parseInt( el.css("font-size") ) +10 )
    }
  }

Two CSS properties are changed, the distance that the Element Is from the top of it's parent element, and the font size. Changing both of these properties at once gives the user the impression that the word is moving towards them.

Each CSS property declared In this JSON object must have a 'to' value declared, and optionally can have a 'from' value declared. We change the CSS property 'top', giving it a value of it's own 'top' value plus the value in the variable 'step_size'.

parseInt(el.css("top"))+step_size

el being a glow.dom.NodeList has a number of methods assigned to it, one of them being css which allows you to get and set CSS values. Because the method call el.css("top") returns the value as '2px', we need to remove the 'px' part of the value. We can do that easily using the native JavaScript function 'parseInt'.

The Second JSON object is an options object. Here we are telling glow.anim.css to use the tween glow.tweens.easeIn() with the animation:

  {
    tween: glow.tweens.easeIn()
  }

glow.anim.css has many other options that you can use. To view them in full, and see other examples of how to use the method, check out the API documentation

Capturing user input

Keyboard Hero works by matching what the user types against the current word that needs to be entered. We capture this by applying two glow.events.addListener methods to the body element:

glow.events.addListener('body', 'keydown', function(e) {
  e.preventDefault();
  var key = String.fromCharCode(e.keyCode).toLowerCase();
  if ('qwertyuiopasdfghjklzxcvbnm'.indexOf(key) != -1)
  {
    glow.dom.get('span#key_' + key).addClass('keydown');
    add_to_user_entry(key);
  }
});
glow.events.addListener('body', 'keyup', function(e) {
  var key = String.fromCharCode(e.keyCode).toLowerCase();
  if ('qwertyuiopasdfghjklzxcvbnm'.indexOf(key) != -1)
  {
    glow.dom.get('span#key_' + key).removeClass('keydown');
  }
});

We call the method glow.events.addListener with three parameters:

'body'
The element that the event listener will be applied to.
'keydown'
The type of event to listen for
function() {...}
The code to execute when the event is performed.

The first event listener executes when the user presses down a key on the keyboard. Lets look at the code in more detail:

e.preventDefault();

e is a glow.events.Event object. This has the method e.preventDefault() that when called stops the default action associated with the event from firing. We use it here incase the user presses the tab or backspace key, pressing these keys would either load the previous page from the browser history or cause the body element to lose focus.

var key = String.fromCharCode(e.keyCode).toLowerCase();

The variable key stores the value of the character that comes from the key pressed. e.keyCode returns a number that we need to change into the relevent character. The native JavaScript function String.fromCharCode does this for us. Finally, we convert the character to lower case using another native JavaScript function String.toLowerCase.

The variable key now needs to checked to see if it matches one of the characters we permit to be entered onto the screen:

if ('qwertyuiopasdfghjklzxcvbnm'.indexOf(key) != -1)

We use (another) String function to do this called String.indexOf. If the value of key is not in the string 'qwertyuiopasdfghjklzxcvbnm' then a value of -1 will be returned. So, we check to see if the value is not '-1', and if so execute the following two lines of code:

glow.dom.get('span#key_' + key).addClass('keydown');
add_to_user_entry(key);

The first line uses glow.dom.get to retrieve the span tag in the markup that makes the keyboard, and adds the class 'keydown' to it. The next line calls the function that adds the value of key to the screen.

The second event listener executes when the user depresses a key on the keyboard. The code executed in this listener is the same as the first event listener, except for the contents of the if statement:

glow.dom.get('span#key_' + key).removeClass('keydown');

This code uses glow.dom.get to retrieve the span tag in the markup that makes the keyboard, and removes the class 'keydown' from it.

Events and animations working together

So we've seen how animations and events work on their own, now let's take a look at them working in together.

Calling the method glow.anim.css causes the animation to start immediately. This default behavious can be overridden if you assign the method to a variable:

// Starts straight away
glow.anim.css('div#movingObject', 1,
  {
    "top": {
      to: (20)
    }
);

// Waits to be told to start
var myAnim = glow.anim.css('div#movingObject', 1,
  {
    "top": {
      to: (20)
    }
);

This means we can play around with our animation object before telling it to start animating. So let's apply an event listener onto the animation object:

// Create animation object
var myAnim = glow.anim.css('div#movingObject', 1,
  {
    "top": {
      to: (20)
    }
);

// Add an event listener to the animation object
glow.events.addListener(myAnim, "complete", function() {
  alert('Glowed');
});

// Tell the animation object to start animating
myAnim.start();

When this animation now completes, an alert box will appear on the screen with the message: 'Glowed'.

Summary

The key goals of this demonstration are:

  • To show how you can make elements on the page animate.
  • To show how you can use event listeners to interate with the user.
  • To show how you can use events and animations together.

API Quick Reference

JavaScript is required to use the quick reference

Related links

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.