Fire JS Bin - 10KBSniper

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

Find

⟲

Replace

var sT, eT, sS, hS, scr, rdy, sI, sI2, wz, l1 = [],
    l2 = [],
    l3 = [],
    l4 = [],
    sa = [],
    mx, my, nx, ny, m = [],
    gh, as, o = 0.4;
var tbc = gId('tbg'),
    tbgc = tbc.getContext('2d'),
    sc = gId('sv'),
    sgc = sc.getContext('2d'),
    bc = gId('bv'),
    bgc = bc.getContext('2d'),
    tc = gId('tv'),
    tgc = tc.getContext('2d');
pa(['tbg', 'ti', 'in', 'scr', 'rp', 'st', 'vi', 'ma', 'sv', 'bv', 'd1', 'd2', 'd3', 'd4']);
db(tbgc, 0, 900);
sI2 = setTimeout('aout()', 2000);

<!DOCTYPE html>
<html>
  
  <head>
    <title>10KB Sniper</title>
  </head>
  
  <body>
    <div id="frm">
      <div id="game">
        <p id="d1"></p>
        <p id="d4"></p>
        <canvas id="bv" width="400" height="400"></canvas>
        <p id="d2" />
        <p id="d3">1X</p>
        <canvas id="sv" width="900" height="400"></canvas>
        <canvas id="tv" width="200" height="200"></canvas>
        <p id="ma">MISSION ACCOMPLISHED</p>
      </div>
      <canvas id="tbg" width="900" height="300">
      </canvas>
      <div id="str">
        <p id="ti"><b style="color:#900">10KB</b> Sniper</p>
        <p id="in">
          The intelligence had reported a group of spies codename "SPECTRES" had
          infiltrated into the city. You, as a member of "10th division Karbine &
          Bayonet Sniper Team, were ordered to eliminate all the spies within the
          area. There are 10 SPECTRES you have to assassinate before they can get
          any important information. Do not underestimate them even if they are not
          armed, these shady-figures are not easily noticable and their lightning
          reflex can quickly avoid dangers. However, we do have an advantage is that
          these SPECTRES will not run far until they got what they want. So make
          sure you silence them before they notice your presence, clear them out
          as soon as possible and also, aim carefully at their head to ensure that
          they don't wake up.
        </p>
        <div id="st" onclick="str()">S T A R T</div>
        <div id="vi" onclick="vi()">I N S T R U C T I O N S</div>
      </div>
      <div id="end">
        <center>
          <p>You had successfully elimated all 10 SPECTRES within this area.</p>
          <p id="tt" />
          <table id="scr" /><br/>
          <div id="rp" onclick="rp()">R E P L A Y</div>
        </center>
      </div>
    </div>
  </body>

</html>

body { background:#222; font-family:verdana; color:#090; }
#tbg { background:#000; top:108px; opacity:0.4; }
#ti { font:48px arial; left:320px; }
#in { font-size:10px; width:500px; display:block; text-align:justify; left:200px; top:130px; }
#frm { background:#000; display:block; width:900px; height:400px; border:1px solid #060; }
#end { display:none; }
#scr { left:250px; top:100px; }
#rp { cursor:hand; font-size:12px; cursor:pointer; display:block; left:425px; top:300px; }
#rp:hover { color:#900; }
#tt { color:#900; }
#st { font-size:12px; left:325px; top:300px; cursor:pointer; }
#st:hover { color:#900; }
#vi { font-size:12px; left:475px; top:300px; cursor:pointer; }
#st:hover { color:#900; }
#game { display:none; }
#ma { color:#a00; font:48px arial; left:10px; top:-20px; display:none; background:#000; padding:160px 150px 160px 150px; opacity:0.75; }
#sv { background:#000; opacity:0.0; filter:alpha(opacity=0); }
#bv { left:260px; background:#0e0e0e; }
#tv { display:none; }
#d1 { font-size:10px; left:20px; top:0px; }
#d2 { font-size:14px; left:360px; top:100px; opacity:0.0; filter:alpha(opacity=0); background:#000; color:#0f0; }
#d3 { font-size:12px; left:300px; top:320px; }
#d4 { font-size:10px; left:750px; top:0px; text-align: right; }

Pop out