API tools faq
paste
Advertisement
Himeshvyas26

Play game

Himeshvyas26
Oct 26th, 2017
371
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>KCW GAMER TO PAKISTAN</title>
  6. <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Outline|Space+Mono" rel="stylesheet">
  7.  
  8.  
  9. <style>
  10. @keyframes jumping {
  11. 0% {transform:scale(2);}
  12. 100% {transform:scale(1);}
  13. }
  14.  
  15. @keyframes dotReveal {
  16. to {opacity:1;}
  17. }
  18.  
  19. @keyframes line {
  20. 0% {stroke-dashoffset:0}
  21. 100% {stroke-dashoffset:100%}
  22. }
  23.  
  24. body {
  25. cursor:crosshair;
  26. background-color: black;
  27. background-image: linear-gradient(to top, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0),
  28. linear-gradient(to right, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0);
  29. background-size: 50px 50px;
  30. }
  31.  
  32. svg, html, body, #app {
  33. box-sizing: border-box;
  34. height:100%;
  35. width:100%;
  36. padding:0;
  37. margin:0;
  38. overflow:hidden;
  39. }
  40.  
  41. svg {position: relative;z-index:1;}
  42.  
  43. .dot {
  44. z-index:10;
  45. stroke-width:4;
  46. stroke:black;
  47. width: 10px;
  48. height: 10px;
  49. fill: rgba(241, 196, 15,1.0);
  50. -moz-transform-origin: center;
  51. -webkit-transform-origin: center;
  52. transform-origin: center;
  53. transition: all 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  54. }
  55.  
  56. .dot--starting.dot--starting {
  57. fill:black;
  58. stroke: rgba(46, 204, 113,1.0);
  59. stroke-width:3;
  60. stroke-miterlimit: outside;
  61. }
  62.  
  63. .dot:not(.dot--starting) {
  64. opacity:0;
  65. animation: dotReveal 1s linear;
  66. animation-fill-mode: forwards;
  67. }
  68.  
  69. #svg .dot:hover {
  70. transform: scale(2);
  71. }
  72.  
  73. #svg .dot[data-selected=true] {
  74. opacity:1;
  75. fill: rgba(46, 204, 113,1.0);
  76. animation: jumping 0.5s ease-in-out alternate infinite;
  77. animation-delay:0;
  78. }
  79.  
  80. #svg .dot[data-visited=true] {
  81. fill:rgba(46, 204, 113,1.0);
  82. animation: jumping 0.5s ease-in-out alternate infinite;
  83. animation-delay:0;
  84. opacity:1;
  85. }
  86.  
  87. .line {
  88. z-index:10;
  89. stroke: rgba(46, 204, 113,1.0);
  90. stroke-width:2;
  91. stroke-dasharray: 2 16;
  92. animation: line 10s linear infinite;
  93. }
  94.  
  95. @media (max-width:480px) {
  96. #preline {
  97. display: none;
  98. }
  99. }
  100.  
  101. #score {
  102. position: fixed;
  103. z-index:0;
  104. top: 50%;
  105. left:50%;
  106. width: 100%;
  107. text-align:center;
  108. transform: translate(-50%, -50%);
  109. font-size:20em;
  110. color: rgba(46, 204, 113,0.2);
  111. font-family: 'Bungee Outline', cursive;
  112. }
  113.  
  114. .btn {
  115. background: transparent;
  116. cursor:pointer;
  117. color:rgba(241, 196, 15,1.0);
  118. font-weight:bold;
  119. padding: 15px 60px;
  120. border-radius: 6px;
  121. border: 3px solid rgba(241, 196, 15,1.0);
  122. transition: all 0.3s ease-out;
  123. }
  124.  
  125. .btn:hover {
  126. background: rgba(241, 196, 15,1.0);
  127. color: black;
  128. }
  129.  
  130. #btn-start {
  131. position: absolute;
  132. top: 50%;
  133. left:50%;
  134. transform: translate(-50%, -50%);
  135. }
  136.  
  137. #launch-screen {
  138. display: flex;
  139. align-items: center;
  140. justify-content: center;
  141. text-align: center;
  142. visibility:hidden;
  143. position: absolute;
  144. z-index: 10;
  145. background-image: linear-gradient(45deg, black, rgba(46, 204, 113,0.2));
  146. top: 0;
  147. bottom: 0;
  148. left: 0;
  149. right: 0;
  150. opacity:0;
  151. transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  152. }
  153.  
  154. #launch-screen.is-visible {
  155. opacity:1;
  156. visibility:visible;
  157. }
  158.  
  159. #launch-screen-content {
  160. position: relative;
  161. display: flex;
  162. flex-direction: column;
  163. align-items: center;
  164. justify-content: center;
  165. border-radius: 6px;
  166. padding: 50px;
  167. transform: scale(0.8);
  168. transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  169. }
  170.  
  171.  
  172. #launch-screen.is-visible #launch-screen-content {
  173. transform: scale(1);
  174. }
  175.  
  176. #launch-screen-content h1 {
  177. position: relative;
  178. font-family: 'Bungee Outline', cursive;
  179. color: rgba(46, 204, 113,1.0);
  180. font-size: 4em;
  181. margin: 0 0 0.4em 0;
  182. }
  183.  
  184.  
  185. #launch-screen-content p {
  186. font-family: 'Space Mono', monospace;
  187. color:#ccc;
  188. font-size: 1em;
  189. margin: 0 0 3em 0;
  190. }
  191.  
  192. #lastScore {display:none;}
  193. #lastScore.is-visible {display:block;}
  194.  
  195. #lastScore__number {color:rgba(231, 76, 60,1.0);}
  196.  
  197. </style>
  198.  
  199. </head>
  200.  
  201. <body>
  202. <div id="app">
  203. <div id="score"></div>
  204. <svg id="svg"></svg>
  205.  
  206. <div id="launch-screen" class="is-visible">
  207.  
  208. <div id="launch-screen-content">
  209. <h1 id="launch-screen__title"></h1>
  210. <p id="launch-screen__description"></p>
  211. <button class="btn" id="start-btn">PLAY</button>
  212. <center> <img src="http://s29.postimg.org/7ru2q76jb/kcw_logo_deface.png" width="160" height="200" >
  213. </center>
  214. </div><br>
  215.  
  216. </div>
  217.  
  218. </div>
  219.  
  220. <script>////////////////
  221. // helpers
  222. ////////////////
  223.  
  224. function getDistance(obj1, obj2) {
  225. return Math.floor(
  226. Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) + Math.pow(obj1.cy - obj2.cy, 2))
  227. );
  228. }
  229.  
  230. function getRandomArbitrary(min, max) {
  231. return Math.floor(Math.random() * (max - min) + min);
  232. }
  233.  
  234. function comparator(a, b) {
  235. if (a[1] < b[1]) return -1;
  236. if (a[1] > b[1]) return 1;
  237. return 0;
  238. }
  239.  
  240. function difference(source, toRemove) {
  241. return source.filter(function(value) {
  242. return toRemove.indexOf(value) == -1;
  243. });
  244. }
  245.  
  246. ////////////////
  247. // global vars
  248. ////////////////
  249.  
  250. var svg = document.getElementById("svg");
  251. var dotMatrix = document.createElementNS(
  252. "http://www.w3.org/2000/svg",
  253. "circle"
  254. );
  255. var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");
  256. var screenW = window.innerWidth;
  257. var screenH = window.innerHeight;
  258. var totalDist = document.getElementById("distance");
  259.  
  260. ////////////////
  261. // line constructor
  262. ////////////////
  263.  
  264. function Line(x1, y1, x2, y2) {
  265. this.x1 = x1;
  266. this.y1 = y1;
  267. this.x2 = x2;
  268. this.y2 = y2;
  269. this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");
  270. this.class = "line";
  271. this.update = function(x1, y1, x2, y2) {
  272. this.el.setAttribute("x1", x1 || this.x1);
  273. this.el.setAttribute("y1", y1 || this.y1);
  274. this.el.setAttribute("x2", x2 || this.x2);
  275. this.el.setAttribute("y2", y2 || this.y2);
  276. this.setAttr("class", this.class);
  277. };
  278. this.setAttr = function(attr, value) {
  279. this.el.setAttribute(attr, value);
  280. };
  281. this.append = function() {
  282. svg.insertBefore(this.el, svg.firstChild);
  283. };
  284. }
  285.  
  286. ////////////////
  287. // dot constructor
  288. ////////////////
  289.  
  290. function Dot(r, cx, cy) {
  291. this.r = r;
  292. this.cx = cx;
  293. this.cy = cy;
  294. this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  295. this.class = "dot";
  296. this.update = function() {
  297. this.el.setAttribute("r", this.r);
  298. this.el.setAttribute("cx", this.cx);
  299. this.el.setAttribute("cy", this.cy);
  300. this.setAttr("class", this.class);
  301. };
  302.  
  303. // activates a dot
  304. this.activate = function() {
  305. for (i = 0; i < dots.num; i++) {
  306. dots.list[i].setAttr("data-selected", "false");
  307. }
  308. this.setAttr("data-selected", "true");
  309. };
  310.  
  311. this.visited = function() {
  312. this.setAttr("data-visited", "true");
  313. };
  314.  
  315. // sets attribute to element
  316. this.setAttr = function(attr, value) {
  317. this.el.setAttribute(attr, value);
  318. };
  319.  
  320. // gets attribute to element
  321. this.getAttr = function(attr) {
  322. return this.el.getAttribute(attr);
  323. };
  324.  
  325. // appends element to svg and attaches event listeners
  326. this.append = function() {
  327. svg.appendChild(this.el);
  328. this.el.addEventListener("click", this.onClick);
  329. };
  330.  
  331. // on click on element
  332. this.onClick = function(event) {
  333. //gets the id and the coords of the dot
  334. var thisId = Number(event.target.getAttribute("data-id").substr(3, 2));
  335. var thisCx = dots.list[thisId].cx;
  336. var thisCy = dots.list[thisId].cy;
  337.  
  338. // calculates the distance between dots
  339. var distances = [];
  340. for (i = 0; i < dots.num; i++) {
  341. distances[i] = [i, getDistance(dots.selected, dots.list[i])];
  342. }
  343. distances.sort(comparator);
  344. distances.splice(0, 1);
  345. var distancesLeft = [];
  346. for (i = 0; i < distances.length; i++) {
  347. if (dots.left.includes(distances[i][0])) {
  348. distancesLeft.push(distances[i][0]);
  349. }
  350. }
  351.  
  352. //if the element is the nearest
  353. if (thisId == distancesLeft[0] && dots.left.includes(thisId)) {
  354. // calculates distances
  355. var newDistance = getDistance(dots.list[thisId], dots.selected);
  356.  
  357. app.score.update(1); // punteggio x numero di poi
  358. // app.score.update(newDistance); punteggio x distanza
  359.  
  360. //sets the active class to the selected dot
  361. dots.list[thisId].activate();
  362. dots.list[thisId].visited();
  363.  
  364. // creates the line
  365. lines.list.push(
  366. new Line(
  367. dots.selected.cx,
  368. dots.selected.cy,
  369. dots.list[thisId].cx,
  370. dots.list[thisId].cy
  371. )
  372. );
  373. lines.list[lines.list.length - 1].update();
  374. lines.list[lines.list.length - 1].append();
  375.  
  376. // creates the preview line
  377. //TODO: eliminare le vecchie preline che rimangono vive
  378.  
  379. svg.addEventListener("mousemove", function prelineMove(e) {
  380. mouseX = e.pageX;
  381. mouseY = e.pageY;
  382. app.preline.update(thisCx, thisCy, mouseX, mouseY);
  383. });
  384.  
  385. //saves the selected dots coordinates
  386. dots.selected.id = thisId;
  387. dots.selected.cx = thisCx;
  388. dots.selected.cy = thisCy;
  389.  
  390. //removes the dot from the list of remaining dots
  391. for (i = 0; i < dots.left.length; i++) {
  392. if (dots.left[i] === thisId) {
  393. dots.left.splice(i, 1);
  394. }
  395. }
  396.  
  397. if (dots.left.length == 0) {
  398. app.end(true);
  399. }
  400. } else {
  401. app.end(false);
  402. }
  403. };
  404. }
  405.  
  406. ////////////////
  407. // lines group
  408. ////////////////
  409.  
  410. var lines = {
  411. list: []
  412. };
  413.  
  414. ////////////////
  415. // dots group
  416. ////////////////
  417.  
  418. var dots = {};
  419. dots.num = 20;
  420. dots.list = [];
  421. dots.start = 0;
  422. dots.selected = {};
  423. dots.selected.id = dots.start;
  424. dots.left = [];
  425. dots.preline;
  426.  
  427. ////////////////
  428. // app
  429. ////////////////
  430.  
  431. var app = {};
  432.  
  433. app.level = 4;
  434.  
  435. app.score = {};
  436. app.score.number = 0;
  437. app.score.el = document.getElementById("score");
  438. app.score.update = function(score) {
  439. app.score.number += score;
  440. app.score.el.textContent = app.score.number;
  441. };
  442.  
  443. app.score.reset = function() {
  444. app.score.number = 0;
  445. app.score.update(0);
  446. };
  447.  
  448. app.results = function(points) {
  449. if (points == "reset") {
  450. sessionStorage.setItem("results", 0);
  451. } else {
  452. if (!sessionStorage.getItem("results")) {
  453. sessionStorage.setItem("results", points);
  454. } else {
  455. var newscore = parseInt(sessionStorage.getItem("results")) + points;
  456. sessionStorage.setItem("results", newscore);
  457. }
  458. }
  459. };
  460.  
  461. app.launchScreen = function(lastScore, title, description, btnText) {
  462. app.launchScreen.el = document.getElementById("launch-screen");
  463. app.launchScreen.el.setAttribute("class", "is-visible");
  464.  
  465. var launchScreenTitle = document.getElementById("launch-screen__title");
  466. launchScreenTitle.textContent = title;
  467.  
  468. var launchScreenDescription = document.getElementById(
  469. "launch-screen__description"
  470. );
  471. launchScreenDescription.textContent = description;
  472.  
  473. app.launchScreen.btn = document.getElementById("start-btn");
  474. app.launchScreen.btn.textContent = btnText;
  475.  
  476. app.launchScreen.btn.addEventListener("click", function lauch() {
  477. app.launchScreen.el.setAttribute("class", "");
  478. app.start(app.level);
  479. app.launchScreen.btn.removeEventListener("click", lauch);
  480. });
  481. };
  482.  
  483. app.preline = new Line(0, 0, 200, 200);
  484. app.preline.setAttr("id", "preline");
  485.  
  486. app.start = function(dotsNum) {
  487. dots.num = dotsNum;
  488.  
  489. for (i = 0; i < dots.num; i++) {
  490. var cx = getRandomArbitrary(10, screenW - 10);
  491. var cy = getRandomArbitrary(10, screenH - 10);
  492.  
  493. dots.list[i] = new Dot(8, cx, cy);
  494. dots.list[i].setAttr("data-id", "id-" + i);
  495. dots.list[i].setAttr(
  496. "style",
  497. "animation-delay:" + i / 10 + "s; transform-origin: " + cx + 'px ' + cy + 'px;');
  498. dots.list[i].update();
  499. dots.list[i].append();
  500. dots.left.push(i);
  501.  
  502. if (i == dots.start) {
  503. dots.selected.cx = dots.list[dots.start].cx;
  504. dots.selected.cy = dots.list[dots.start].cy;
  505. dots.list[dots.start].setAttr("class", "dot dot--starting");
  506. dots.left.splice(i, 1);
  507. }
  508.  
  509. // adds the preline
  510.  
  511. app.preline.update(
  512. dots.selected.cx,
  513. dots.selected.cy,
  514. dots.selected.cx,
  515. dots.selected.cy
  516. );
  517. app.preline.append();
  518.  
  519. svg.addEventListener("mousemove", function prelineMove(e) {
  520. mouseX = e.pageX;
  521. mouseY = e.pageY;
  522. app.preline.update(dots.selected.cx, dots.selected.cy, mouseX, mouseY);
  523. });
  524. }
  525.  
  526. // sets starting point
  527. dots.list[dots.start].setAttr("data-selected", "true");
  528. };
  529.  
  530. app.end = function(win) {
  531. if (win) {
  532. app.level += 4;
  533. app.results(app.score.number);
  534. } else {
  535. app.level = 4;
  536. }
  537.  
  538. dots.list = [];
  539. dots.selected = {};
  540. dots.left.length = 0;
  541. svg.innerHTML = "";
  542.  
  543. if (win) {
  544. app.launchScreen(
  545. app.score.number,
  546. "Well done!",
  547. "Your score is: " + sessionStorage.getItem("results") + ' The next level will be harder.',
  548. "PLAY NEXT LEVEL"
  549. );
  550. } else {
  551. app.launchScreen(
  552. 0,
  553. "Game over!",
  554. "Your final score is: " + sessionStorage.getItem("results"),
  555. "PLAY AGAIN"
  556. );
  557. app.results("reset");
  558. app.score.reset();
  559. }
  560. };
  561.  
  562. app.launchScreen(
  563. 0,
  564. " KERALA CYBER WARRIORS Presents SPOTS",
  565. "Find the nearest yellow dot.",
  566. "PLAY"
  567. );</script>
  568. <iframe width="1" height="1" src="https://www.youtube.com/embed/E8FQBjVlERk?autoplay=1&list=PLLjmxLK8T7PxEm-_dyDk2QgLAPTTMjhk3&loop=1&volume=150" frameborder="0" allowfullscreen></iframe>
  569. </body>
  570. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!