git @ Cat's Eye Technologies yoob.js / master src / yoob / joystick.js
master

Tree @master (Download .tar.gz)

joystick.js @master — raw · history · blame 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
/*
 * This file is part of yoob.js version 0.5
 * Available from https://github.com/catseye/yoob.js/
 * This file is in the public domain.  See http://unlicense.org/ for details.
 */
if (window.yoob === undefined) yoob = {};

/*
 * Emulates a joystick.  Be default, this is with the cursor keys and (either)
 * control key as the fire button, but the keys can be reconfigured by changing
 * values in the keyMap map, for example:
 *
 *     var joystick = new yoob.Joystick().init();
 *     joystick.keyMap[32] = joystick.fire;
 *     joystick.keyMap[17] = undefined;
 *
 * Control is used by default rather than space because, on all browsers I have
 * tried on both Ubuntu (FF, Chrome) and Windows (FF, IE), down+right and
 * up+left combinations both prevent the space key from registering.
 *
 * Some finesse is built into this design; for example, the user may hold
 * down right, then additionally hold down left (and the stick will register
 * no horizontal movement), then release right (and the stick will then
 * register leftward movement.)
 *
 * The joystick may either be used in a polled mode (and if you are animating
 * using setInterval or setTimeout or requestAnimationFrame, you may wish to
 * use this method; simply poll the joystick's dx and dy and buttonPressed
 * on each frame) or evented mode, by assigning an onchange method.  (see
 * eg/joystick.html for an example)
 */
yoob.Joystick = function() {
    this.init = function() {
        this.dx = 0;
        this.dy = 0;
        this.leftPressed = false;
        this.rightPressed = false;
        this.upPressed = false;
        this.downPressed = false;
        this.buttonPressed = false;
        this.keyMap = {
            17: this.fire,
            37: this.left,
            38: this.up,
            39: this.right,
            40: this.down
        };
        this.onchange = undefined;
        return this;
    };

    this.fire = function(obj, pressed) {
        if (obj.buttonPressed === pressed) return;
        obj.buttonPressed = pressed;
        if (obj.onchange !== undefined) obj.onchange();
    };

    this.left = function(obj, pressed) {
        if (obj.leftPressed === pressed) return;
        obj.leftPressed = pressed;
        obj.dx = (obj.leftPressed ? -1 : 0) + (obj.rightPressed ? 1 : 0);
        if (obj.onchange !== undefined) obj.onchange();
    };

    this.up = function(obj, pressed) {
        if (obj.upPressed === pressed) return;
        obj.upPressed = pressed;
        obj.dy = (obj.upPressed ? -1 : 0) + (obj.downPressed ? 1 : 0);
        if (obj.onchange !== undefined) obj.onchange();
    };

    this.right = function(obj, pressed) {
        if (obj.rightPressed === pressed) return;
        obj.rightPressed = pressed;
        obj.dx = (obj.leftPressed ? -1 : 0) + (obj.rightPressed ? 1 : 0);
        if (obj.onchange !== undefined) obj.onchange();
    };

    this.down = function(obj, pressed) {
        if (obj.downPressed === pressed) return;
        obj.downPressed = pressed;
        obj.dy = (obj.upPressed ? -1 : 0) + (obj.downPressed ? 1 : 0);
        if (obj.onchange !== undefined) obj.onchange();
    };

    this.attach = function(element) {
        var $this = this;
        element.addEventListener('keydown', function(e) {
            var u = $this.keyMap[e.keyCode];
            if (u !== undefined) {
                u($this, true);
                e.cancelBubble = true;
                e.preventDefault();
            }
        }, true);
        element.addEventListener('keyup', function(e) {
            var u = $this.keyMap[e.keyCode];
            if (u !== undefined) {
                u($this, false);
                e.cancelBubble = true;
                e.preventDefault();
            }
        }, true);
    };
};