JScrambler demo

JScrambler demo optimized with Google Closure

HTML

<div id="container">
    <img src="https://jscrambler.com/scripts/examples/simple_html5_demo/source_code/images/image.png" />
    <h1>SIMPLE DEMO</h1>
    <canvas id="canvas" width="640" height="300" oncontextmenu="return false;" onselectstart="return false;">
                <!-- This text is displayed if the visitor's browser does not support HTML5.
                You can change it, but it is a good idea to link to a description of a browser
                and provide some links to download some popular HTML5-compatible browsers. -->
                Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.  <a href="http://www.whatbrowser.org/">What is a browser?</a>
                <br><br><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br>
                <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br>
                <a href="http://www.google.com/chrome/">Google Chrome</a><br>
                <a href="http://www.apple.com/safari/download/">Apple Safari</a><br>
                <a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br>
    </canvas>
    <div style="margin-top:30px;">
        <button onclick="stopAnim()">Stop</button>
        <span id="draw_number"></span> images in <span id="draw_time">0</span> seconds.
    </div>
    <p>(Test duration: 30 seconds)</p>
    <br>
</div>
        <script type="text/javascript" src="demo.js"></script>

CSS

@font-face {font-family: 'Oswald';font-style: normal;font-weight: 400;src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}
            canvas{ background-color: #FFF;cursor: pointer;}
            html,body{margin: 0;background: url("images/cube.png") no-repeat scroll 10% 0 #1C91FF}
            body{font-family: 'Oswald', sans-serif;color: #FFF;}
            h1{margin-bottom: 0;color: #FFF;font-size: 3em;line-height: 35px;text-shadow: 3px 3px #333;}
            #container{padding-top: 20px;margin-left: 10%;}
            #canvas{box-shadow: 3px 3px 2px #333;}

JavaScript

(function (a) {
    function p() {
        $("#draw_time").html(k++);
        30 < k && stopAnim()
    }

    function g() {
        h.clearRect(0, 0, b.width, b.height);
        h.drawImage(l, c, d);
        c += 1 * e;
        d += 1 * f;
        c >= b.width - 188 ? (c = b.width - 188, e = -1) : 0 >= c && (c = 0, e = 1);
        d >= b.height - 48 ? (d = b.height - 48, f = -1) : 0 >= d && (d = 0, f = 1);
        $("#draw_number").html(q++)
    }
    var c = 0,
        d = 0,
        e = 1,
        f = 1,
        l = new Image;
    l.src = "https://jscrambler.com/scripts/examples/simple_html5_demo/source_code/images/image.png";
    var b = null,
        h = null,
        q = 0,
        k = 1,
        m = null,
        n = null;
    a.onload = function () {
        m = a.setInterval(p, 1E3);
        b = a.document.getElementById("canvas");
        h = b.getContext("2d");
        n = -1 !== a.navigator.userAgent.indexOf("Firefox") ? a.setInterval(function () {
            a.requestAnimationFrame(g)
        }, 1E3 / 60) : -1 !== a.navigator.userAgent.indexOf("Chrome") ? a.setInterval(function () {
            a.webkitRequestAnimationFrame(g)
        }, 1E3 / 60) : a.setInterval(g, 1E3 / 60)
    };
    stopAnim = function () {
        a.clearInterval(n);
        a.clearInterval(m)
    };
    $("#canvas").click(function () {
        1 === e ? e = -1 : e = 1;
        1 === f ? f = -1 : f = 1
    })
})(window);