Keyboard management

Controls:
Use arrow keys to move elements across the screen.
Click on actors to select them.
This demo features the following elements:
Create events per frame. It is achieved by creating a 'forever' timer and setting a callback on timer tick.
Register a CAAT keyListener function.
Correctly interpret key events.
This code won't run in jsfiddle since the iframe won't allow to capture for keyboard events.
                        /**
                         * Startup it all up when the document is ready.
                         * Change for your favorite frameworks initialization code.
                         */
                        window.addEventListener(
                                'load',
                                function() {
                                    CAAT.modules.initialization.init(
                                            800, 500,
                                            'experiment-holder',
                                            [],
                                            keys
                                            );
                                },
                                false);


                        function keys(director) {

                            var size=               80;
                            var prevTime=           -1;
                            var pixelsPerSecond=    200;
                            var scene=              director.createScene();
                            var selected=           null;
                            var keys=               [0,0,0,0];

                            /**
                             * function to select on-screen actors.
                             * @param e
                             */
                            var mouseClick= function( e ) {
                                if ( selected ) {
                                    selected.setAlpha(1);
                                    selected.emptyBehaviorList();
                                }
                                this.setAlpha(.5);
                                this.emptyBehaviorList();
                                this.addBehavior(
                                    new CAAT.RotateBehavior().
                                            setValues( 0, 2*Math.PI ).
                                            setFrameTime( 0, 5000 ).
                                            setCycle( true )
                                ).addBehavior(
                                    new CAAT.ScaleBehavior().
                                            setValues( .8, 1.5, .8, 1.5 ).
                                            setFrameTime( 0, 3500 ).
                                            setPingPong().
                                            setCycle( true )
                                );
                                this.parent.setZOrder(this,Number.MAX_VALUE);
                                selected= this;
                            };

                            /**
                             * This timer makes the process to increment actor position based on elapsed time.
                             * it will move pixelsPerSecond pixels on any direction.
                             */
                            scene.createTimer( scene.time, Number.MAX_VALUE, null,
                                function(time, ttime, timerTask) {
                                    if ( !selected ) {
                                        return;
                                    }

                                    var ottime= ttime;
                                    if ( -1!=prevTime ) {
                                        ttime-= prevTime;

                                        selected.x += (ttime/1000)*pixelsPerSecond * (keys[1]-keys[0]);
                                        selected.y += (ttime/1000)*pixelsPerSecond * (keys[3]-keys[2]);

                                        if ( selected.x > director.width-20 ) {
                                            selected.x= director.width-20;
                                        } else if ( selected.x<-20 ) {
                                            selected.x= -20;
                                        }
                                        if ( selected.y > director.height-20 ) {
                                            selected.y= director.height-20;
                                        } else if ( selected.y<-20 ) {
                                            selected.y= -20;
                                        }
                                    }

                                    prevTime= ottime;
                                },
                                null
                            );


                            CAAT.registerKeyListener( function kl( keyEvent ) {

                                if ( !selected ) {
                                    return;
                                }

                                if ( keyEvent.getKeyCode()===CAAT.Keys.UP ) {
                                    keyEvent.preventDefault();
                                    keys[2]= ( keyEvent.getAction()==='up' ) ? 0 : 1;
                                }
                                if ( keyEvent.getKeyCode()===CAAT.Keys.DOWN ) {
                                    keyEvent.preventDefault();
                                    keys[3]= ( keyEvent.getAction()==='up' ) ? 0 : 1;
                                }
                                if ( keyEvent.getKeyCode()===CAAT.Keys.LEFT ) {
                                    keyEvent.preventDefault();
                                    keys[0]= ( keyEvent.getAction()==='up' ) ? 0 : 1;
                                }
                                if ( keyEvent.getKeyCode()===CAAT.Keys.RIGHT ) {
                                    keyEvent.preventDefault();
                                    keys[1]= ( keyEvent.getAction()==='up' ) ? 0 : 1;
                                }

                            });

                            var s0 = new CAAT.Actor().
                                    setFillStyle( '#f00' ).
                                    setBounds( Math.random()*director.width, Math.random()*director.height, size, size );
                            scene.addChild(s0);
                            s0.mouseClick= mouseClick;

                            var s1 = new CAAT.ShapeActor().
                                    setShape( CAAT.ShapeActor.prototype.SHAPE_CIRCLE ).
                                    setFillStyle( '#0f0' ).
                                    setBounds( Math.random()*director.width, Math.random()*director.height, size, size );
                            scene.addChild(s1);
                            s1.mouseClick= mouseClick;

                            var s2= new CAAT.StarActor().
                                    setBounds( Math.random()*director.width, Math.random()*director.height, size, size ).
                                    setStrokeStyle( "#00f" ).
                                    setFilled( false ).
                                    setOutlined( true ).
                                    initialize( 12, size, size/2 );
                            scene.addChild( s2 );
                            s2.mouseClick= mouseClick;

                            s0.mouseClick();
                        }