API tools faq
paste
NoNameCracksInc

Sniper

NoNameCracksInc
Aug 3rd, 2015
428
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. </head>
  6.  
  7. <body onLoad = 'align_sticks();load_initial_values();generate_enemies(10)' background = ''>
  8.  
  9. <div id='sight_container'>
  10.  
  11. <div id='sticktop' class = 'stick'></div>
  12. <div id='stickleft' class = 'stick'></div>
  13. <div id='stickbottom' class = 'stick'></div>
  14. <div id='stickright' class = 'stick'></div>
  15.  
  16. </div>
  17.  
  18. <div id='glass'>
  19.  
  20. <div id='scoresheet' class='sheet'>0</div>
  21. <div id='timesheet' class='sheet'>0</div>
  22.  
  23. </div>
  24.  
  25. <style>
  26.  
  27. #sight_container
  28. {
  29. width:70px;
  30. height:70px;
  31. position:absolute;
  32. border:2px solid;
  33. border-radius:200px;
  34. }
  35.  
  36. .stick
  37. {
  38. height:60px;
  39. width:1px;
  40. border:1px solid;
  41. position:absolute;
  42. transition:left 0.3s, top 0.3s, height 0.3s;
  43. }
  44.  
  45. #glass
  46. {
  47. position:absolute;
  48. }
  49.  
  50. .enemy
  51. {
  52. width:50px;
  53. height:50px;
  54. background-color:red;
  55. border:1px solid;
  56. box-shadow: 10px 10px 5px #888888;
  57. -webkit-transform-origin:bottom left;
  58. transition:0.3s;
  59. }
  60.  
  61. .enemy:hover{cursor:pointer}
  62.  
  63. .counters
  64. {
  65. height:20px;
  66. position:absolute;
  67. text-align:center;
  68. transition:0.5s;
  69. transform-origin:center;
  70. }
  71.  
  72. #scoresheet
  73. {
  74. width:100px;
  75. height:50px;
  76. left:0;right:0;margin:auto;
  77. text-align:center;
  78. }
  79.  
  80. #timesheet
  81. {
  82. width:200px;
  83. height:50px;
  84. left:60%;
  85. }
  86.  
  87. .sheet
  88. {
  89. position:absolute;
  90. font-size:250%;
  91. transition:0.5s;
  92. border:1px solid;
  93. box-shadow: 5px 5px 5px #888888;
  94. }
  95.  
  96. </style>
  97.  
  98.  
  99. <script>
  100.  
  101. var score = 0;
  102. var started = false;
  103. var time = 0;
  104. var whole;
  105. var mili;
  106. var minor_time = 0;
  107.  
  108. document.onmousemove = function(e)
  109. {
  110.  
  111. var x = e.pageX;
  112. var y = e.pageY;
  113.  
  114. var el = document.getElementById('sight_container');
  115.  
  116. el.style.left = x - el.offsetWidth/2 + 'px';
  117. document.getElementById('sight_container').style.top = y - el.offsetHeight/2 + 'px';
  118. };
  119.  
  120.  
  121. document.body.onclick = function(e)
  122. {
  123.  
  124. if(e.target.id.indexOf('killable') > - 1)
  125. {
  126.  
  127. kill(document.getElementById(e.target.id));
  128. if(check_for_end()){clearInterval(mili);}
  129. }
  130.  
  131. else
  132. {
  133.  
  134. pts(-10);
  135. }
  136.  
  137. start();
  138.  
  139. var el = document.createElement('div');
  140. el.style.position = 'absolute';
  141. el.style.top = e.pageY -10 + 'px';
  142. el.style.left = e.pageX -10 + 'px';
  143. el.style.width = 5 + 'px';
  144. el.style.height = 5 + 'px';
  145. el.style.borderRadius = 200 + 'px';
  146. el.style.backgroundColor = 'white';
  147.  
  148. document.getElementById('glass').appendChild(el);
  149. };
  150.  
  151.  
  152. function ontarget()
  153. {
  154.  
  155. var st = document.getElementById('sticktop');
  156. var sl = document.getElementById('stickleft');
  157. var sb = document.getElementById('stickbottom');
  158. var sr = document.getElementById('stickright');
  159.  
  160. var con = document.getElementById('sight_container');
  161.  
  162. st.style.top = -st.offsetHeight + 'px';
  163. sl.style.left = -40 + 'px';
  164. sb.style.top = Math.floor(con.offsetHeight)-4 + 'px';
  165. sr.style.left = con.offsetWidth - 4 + 40 - sr.offsetWidth + 'px';
  166.  
  167. colorchildren('sight_container','red');
  168.  
  169. }
  170.  
  171.  
  172. function align_sticks()
  173. {
  174.  
  175. var sl = document.getElementById('stickleft');
  176. var sr = document.getElementById('stickright');
  177. var sb = document.getElementById('stickbottom');
  178. var st = document.getElementById('sticktop');
  179.  
  180. var con = document.getElementById('sight_container');
  181.  
  182. sl.style.left = -sl.offsetWidth + 'px';
  183. sl.style.top = -(sl.offsetHeight - con.offsetHeight)/2 + 'px';
  184.  
  185. sr.style.left = 100 + '%';
  186. sr.style.top = -(sr.offsetHeight - con.offsetHeight)/2 + 'px';
  187.  
  188. st.style.top = -st.offsetHeight + (con.offsetHeight/3) + 'px';
  189. st.style.left = con.offsetWidth/2 - st.offsetWidth/2 + 'px';
  190.  
  191. sb.style.top = con.offsetHeight - (con.offsetHeight/3) + 'px';
  192. sb.style.left = con.offsetWidth/2 - sb.offsetWidth/2 + 'px';
  193.  
  194. colorchildren('sight_container','black');
  195.  
  196. }
  197.  
  198. function load_initial_values()
  199. {
  200.  
  201. document.getElementById('glass').style.width = window.innerWidth - 100 + 'px';
  202. document.getElementById('glass').style.height = window.innerHeight - 100 + 'px';
  203. }
  204.  
  205. function generate_enemies(amt)
  206. {
  207.  
  208. for(i=0;i<=amt-1;i++)
  209. {
  210.  
  211. var en = document.createElement('div');
  212. var prnt = document.getElementById('glass');
  213.  
  214. en.style.position = 'absolute';
  215. en.style.top = GRN(0,prnt.offsetHeight) + 'px';
  216. en.style.left = GRN(0,prnt.offsetWidth) + 'px';
  217.  
  218. en.className = 'enemy';
  219. en.id = 'killable'+i;
  220.  
  221. en.onmouseover = function(e){ontarget();};
  222. en.onmouseout = function(e){align_sticks();};
  223.  
  224. prnt.appendChild(en);
  225. }
  226. }
  227.  
  228. function GRN(min,max)
  229. {
  230.  
  231. return (Math.floor(Math.random() * (max - min + 1)) + min);
  232. }
  233.  
  234. function kill(el)
  235. {
  236.  
  237. if(GRN(0,1) == 1)
  238. el.style.webkitTransform = 'rotate(-90deg)';
  239.  
  240. else
  241. el.style.webkitTransform = 'rotate(90deg)';
  242.  
  243. el.style.opacity = 0;
  244.  
  245. setTimeout(function erase()
  246. {
  247.  
  248. document.getElementById('glass').removeChild(el);
  249. },500);
  250.  
  251.  
  252. var c = document.createElement('div');
  253.  
  254. c.className = 'counters';
  255. c.style.top = el.offsetTop - 15 + 'px';
  256. c.style.left = el.offsetLeft + 'px';
  257. c.style.width = el.offsetWidth + 'px';
  258. c.innerHTML = '10';
  259.  
  260. document.getElementById('glass').appendChild(c);
  261.  
  262. c.style.top = c.offsetTop - 60 + 'px';
  263. c.style.webkitTransform = 'rotateY(360deg)';
  264. setTimeout(function hide(){c.style.opacity = 0;},500);
  265. setTimeout(function erase(){document.getElementById('glass').removeChild(c)},800);
  266.  
  267. pts(10);
  268. }
  269.  
  270.  
  271. function colorchildren(parid,col)
  272. {
  273.  
  274. for(i=0;i<=document.getElementById(parid).children.length-1;i++)
  275. {
  276.  
  277. document.getElementById(parid).children[i].style.backgroundColor = col;
  278. }
  279. }
  280.  
  281. var ptsindex = 0;
  282.  
  283. function pts(amt)
  284. {
  285.  
  286. if(amt < 0) var color = 'red';
  287. else var color = 'green';
  288.  
  289. ptsindex = ptsindex + 1;
  290. var el = document.getElementById('scoresheet');
  291.  
  292.  
  293. el.style.backgroundColor = color;
  294.  
  295. setTimeout(function showup()
  296. {
  297.  
  298. el.style.backgroundColor = 'inherit';
  299. },600);
  300.  
  301. score = score + amt;
  302. el.innerHTML = score;
  303. }
  304.  
  305.  
  306. function start()
  307. {
  308.  
  309. if(!started)
  310. {
  311.  
  312. started = true;
  313.  
  314. whole = setInterval(function count()
  315. {
  316.  
  317. time = time + 1;
  318.  
  319. },1000);
  320.  
  321. mili = setInterval(function count()
  322. {
  323.  
  324. minor_time = minor_time + 1;
  325. document.getElementById('timesheet').innerHTML = Number(time) + Number(get_hundreds(minor_time)) + 'seconds';
  326. },100);
  327.  
  328. }
  329. }
  330.  
  331. function check_for_end()
  332. {
  333.  
  334. var amt = 0;
  335.  
  336. for(i=0;i<=document.getElementById('glass').children.length - 1;i++)
  337. {
  338.  
  339. if(document.getElementById('glass').children[i].id.indexOf('killable') > -1)
  340.  
  341. if(window.getComputedStyle(document.getElementById('glass').children[i]).opacity == 1)
  342. amt = amt+1;
  343. }
  344.  
  345. if(amt > 0)
  346. return false;
  347.  
  348. else if(amt < 1)
  349. {
  350.  
  351. clearInterval(whole);
  352. return true;
  353. }
  354. }
  355.  
  356.  
  357. function get_hundreds(arg)
  358. {
  359.  
  360. if(arg<=9) return (arg/10).toFixed(1);
  361.  
  362. var opts = [10,100,1000];
  363.  
  364. for(i=0;i<=opts.length-1;i++)
  365. {
  366.  
  367. if(arg/opts[i] >= 1)
  368. {
  369.  
  370. return (arg/opts[i] - Math.floor(arg/opts[i])).toFixed(1);
  371. }
  372. }
  373. }
  374.  
  375. function starmode(w,h)
  376. {
  377.  
  378. var con = document.getElementById('sight_container');
  379.  
  380. con.style.width = w + 'px';
  381. con.style.height = h + 'px';
  382.  
  383. con.style.backgroundColor = 'black';
  384.  
  385. con.style.borderRadius = 0;
  386. align_sticks();
  387. }
  388.  
  389.  
  390. </script>
  391.  
  392. </body>
  393.  
  394. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!