Javascript game development 5: input

A computer game without a possibility to interact is a movie. We need to evaluate the human interface devices 😛 Let’s restrict that to mouse and keyboard.
So I created a new module thats care about all input events and provides them over an interface to the whole program.

Move your mouse over it!
Result of this chapter

download chapter

The code of the new module so far:
input.js

window.modules.input = (function($) {
 
    return {
 
        keyMap: [],
        mouseX: 0,
        mouseY: 0,
        mouseButtons: [],
 
        init: (function() {
 
            /*
             *  initialize the keyMap array with 256 times false
             *  every index represent one key from the keyboard
             *  the same with mouse buttons (max 5)
             */   
            for(var i = 0; i < 256; this.keyMap[i++] = false);
            for(var i = 0; i < 5; this.mouseButtons[i++] = false);
 
            /*
             *  event for complete page
             *  store the status for every key triggered be keydown / keyup events
             *  same with mousebuttons
             *  refire press / click event
             *  provide methodes as interface
             */ 
            $("*").on("keydown", function(event) {
 
                window.modules.input.keyMap[event.which] = true;
 
            }).on("keyup", function(event) {
 
                window.modules.input.keyMap[event.which] = false;
 
            }).on("keyPress", function(event) {
 
                $(window.modules.input).trigger("keypress", event);
 
            }).on("mousedown", function(event) {
 
                window.modules.input.mouseButtons[event.which] = true;
 
            }).on("mouseup", function(event) {
 
                window.modules.input.mouseButtons[event.which] = false;
 
            }).on("click", function(event) {
 
                $(window.modules.input).trigger("click", event);
 
            }).on("mousemove", function(event) {
                /*
                 *  pageX, pageY is the mouseposition related to the whole window
                 *  we subtract  the element (canvas screen) position
                 *  to relate it on our screen
                 */
 
                window.modules.input.mouseX = event.pageX - $(this).position().left;
                window.modules.input.mouseY = event.pageY - $(this).position().top;
 
            });
 
        }),
 
        isKeyDown: (function(keyCode) {
            return window.modules.input.keyMap[keyCode];
        }),
 
        isMouseDown: (function(button) {
            return window.modules.input.mouseButtons[button];
        }),
 
        mousePosition: (function() {
            return {x: this.mouseX, y: this.mouseY};
        })
 
 
    };
 
})(jQuery);

It doesn’t look pretty because it’s “one line followed be one line” – structure but it does what it should.

Examples:

//check if enter key is down (13)
if(window.modules.input.isKeyDown(13)) {...
 
//check if left mouse button is down (1)
if(window.modules.input.isMouseDown(1)) {...
 
//get mouse x position
window.modules.input.mousePosition().x

To prevent the context menu is shown when the user right click on the page, I added this to the body tag in the index.html:

<body oncontextmenu="return false;">

For testing purposes I changed the main.js, so the animations color is changing with vertical and the starting rotation with the horizontal mouse movement.

majn.js (changed part)

//get mouse position from input object
var mousePosition = modules.input.mousePosition();
var startValue = mousePosition.x * 6;
var colorValue = mousePosition.y;
 
for(i = startValue; i &lt; startValue + 512; i++)
{
    v.x(Math.sin(i));
    v.y(Math.cos(i));
 
    v.mul(i % 128);
    v.add(new objects.vector(160, 120));
 
    modules.screen.setPixel(
        v.x(),
        v.y(),
        ((colorValue * 4) % 256),
        ((colorValue * 2) % 256),
        (colorValue % 256)
    );
 
}