breakout.js

/**
 * How to use ? Add this in the address bar :
 * javascript:var boscript=document.createElement('script');boscript.src='https://raw.github.com/gist/2277308/breakout.js';document.head.appendChild(boscript); 
 */
(function () {

var loadBreakout,
    d = document,
    w = window;

if (!w.YUI) {
  console.log('loading YUI...');
  var yScript = d.createElement('script');
  yScript.src='http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js';

  var done = false;

  yScript.onload = yScript.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
      done = true;
      loadBreakout();
    }
  };

  d.head.appendChild(yScript); 
}
else {
  loadBreakout();
}

loadBreakout = function () {
  console.log('loading breakout...');

  YUI().use('node', 'get', function (Y) {

    var paddle,
        paddleWidth = 80,
        mouseMoveHandler;

    paddle = Y.Node.create('<div id="breakout-paddle"></div>');
    paddle.setStyles({
      width: paddleWidth+'px',
      height: '12px',
      borderRadius: '2px',
      position: 'fixed',
      bottom: '10px',
      background: 'red'
    });
    paddle.appendTo(d.body);

    mouseMoveHandler = function (e) {
      paddle.setStyle('left', e.clientX - Math.floor(paddleWidth / 2) + 'px');
    };  

    Y.one(w).on('mousemove', mouseMoveHandler);

  });

};

}());