Fire JS Bin - Blinkwang

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var M, V, C, D = document,
    W = window,
    pi = Math.PI,
    mM = Math.max,
    mm = Math.min,
    mR = Math.random,
    mF = Math.floor,
    mC = Math.ceil,
    mr = Math.round,
    accu = function (a, d) {
    return mr(100 * (mm(a, d) / mM(a, d)))
    },
    Z = function (c, v) {
    c.fillStyle = v
    },
    CI = clearInterval,
    SI = setInterval,
    CK = "click",
    L = function (i, c, l, g, n, k, m) {
    i.bezierCurveTo(c, l, g, n, k, m)
    },
    N = function (b, a) {
    b[["save", "beginPath", "closePath", 0, "restore"][a]]()
    };

function H_(b) {
  return "hsla(" + b.h + "," + b.s + "%," + b.l + "%," + b.a + ")"
}

function s1(f, c, e) {
  e = (!isNaN(e)) ? e : mR() * 180 * pi;
  Z(f, c);
  N(f, 0);
  f.rotate(e);
  N(f, 1);
  f.fillRect(0, 0, 400, 10);
  N(f, 2);
  f.fill();
  N(f, 4);
}

function s2(f, e, c) {
  Z(f, e);
  N(f, 1);
  f.arc(0, 0, 80, 0, pi * 2, true);
  N(f, 2);
  f.fill();
  new Eye(f, 20, 40, 15, 9, c, 4.75)
}

function s3(f, e, c) {
  Z(f, e);
  N(f, 1);
  f.arc(64, 60, 60, 0, pi * 2, true);
  N(f, 2);
  f.fill();
  Z(f, "black");
  N(f, 1);
  f.moveTo(63.75, 66.75);
  L(f, 63.82, 66.72, 63.9, 66.7, 64, 66.7);
  L(f, 64.53, 66.7, 64.98, 66.88, 65.35, 67.25);
  L(f, 65.35, 67.25, 65.9, 68.07, 65.9, 68.6);
  L(f, 65.97, 71.03, 67.32, 73.22, 69.95, 75.15);
  L(f, 72.38, 76.92, 74.73, 77.82, 77, 77.85);
  L(f, 77.53, 77.85, 77.98, 78.03, 78.35, 78.4);
  L(f, 78.35, 78.4, 78.9, 79.22, 78.9, 79.75);
  L(f, 78.9, 79.75, 78.72, 80.73, 78.35, 81.1);
  L(f, 78.35, 81.1, 77.53, 81.65, 77, 81.65);
  L(f, 74, 81.68, 70.9, 80.53, 67.7, 78.2);
  L(f, 66, 76.93, 64.68, 75.6, 63.75, 74.2);
  L(f, 62.82, 75.6, 61.52, 76.93, 59.85, 78.2);
  L(f, 56.62, 80.53, 53.5, 81.68, 50.5, 81.65);
  L(f, 49.97, 81.65, 49.52, 81.47, 49.15, 81.1);
  L(f, 49.15, 81.1, 48.6, 80.28, 48.6, 79.75);
  L(f, 48.6, 79.75, 48.78, 78.77, 49.15, 78.4);
  L(f, 49.15, 78.4, 49.97, 77.85, 50.5, 77.85);
  L(f, 52.77, 77.82, 55.13, 76.92, 57.6, 75.15);
  L(f, 60.2, 73.22, 61.53, 71.03, 61.6, 68.6);
  L(f, 61.6, 68.07, 61.78, 67.62, 62.15, 67.25);
  L(f, 62.15, 67.25, 62.97, 66.7, 63.5, 66.7);
  L(f, 63.6, 66.7, 63.68, 66.72, 63.75, 66.75);
  N(f, 2);
  f.fill();
  Z(f, "#FF99CC");
  N(f, 1);
  f.moveTo(52.7, 56.35);
  L(f, 55.53, 54.98, 58.95, 54.3, 62.95, 54.3);
  L(f, 62.95, 54.3, 70.37, 54.98, 73.2, 56.35);
  L(f, 76.03, 57.72, 77.02, 59.28, 76.15, 61.05);
  L(f, 75.25, 62.82, 71.03, 65.33, 63.5, 68.6);
  L(f, 57.77, 65.53, 54.02, 63.23, 52.25, 61.7);
  L(f, 49.72, 59.5, 49.87, 57.72, 52.7, 56.35);
  N(f, 2);
  f.fill();
  new Eye(f, 45, 40, 15, 9, c, 4.75);
  new Eye(f, 82, 40, 15, 9, c, 4.75);
  Z(f, "#FF6600");
  N(f, 1);
  f.moveTo(124.05, 0.1);
  L(f, 124.98, 0.07, 125.85, 0.03, 126.65, 0);
  L(f, 123.85, 19, 119.98, 28.5, 115.05, 28.5);
  L(f, 109.55, 28.5, 104.87, 26.55, 101, 22.65);
  L(f, 97.1, 18.78, 96.67, 14.15, 99.7, 8.75);
  L(f, 102.73, 3.32, 110.85, 0.43, 124.05, 0.1);
  N(f, 2);
  f.moveTo(30.2, 8.75);
  L(f, 33.23, 14.15, 32.8, 18.78, 28.9, 22.65);
  L(f, 25.03, 26.55, 20.35, 28.5, 14.85, 28.5);
  L(f, 9.92, 28.5, 6.05, 19, 3.25, 0);
  L(f, 4.05, 0.03, 4.92, 0.07, 5.85, 0.1);
  L(f, 19.05, 0.43, 27.17, 3.32, 30.2, 8.75);
  N(f, 2);
  f.fill()
}

