joelongstreet/bangproof.html

## bangproof.html
<!DOCTYPE html>
<html>
    <head>
        <title>Bang Proof</title>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
        <script src='http://code.jquery.com/jquery-1.10.1.min.js' type='text/javascript'></script>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
        <script>
            $(function(){

                // Set the knocker at the bottom of the screen
                $('#knocker').css({'top' : $('#container').height() - $('#knocker').height() });

                // Listen for key press
                $('body').on('keyup', function(e){
                    if(e.keyCode == 32){
                        e.preventDefault();

                        // Animate hammer
                        $('#hammer').animate({rotate : '60deg'}, 250);

                        // Call animate method with random values
                        setTimeout(function(){
                            animateGame({ pos : rando(0, 100), speed : rando(2000, 3000) });
                            $('#hammer').animate({rotate : '0'}, 500);
                        }, 200);
                    }
                });

                window.animateGame = function(opts){
                    // Define default options if none are specified
                    if(!opts || typeof(opts) != 'object') opts = { };
                    if(!opts.pos) opts.pos = 0;
                    if(!opts.speed) opts.speed = 2000;

                    // Collection original positions
                    var originPos       = parseInt($('#knocker').css('top'));
                    var knockerSpeed    = opts.speed + 200;
                    var windowPos       = opts.pos - 50;

                    // Animate both the knocker and the page
                    // Make knocker take slightly longer
                    $('#knocker').animate({
                        top : opts.pos
                    }, knockerSpeed, 'swing');
                    // Scroll the window slightly higher than needed
                    $('html, body').animate({
                        scrollTop : windowPos
                    }, opts.speed);

                    // If a winner...
                    setTimeout(function(){
                        if(opts.pos <= 20){
                            alert('ringer');
                        }
                    }, knockerSpeed);

                    setTimeout(function(){
                        $('#knocker').animate({ top : originPos}, opts.speed);
                        $('html, body').animate({scrollTop : originPos}, opts.speed);
                    }, opts.speed + 400);
                };

                var rando = function(min, max){
                    return Math.random() * (max - min) + min;
                };
            });
        </script>
        <style>
            html, body{
                height          : 100%;
            }
            #container{
                position        : relative;
                height          : 2500px;
            }

            #game{
                position        : absolute;
                right           : 15px;
                width           : 30px;
                height          : 100%;
                background-color: grey;
            }
            #track{
                position        : absolute;
                left            : 5px;
                width           : 20px;
                height          : 100%;
                background-color: red;
            }
            #bell{
                position        : absolute;
                width           : 30px;
                height          : 30px;
                left            : -3px;
                border          : 3px solid orange;
                box-shadow:     : yellow 0 0 2px;
                border-radius   : 30px;
                background-color: yellow;
                transition      : .5s all linear;
            }
            #knocker{
                position        : absolute;
                left            : 5px;
                width           : 20px;
                height          : 30px;
                border-radius   : 5px;
                background-color: silver;
            }
            #hammer{
                position        : absolute;
                left            : -30px;
                bottom          : 0;
                width           : 10px;
                height          : 45px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id='container'>
            <div id='game'>
                <div id='track'></div>
                <div id='knocker'></div>
                <div id='bell'></div>
                <div id='hammer'></div>
            </div>
        </div>

        <script type='text/javascript'>
            /*!
            /**
             * Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
             * scale and rotation independently.
             * https://github.com/zachstronaut/jquery-animate-css-rotate-scale
             * Released under dual MIT/GPL license just like jQuery.
             * 2009-2012 Zachary Johnson www.zachstronaut.com
             */
            (function ($) {
                // Updated 2010.11.06
                // Updated 2012.10.13 - Firefox 16 transform style returns a matrix rather than a string of transform functions.  This broke the features of this jQuery patch in Firefox 16.  It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg.  To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated.  The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules.  You will have to explicitly set the starting scale/rotation value.

                function initData($el) {
                    var _ARS_data = $el.data('_ARS_data');
                    if (!_ARS_data) {
                        _ARS_data = {
                            rotateUnits: 'deg',
                            scale: 1,
                            rotate: 0
                        };

                        $el.data('_ARS_data', _ARS_data);
                    }

                    return _ARS_data;
                }

                function setTransform($el, data) {
                    $el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(' + data.scale + ',' + data.scale + ')');
                }

                $.fn.rotate = function (val) {
                    var $self = $(this), m, data = initData($self);

                    if (typeof val == 'undefined') {
                        return data.rotate + data.rotateUnits;
                    }

                    m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
                    if (m) {
                        if (m[3]) {
                            data.rotateUnits = m[3];
                        }

                        data.rotate = m[1];

                        setTransform($self, data);
                    }

                    return this;
                };

                // Note that scale is unitless.
                $.fn.scale = function (val) {
                    var $self = $(this), data = initData($self);

                    if (typeof val == 'undefined') {
                        return data.scale;
                    }

                    data.scale = val;

                    setTransform($self, data);

                    return this;
                };

                // fx.cur() must be monkey patched because otherwise it would always
                // return 0 for current rotate and scale values
                var curProxied = $.fx.prototype.cur;
                $.fx.prototype.cur = function () {
                    if (this.prop == 'rotate') {
                        return parseFloat($(this.elem).rotate());

                    } else if (this.prop == 'scale') {
                        return parseFloat($(this.elem).scale());
                    }

                    return curProxied.apply(this, arguments);
                };

                $.fx.step.rotate = function (fx) {
                    var data = initData($(fx.elem));
                    $(fx.elem).rotate(fx.now + data.rotateUnits);
                };

                $.fx.step.scale = function (fx) {
                    $(fx.elem).scale(fx.now);
                };

                /*

                Starting on line 3905 of jquery-1.3.2.js we have this code:

                // We need to compute starting value
                if ( unit != "px" ) {
                    self.style[ name ] = (end || 1) + unit;
                    start = ((end || 1) / e.cur(true)) * start;
                    self.style[ name ] = start + unit;
                }

                This creates a problem where we cannot give units to our custom animation
                because if we do then this code will execute and because self.style[name]
                does not exist where name is our custom animation's name then e.cur(true)
                will likely return zero and create a divide by zero bug which will set
                start to NaN.

                The following monkey patch for animate() gets around this by storing the
                units used in the rotation definition and then stripping the units off.

                */

                var animateProxied = $.fn.animate;
                $.fn.animate = function (prop) {
                    if (typeof prop['rotate'] != 'undefined') {
                        var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
                        if (m && m[5]) {
                            $self = $(this);
                            data = initData($self);
                            data.rotateUnits = m[5];
                        }

                        prop['rotate'] = m[1];
                    }

                    return animateProxied.apply(this, arguments);
                };
            })(jQuery);
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bang Proof</title>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
	<script src='http://code.jquery.com/jquery-1.10.1.min.js' type='text/javascript'></script>
	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
	<script>
	$(function(){

	// Set the knocker at the bottom of the screen
	$('#knocker').css({'top' : $('#container').height() - $('#knocker').height() });

	// Listen for key press
	$('body').on('keyup', function(e){
	if(e.keyCode == 32){
	e.preventDefault();

	// Animate hammer
	$('#hammer').animate({rotate : '60deg'}, 250);

	// Call animate method with random values
	setTimeout(function(){
	animateGame({ pos : rando(0, 100), speed : rando(2000, 3000) });
	$('#hammer').animate({rotate : '0'}, 500);
	}, 200);
	}
	});

	window.animateGame = function(opts){
	// Define default options if none are specified
	if(!opts \|\| typeof(opts) != 'object') opts = { };
	if(!opts.pos) opts.pos = 0;
	if(!opts.speed) opts.speed = 2000;

	// Collection original positions
	var originPos = parseInt($('#knocker').css('top'));
	var knockerSpeed = opts.speed + 200;
	var windowPos = opts.pos - 50;

	// Animate both the knocker and the page
	// Make knocker take slightly longer
	$('#knocker').animate({
	top : opts.pos
	}, knockerSpeed, 'swing');
	// Scroll the window slightly higher than needed
	$('html, body').animate({
	scrollTop : windowPos
	}, opts.speed);

	// If a winner...
	setTimeout(function(){
	if(opts.pos <= 20){
	alert('ringer');
	}
	}, knockerSpeed);

	setTimeout(function(){
	$('#knocker').animate({ top : originPos}, opts.speed);
	$('html, body').animate({scrollTop : originPos}, opts.speed);
	}, opts.speed + 400);
	};

	var rando = function(min, max){
	return Math.random() * (max - min) + min;
	};
	});
	</script>
	<style>
	html, body{
	height : 100%;
	}
	#container{
	position : relative;
	height : 2500px;
	}

	#game{
	position : absolute;
	right : 15px;
	width : 30px;
	height : 100%;
	background-color: grey;
	}
	#track{
	position : absolute;
	left : 5px;
	width : 20px;
	height : 100%;
	background-color: red;
	}
	#bell{
	position : absolute;
	width : 30px;
	height : 30px;
	left : -3px;
	border : 3px solid orange;
	box-shadow: : yellow 0 0 2px;
	border-radius : 30px;
	background-color: yellow;
	transition : .5s all linear;
	}
	#knocker{
	position : absolute;
	left : 5px;
	width : 20px;
	height : 30px;
	border-radius : 5px;
	background-color: silver;
	}
	#hammer{
	position : absolute;
	left : -30px;
	bottom : 0;
	width : 10px;
	height : 45px;
	background-color: blue;
	}
	</style>
	</head>
	<body>
	<div id='container'>
	<div id='game'>
	<div id='track'></div>
	<div id='knocker'></div>
	<div id='bell'></div>
	<div id='hammer'></div>
	</div>
	</div>

	<script type='text/javascript'>
	/*!
	/**
	* Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
	* scale and rotation independently.
	* https://github.com/zachstronaut/jquery-animate-css-rotate-scale
	* Released under dual MIT/GPL license just like jQuery.
	* 2009-2012 Zachary Johnson www.zachstronaut.com
	*/
	(function ($) {
	// Updated 2010.11.06
	// Updated 2012.10.13 - Firefox 16 transform style returns a matrix rather than a string of transform functions. This broke the features of this jQuery patch in Firefox 16. It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg. To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated. The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules. You will have to explicitly set the starting scale/rotation value.

	function initData($el) {
	var _ARS_data = $el.data('_ARS_data');
	if (!_ARS_data) {
	_ARS_data = {
	rotateUnits: 'deg',
	scale: 1,
	rotate: 0
	};

	$el.data('_ARS_data', _ARS_data);
	}

	return _ARS_data;
	}

	function setTransform($el, data) {
	$el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(' + data.scale + ',' + data.scale + ')');
	}

	$.fn.rotate = function (val) {
	var $self = $(this), m, data = initData($self);

	if (typeof val == 'undefined') {
	return data.rotate + data.rotateUnits;
	}

	m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
	if (m) {
	if (m[3]) {
	data.rotateUnits = m[3];
	}

	data.rotate = m[1];

	setTransform($self, data);
	}

	return this;
	};

	// Note that scale is unitless.
	$.fn.scale = function (val) {
	var $self = $(this), data = initData($self);

	if (typeof val == 'undefined') {
	return data.scale;
	}

	data.scale = val;

	setTransform($self, data);

	return this;
	};

	// fx.cur() must be monkey patched because otherwise it would always
	// return 0 for current rotate and scale values
	var curProxied = $.fx.prototype.cur;
	$.fx.prototype.cur = function () {
	if (this.prop == 'rotate') {
	return parseFloat($(this.elem).rotate());

	} else if (this.prop == 'scale') {
	return parseFloat($(this.elem).scale());
	}

	return curProxied.apply(this, arguments);
	};

	$.fx.step.rotate = function (fx) {
	var data = initData($(fx.elem));
	$(fx.elem).rotate(fx.now + data.rotateUnits);
	};

	$.fx.step.scale = function (fx) {
	$(fx.elem).scale(fx.now);
	};

	/*

	Starting on line 3905 of jquery-1.3.2.js we have this code:

	// We need to compute starting value
	if ( unit != "px" ) {
	self.style[ name ] = (end \|\| 1) + unit;
	start = ((end \|\| 1) / e.cur(true)) * start;
	self.style[ name ] = start + unit;
	}

	This creates a problem where we cannot give units to our custom animation
	because if we do then this code will execute and because self.style[name]
	does not exist where name is our custom animation's name then e.cur(true)
	will likely return zero and create a divide by zero bug which will set
	start to NaN.

	The following monkey patch for animate() gets around this by storing the
	units used in the rotation definition and then stripping the units off.

	*/

	var animateProxied = $.fn.animate;
	$.fn.animate = function (prop) {
	if (typeof prop['rotate'] != 'undefined') {
	var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
	if (m && m[5]) {
	$self = $(this);
	data = initData($self);
	data.rotateUnits = m[5];
	}

	prop['rotate'] = m[1];
	}

	return animateProxied.apply(this, arguments);
	};
	})(jQuery);
	</script>
	</body>
	</html>