• Jump To … +
    CONTRIBUTING.md MIT-LICENSE.md README.js.md audio.js audio/null_sound.js audio/sound.js audio/sound_instance.js core.js graphics.js graphics/animation.js graphics/canvas.js graphics/image.js graphics/sprite.js graphics/sprite_sheet.js keyboard.js media.js mouse.js timer.js timer/after.js timer/every.js timer/tween.js touch.js
  • ¶

    mouse.js

    (function() {
  • ¶

    Luv.Mouse

    Luv.Mouse = Luv.Class('Luv.Mouse', {
  • ¶

    This function creates a mouse handler for a mouse game. It is usually instantiated directly by the main Luv() function, you will probably not need to call Luv.Mouse() yourself:

      var luv = Luv();
      luv.mouse // Already instantiated mouse handler
      init: function(el) {
    
        var mouse  = this;
    
        mouse.x               = 0;
        mouse.y               = 0;
        mouse.pressedButtons  = {};
        mouse.wheelTimeOuts   = {};
  • ¶

    The mouse module works by attaching several event listeners to the given el element. That's how mouse position, button presses and wheel state are detected.

        var handlePress = function(button) {
          mouse.pressedButtons[button] = true;
          mouse.onPressed(mouse.x, mouse.y, button);
        };
    
        var handleRelease = function(button) {
          mouse.pressedButtons[button] = false;
          mouse.onReleased(mouse.x, mouse.y, button);
        };
    
        var handleWheel = function(evt) {
          evt.preventDefault();
          var button = getWheelButtonFromEvent(evt);
  • ¶

    The 'wheel has stopped scrolling' event is triggered via setTimeout, since browsers don't provide a native 'stopped scrolling' event

          clearTimeout(mouse.wheelTimeOuts[button]);
          mouse.wheelTimeOuts[button] = setTimeout(function() {
            handleRelease(button);
          }, Luv.Mouse.WHEEL_TIMEOUT * 1000);
          handlePress(button);
        };
  • ¶

    mousemove is particularly laggy in Chrome. I'd love to find a better solution

        el.addEventListener('mousemove', function(evt) {
          var rect = el.getBoundingClientRect();
          mouse.x = evt.pageX - rect.left;
          mouse.y = evt.pageY - rect.top;
          mouse.onMoved(mouse.x, mouse.y);
        });
    
        el.addEventListener('mousedown', function(evt) {
          handlePress(getButtonFromEvent(evt));
        });
    
        el.addEventListener('mouseup', function(evt) {
          handleRelease(getButtonFromEvent(evt));
        });
    
        el.addEventListener('DOMMouseScroll', handleWheel); // firefox
        el.addEventListener('mousewheel', handleWheel); // everyone else
      },
  • ¶

    Returns the x coordinate where the mouse is (relative to the DOM element)

      getX: function() { return this.x; },
  • ¶

    Returns the x coordinate where the mouse is (relative to the DOM element)

      getY: function() { return this.y; },
  • ¶

    Returns both the x and y coordinates of the mouse, as an object of the form `{x: 100, y:200}

      getPosition: function() {
        return {x: this.x, y: this.y};
      },
  • ¶

    onPressed is an overridable callback that is called when any of the mouse buttons is pressed. button is a string representing a button name ("l" for left, "m" for middle, "r" for right).

      var luv = Luv();
      luv.mouse.onPressed = function(x,y,button) {
        console.log("Mouse button " + button + " was pressed in " + x + ", " + y);
      }
      onPressed: function(x,y,button) {},
  • ¶

    Works the same as onPressed, but is called when a button stops being pressed.

      onReleased: function(x,y,button) {},
    
      onMoved: function(x,y) {},
  • ¶

    Returns true if a button is pressed, false otherwhise. Usually used inside the update loop:

      var luv = Luv();
      luv.update = function(dt) {
        if(luv.mouse.isPressed('l')) {
          console.log('Left mouse button pressed');
        }
      };
      isPressed: function(button) {
        return !!this.pressedButtons[button];
      }
    });
  • ¶

    The mouse considers it has stopped scrolling after 20ms

    Luv.Mouse.WHEEL_TIMEOUT = 0.02;
  • ¶

    Internal variable + function to transform DOM event magic numbers into human button names (left, middle, right)

    var mouseButtonNames = {1: "l", 2: "m", 3: "r"};
    var getButtonFromEvent = function(evt) {
      return mouseButtonNames[evt.which];
    };
  • ¶

    Internal function to determine the mouse weel direction

    var getWheelButtonFromEvent = function(evt) {
      var delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)));
      return delta === 1 ? 'wu' : 'wd';
    };
    
    }());