<!DOCTYPE html>
<html>
  
  <head>
    <title>Blinkwang</title>
    <meta charset="utf-8">
    <meta name="description" content="game">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <section id="★" class="☺">
      <h2>Blinkwang</h2>
      <p>
        How intuitive are you? Count all objects you see flash on the screen using
        your intuition.
      </p>
      <button class="♘" id="†">PLAY</button>
    </section>
    <section id="♠" class="☺">
      <p><span class="☾ ☽">3</span></p>
      <aside></aside>
      <a class="☢" href="#">Your stats</a>
    </section>
    <section id="♣" class="☺">
      <h3>How many?</h3>
      <span class="♂ ☽">0</span>
      <input id="↔" type="range" min="1" max="11" />
      <button class="♘" id="Δ">OK</button>
      <a class="☢" href="#">Your stats</a>
    </section>
    <section id="♥" class="☺">
      <a class="☢" href="#">Close</a>
      <a class="⇐" href="#">Replay</a>
      <h3></h3>
      <p style="margin-top:1em;"></p>
      <ul id="♛"><li><a href='http://bit.ly/aqvB1c'>✪</a></li></ul>
    </section>
    <canvas id="♦"></canvas>
  </body>

</html>

* { padding:0; margin:0; font-family:Georgia; }
html, body { width:100%; height:100%; background:hsla(347, 75%, 20%, 1); color:hsla(347, 75%, 30%, 1); }
.☢ { display:none; font-style:italic; }
h2, h3 { font-size:2em; font-style:italic; color:#df1f49; text-shadow:0 2px 2px hsla(347, 75%, 20%, .35); }
.☽ { display:block; font:3em Arial; }
#★ p { margin:1em 2em; }
ul { list-style:none; }
li { border-top:1px solid hsla(347, 75%, 20%, .35); padding:.3em 0; }
#♛ { margin:1em 0; max-height:240px; overflow:auto; }
#♥ a.☢, .☺ { text-align:center; background:#FCFFF9; border-radius:14px; box-shadow:0 0 10px rgba(0, 0, 0, .25); -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .25); -moz-box-shadow:0 0 10px rgba(0, 0, 0, .25); }
#♦ { width:100%; height:100%; }
#★, #♥, #♠, #♣ { position:fixed; width:500px; display:none; padding:1em; }
#♥ { text-align:left; min-height:150px; width:430px; }
.♘ { background:#df1f49; color:#ebdda7; padding:.3em .5em; font-size:1.3em; text-shadow:0 2px 2px hsla(347, 75%, 20%, .35); display:block; margin:0 auto; border-radius:8px }
.♘:hover { background:#E86E1C; }
a { color:#7f122a; text-decoration:none; margin-top:.4em; }
a:hover { color:#E86E1C; }
#↔ { text-align:center; font-size:2em; width:85%; margin:.5em; }
#♠ span.☾.☽ { font:10em Arial; }
a.⇐, #♥ a.☢ { float:right; padding:.3em .7em; color:#fff; background: #e02b53; }

Pop out