API tools faq
paste
lyonlyke

JET ATTACK!

lyonlyke
Oct 11th, 2018
175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Jet Attack</title>
  5.  
  6. <meta name="author" content="Lionel Mertens" />
  7. <meta name="description" content="JET ATTACK is a simple video game that utilizes web browser SVG capabillities." />
  8. <meta name="keywords" content="JET ATTACK!" />
  9.  
  10. <!-- for-mobile-apps -->
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  13.  
  14. <!-- //for-mobile-apps -->
  15. <style>
  16. body{margin:0px;
  17. overflow-x:hidden;
  18. overflow-y:hidden;
  19. background-color:#000;
  20. }
  21.  
  22. #battleZone {
  23. height:100%;
  24. width:100%;
  25. margin:0;
  26. overflow-x:hidden;
  27. }
  28.  
  29. svg#jet {
  30. position:absolute;
  31. display:block;
  32. stroke:#000;
  33. stroke-width:0.2;
  34. fill:transparent;
  35. margin-right:-75px;
  36. top:0;
  37. right:0;
  38. }
  39.  
  40.  
  41.  
  42. svg#rocket {
  43. position:absolute;
  44. display:block;
  45. margin:0 calc(50% - 20px);
  46. stroke:#000;
  47. stroke-width:0.2;
  48. fill:transparent;
  49. bottom:22px;
  50. }
  51.  
  52. #flame,
  53. #wreckage,
  54. #blast {display:none;}
  55.  
  56.  
  57.  
  58.  
  59. #panel {
  60. position:absolute;
  61. display:inline-block;
  62. margin:0 calc(50% - 137px);
  63.  
  64. width:274px;
  65. height:25px;
  66. bottom:2px;
  67. }
  68.  
  69. .stats {
  70. position:relative;
  71. display:inline-block;
  72. width:100px;
  73. height:25px;
  74. line-height:25px;
  75. padding:0;
  76. margin:0 4px;
  77. background-color:#fff;
  78. border-radius:2px;
  79. text-align:left;
  80. text-indent:6px;
  81. font-family:sans-serif;
  82. font-size:13px;
  83. font-weight:normal;
  84. letter-spacing:1px;
  85.  
  86. }
  87.  
  88.  
  89.  
  90. #kills {
  91. float:left;
  92. }
  93.  
  94.  
  95.  
  96. #rockets {
  97. float:right;
  98. }
  99.  
  100.  
  101.  
  102.  
  103.  
  104. #btn {
  105.  
  106. display:inline-block;
  107. margin:0 auto;
  108. width:auto;
  109. line-height:20px;
  110. text-align:center;
  111. background-color:#008080;
  112. border:1px solid #008080;
  113. border-radius:3px;
  114. padding:0 8px;
  115. color:#FFF;
  116. font-family: 'Arial', Helvetica, Sans-Serif;
  117. font-size:14px;
  118. font-weight:300;
  119. text-decoration:none;
  120. letter-spacing:2px;
  121. box-shadow:0px 0px 2px 2px cyan;
  122.  
  123. }
  124.  
  125. #btn:hover {color:cyan;}
  126.  
  127. #btn:focus {outline:none;}
  128. #btn:active {
  129. box-shadow:0px 0px 3px 3px cyan, 0px 0px 2px 2px lime;
  130. color:#FFF;}
  131.  
  132.  
  133.  
  134.  
  135.  
  136. </style>
  137.  
  138.  
  139. <script>
  140.  
  141.  
  142.  
  143. rocketHeight = 72;
  144. buttonHeight = 20;
  145. jetHeight = 20;
  146. deductions = rocketHeight + buttonHeight + jetHeight;
  147. fired = 'false';
  148. flightWidth = screen.availWidth + 75;
  149. screenWidth = screen.availWidth;
  150. screenHeight = screen.availHeight;
  151. deadCenter = screenWidth / 2;
  152. flightDirection = -5;
  153. topSpacer = 100;
  154. bottomSpacer = 300;
  155. rocketSpot = 0;
  156. kills = 0;
  157. rockets = 100;
  158. flyBys = 0;
  159.  
  160.  
  161. flightData = new Array (
  162.  
  163. -1,1,1,7,
  164. 0,1,1,0,
  165. 1,1,1,-7,
  166.  
  167. -1,1,-1,-7,
  168. 0,1,-1,0,
  169. 1,1,-1,7,
  170.  
  171. -1,-1,1,7,
  172. 0,-1,1,0,
  173. 1,-1,1,-7,
  174.  
  175. -1,-1,1,7,
  176. 0,1,1,180,
  177. 1,1,1,187
  178. );
  179.  
  180.  
  181.  
  182. function randomize(min, max){
  183. return Math.floor(Math.random() * (max - min)) + min;
  184. }
  185.  
  186.  
  187.  
  188. function flightPlan(adjuster) {
  189.  
  190. var randNum = 4 * (randomize(0,6));
  191. var i = randNum + adjuster;
  192. step = flightData[i];
  193. scaaleX = flightData[i+1];
  194. scaaleY = flightData[i+2];
  195. rotation = 'rotate('+flightData[i+3]+'deg)';
  196.  
  197. if(step != -1){topSpacer = 10;bottomSpacer = 400;}
  198. else{topSpacer = 300;bottomSpacer = 100;}
  199.  
  200. var randNum = randomize(topSpacer,(screenHeight - bottomSpacer));
  201. trajectory = randNum;
  202.  
  203. }
  204.  
  205. function postStats(ID,TEXT) {
  206. document.getElementById(ID).innerHTML=TEXT;
  207. }
  208.  
  209.  
  210. function takeOff(){
  211. alert('Welcome to JET ATTACK\!\nYou have 100 rockets to shoot down as many jets as you can.\nGood Luck!\nPress \'OK\' to play JET ATTACK\!');
  212. postStats('kills','Kills: '+kills);
  213. postStats('rockets','Rockets: '+rockets);
  214.  
  215. displayId('jet','block');
  216.  
  217. flightLength = -75;
  218.  
  219. stopFlight = setInterval(flyLeft,0010);
  220.  
  221. flightPlan(0);
  222.  
  223. }
  224.  
  225. function propelJet() {
  226.  
  227. var r = 'matrix('+scaaleX+',0,0,'+scaaleY+','+flightLength+','+trajectory+') '+rotation;
  228.  
  229. styleTransform('jet',r);
  230.  
  231. flightLength = flightLength + flightDirection;
  232. trajectory = trajectory + step;
  233.  
  234. }
  235.  
  236.  
  237. function flyLeft() {
  238.  
  239. if(flightLength > -flightWidth){
  240. propelJet();
  241. }
  242. else {
  243. clearInterval(stopFlight);
  244. flyBys++;
  245. stopFlight = setInterval(flyRight,0010);
  246. flightDirection = 5;
  247. flightPlan(24);
  248. }
  249.  
  250. }
  251.  
  252.  
  253. function flyRight() {
  254.  
  255. if(flightLength < 0){
  256. propelJet();
  257.  
  258. }
  259. else {
  260. clearInterval(stopFlight);
  261. flyBys++;
  262. stopFlight = setInterval(flyLeft,0010);
  263. flightDirection = -5;
  264. flightPlan(0);
  265.  
  266. }
  267. }
  268.  
  269.  
  270. function fireRocket() {
  271.  
  272.  
  273. if(fired == 'true'){return;}
  274. else{
  275. rocketPath = 0;
  276. fired = 'true';
  277. displayId('flame','block');
  278. rockets--;
  279. postStats('rockets','Rockets: '+rockets);
  280.  
  281. stopRocket = setInterval(propelRocket,0002);
  282. }
  283. }
  284.  
  285. function crashLand() {
  286.  
  287. if(trajectory < screenHeight){
  288.  
  289. var rot = 'rotate('+cartWheel+'deg)';
  290. var c = 'matrix('+scaaleX+',0,0,'+scaaleY+','+flightLength+','+trajectory+') '+rot;
  291.  
  292. styleTransform('jet',c);
  293.  
  294. flightLength = flightLength + flightDirection;
  295. trajectory = trajectory + step;
  296. cartWheel = cartWheel + (flightDirection * 2);
  297. }
  298. else{clearInterval(
  299. stopCrash);
  300. resetRocket();
  301. flyBys++;
  302. stopFlight = setInterval(flyLeft,0010);
  303. displayId('fuselage','block');
  304. displayId('thruster','block');
  305. displayId('wreckage','none');
  306.  
  307. flightLength = -75;
  308. flightDirection = -5;
  309. flightPlan(0);
  310.  
  311. }
  312. }
  313.  
  314. function afterMath() {
  315.  
  316. displayId('blast','none');
  317. displayId('fuselage','none');
  318. displayId('thruster','none');
  319. displayId('wreckage','block');
  320.  
  321. cartWheel = flightDirection;
  322. stopCrash = setInterval(crashLand,0030);
  323. clearInterval(stopFlight);
  324. step = 15;
  325. }
  326.  
  327.  
  328. function resetRocket(){
  329.  
  330. if(rockets < 1){
  331. clearInterval(stopFlight);
  332. alert('Congratulations you shot down '+kills+' jets.\nIn '+flyBys+' flyBys.');
  333. window.location.reload(false);
  334. }
  335.  
  336.  
  337.  
  338. rocketPath = 0;
  339.  
  340. var m = 'matrix(1,0,0,1,'+rocketSpot+','+rocketPath+')';
  341. styleTransform('rocket',m);
  342.  
  343. toggleRocket('block');
  344. fired = 'false';
  345. }
  346.  
  347.  
  348.  
  349. function propelRocket(){
  350.  
  351. var rocketY = (screenHeight - deductions) + rocketPath;
  352.  
  353. var killZoneLeft = deadCenter + 74;
  354. var killZoneRight = deadCenter - 9;
  355. var killZoneTop = trajectory + 6;
  356. var killZoneBottom = trajectory - 6;
  357.  
  358.  
  359. if((-flightLength < killZoneLeft) && (-flightLength > killZoneRight) && (rocketY > killZoneBottom) && (rocketY < killZoneTop)){
  360.  
  361.  
  362. clearInterval(stopRocket);
  363. toggleRocket('none');
  364.  
  365. displayId('blast','block');
  366.  
  367. kills++;
  368. postStats('kills','Kills: '+kills);
  369.  
  370. setTimeout(afterMath,0300);
  371. }
  372. if(rocketPath > -screenHeight){
  373.  
  374. var m = 'matrix(1,0,0,1,'+rocketSpot+','+rocketPath+')';
  375. styleTransform('rocket',m);
  376.  
  377. rocketPath = rocketPath - 5;
  378.  
  379. }
  380. else{
  381.  
  382. clearInterval(stopRocket);
  383. resetRocket();
  384.  
  385. }
  386. }
  387.  
  388.  
  389. function toggleRocket(status){
  390.  
  391. rocketParts = new Array ('rocket-body','fin','flame');
  392.  
  393. displayId('rocket-body',status);
  394. displayId('fin',status);
  395. displayId('flame','none');
  396. }
  397.  
  398.  
  399.  
  400.  
  401. function displayId(ID,DISPLAY) {
  402. document.getElementById(ID).style.setProperty('display',DISPLAY);
  403. }
  404.  
  405. function styleTransform(ID,TRANS){
  406.  
  407. document.getElementById(ID).style.transform=TRANS;
  408.  
  409. }
  410.  
  411.  
  412. function shiftRocket(shift){
  413. rocketSpot = rocketSpot + shift;
  414. deadCenter = deadCenter + shift;
  415.  
  416. var m = 'matrix(1,0,0,1,'+rocketSpot+','+rocketPath+')';
  417.  
  418. styleTransform('rocket',m);
  419.  
  420.  
  421.  
  422. }
  423.  
  424.  
  425. </script>
  426.  
  427.  
  428.  
  429. </head>
  430. <body onload="takeOff()">
  431. <div id="battleZone">
  432.  
  433.  
  434.  
  435.  
  436. <svg id="jet" width="75" height="15" viewBox="0 0 50 10">
  437. <defs>
  438.  
  439.  
  440. <pattern id="fuselage" width="50" height="10" patternUnits="userSpaceOnUse">
  441. <polyline fill="lime" points="0,7 7,5.6 12,5.7 15,5.3 18.2,4 23,6 35,6 43,0 45,0 40.5,9 32,9.8 15,10 7,9.1 0,7">
  442. </polyline>
  443. </pattern>
  444.  
  445. <pattern id="wreckage" width="50" height="10" patternUnits="userSpaceOnUse">
  446. <polyline fill="#555" points="0,7 7,5.6 12,5.7 15,5.3 18.2,4 23,6 35,6 43,0 45,0 40.5,9 32,9.8 35,6 15,5.3 15,10 7,9.1 0,7">
  447. </polyline>
  448. </pattern>
  449.  
  450.  
  451. <pattern id="thruster" width="50" height="10" patternUnits="userSpaceOnUse">
  452. <polyline stroke-width=".4" stroke="orange" fill="yellow" points="40.6,8 50,7 41.9,6">
  453. </polyline>
  454. </pattern>
  455.  
  456.  
  457. <pattern id="wing" width="50" height="10" patternUnits="userSpaceOnUse">
  458. <polyline stroke-width=".5" points="15,7.9 28,8.2 ">
  459. </polyline>
  460. </pattern>
  461.  
  462. <pattern id="cockpit" width="50" height="10" patternUnits="userSpaceOnUse">
  463. <polyline fill="white" stroke-width=".3" points="7,5.6 11,3.5 12.5,3 14,2.8 16,3 18.2,4 15,5.3 12,5.7">
  464. </polyline>
  465. </pattern>
  466.  
  467.  
  468.  
  469. <pattern id="tail" width="50" height="10" patternUnits="userSpaceOnUse">
  470. <polyline stroke-width=".5" points="36,7 41,6.8">
  471. </polyline>
  472. </pattern>
  473.  
  474.  
  475. </defs>
  476.  
  477. <rect x="0" y="0" width="50" height="10" stroke-width="0" fill="url(#fuselage)" />
  478.  
  479. <rect x="0" y="0" width="50" height="10" stroke-width="0" fill="url(#wreckage)" />
  480.  
  481.  
  482. <rect x="0" y="0" width="50" height="10" stroke-width="0" fill="url(#wing)" />
  483.  
  484. <rect x="0" y="0" width="50" height="10" stroke-width="0" fill="url(#cockpit)" />
  485.  
  486. <rect x="0" y="0" width="50" height="10" stroke-width="0" fill="url(#tail)" />
  487.  
  488. <rect x="0" y="0" width="50" height="10" stroke-width="0" fill="url(#thruster)" />
  489.  
  490. </svg>
  491.  
  492.  
  493.  
  494.  
  495.  
  496.  
  497.  
  498.  
  499.  
  500.  
  501.  
  502.  
  503.  
  504.  
  505. <svg id="rocket" width="40" height="40" viewBox="0 0 25 25">
  506. <defs>
  507. <pattern id="rocket-body" width="25" height="25" patternUnits="userSpaceOnUse">
  508. <polyline fill="red" points="12.5,0 13.5,2 13.5,14 15.5,17 15.5,20 13.5,20 13.5,19 12.5,18 11.5,19 11.5,20 9.5,20 9.5,17 11.5,14 11.5,2 12.5,0 ">
  509.  
  510. </polyline>
  511. </pattern>
  512.  
  513. <pattern id="fin" width="25" height="25" patternUnits="userSpaceOnUse">
  514. <polyline fill="red" stroke-width=".1" points="12.1,15.5 12.5,14 12.9,15.5 12.9,20 12.1,20 12.1,15.5">
  515.  
  516.  
  517.  
  518. </polyline>
  519. </pattern>
  520.  
  521. <pattern id="flame" width="25" height="25" patternUnits="userSpaceOnUse">
  522. <polyline fill="yellow" stroke="orange" stroke-width=".4" points="11.5,20 12.5,25 13.5,20">
  523. </polyline>
  524. </pattern>
  525.  
  526. <pattern id="explosion" width="25" height="25" patternUnits="userSpaceOnUse">
  527. <circle cx="12.5" cy="12.5" r="6.5" fill="red" />
  528. </pattern>
  529.  
  530.  
  531. <pattern id="explosion2" width="25" height="25" patternUnits="userSpaceOnUse">
  532. <circle cx="12.5" cy="12.5" r="7.5" stroke="DarkOrange" stroke-width="2.8" fill="url(#explosion" />
  533. </pattern>
  534.  
  535.  
  536. </defs>
  537.  
  538. <rect x="0" y="0" width="25" height="25" stroke-width="0" fill="url(#rocket-body)" />
  539.  
  540. <rect x="0" y="0" width="25" height="25" stroke-width="0" fill="url(#fin)" />
  541.  
  542. <rect x="0" y="0" width="25" height="25" stroke-width="0" fill="url(#flame)" />
  543.  
  544.  
  545. <circle id="blast" stroke="yellow" stroke-width="1" cx="12.5" cy="12.5" r="10" fill="url(#explosion2)" />
  546. </svg>
  547.  
  548.  
  549.  
  550.  
  551.  
  552.  
  553.  
  554.  
  555.  
  556.  
  557.  
  558.  
  559.  
  560.  
  561.  
  562.  
  563.  
  564. <div id="panel">
  565.  
  566. <div class="stats" id="kills"></div>
  567.  
  568. <button id="btn" onclick="fireRocket()">Fire!</button>
  569.  
  570. <div class="stats" id="rockets"></div>
  571.  
  572. </div>
  573.  
  574. </div>
  575. </body>
  576. </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!