API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 2nd, 2018
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta charset="utf-8">
  6. <link rel="icon" href="miniatura.png">
  7. <title>Fat Runner</title>
  8.  
  9.  
  10. <style type="text/css">
  11. #pAContainer{
  12. width:1000px;
  13. height:800px;
  14. border:1px solid black;
  15. position:relative;
  16. top:10px;
  17. }
  18. #pASky{
  19. position:relative;
  20. height:38em;
  21. background:#aad2f1;
  22. overflow:hidden;
  23. }
  24. #pACh{
  25. position:absolute;
  26. height:32px;
  27. width:20px;
  28. bottom:0px;
  29. display:block;
  30. z-index:9;
  31. }
  32. #pAGround{
  33. position:relative;
  34. height:12em;
  35. top:0%;
  36. background:#99d299;
  37. overflow:hidden;
  38.  
  39. }
  40. #pACloudArea{
  41. position:relative;
  42. clear:both;
  43. height:400px;
  44. width:100%;
  45. overflow:hidden;
  46.  
  47. }
  48. *{
  49. margin:0;
  50. padding:0;
  51. }
  52. #gMenu{
  53. opacity:1;
  54. z-index:10;
  55. position:absolute;
  56. height:100%;
  57. width:100%;
  58. background-image: url('bG.png');
  59. text-align:center;
  60. }
  61. .gMOption{
  62. height:10%;
  63. font-size:75px;
  64. margin-left:auto;
  65. margin-right:auto;
  66. width:30%;
  67. margin-top:5%;
  68. border:1px solid black;
  69. padding:20px;
  70. box-shadow:4px 4px 10px black;
  71.  
  72. }
  73.  
  74. .gMOption:hover{
  75. cursor:pointer;
  76. background-color:rgba(255,255,255,0.3);
  77. transition-duration:1s;
  78. }
  79. #gH2Pwindow{
  80. display:none;
  81. position:relative;
  82. top:-155px;
  83. left:600px;
  84. height:250%;
  85. width:80%;
  86. background-color: rgba(255, 255, 255, 0.5);
  87. padding:2px;
  88. }
  89.  
  90. #gH2P:hover > #gH2Pwindow{
  91. display:block;
  92. box-shadow:4px 4px 10px black;
  93. font-size:21px;
  94. }
  95. #logoBar{
  96.  
  97. height:210px;
  98. width:840px;
  99. position:relative;
  100. margin-left:auto;
  101. margin-right:auto;
  102. top:10px;
  103. }
  104. #logoBar:hover{
  105. cursor:pointer;
  106. }
  107.  
  108. </style>
  109.  
  110. </head>
  111. <body>
  112. <!-- MENU -->
  113.     <div id='gMenu'>
  114.     <a href="#"><img src='logoV2.png' id='logoBar'/></a>
  115.    
  116.     <div id='gAButon' class='gMOption' onclick='menu();game();'>Graj</div>
  117.     <div id='gH2P' class='gMOption'>Jak grać?
  118.     <div id='gH2Pwindow'>W <font color="#79e279">Fat Runner</font> <span style="vertical-align:super;font-size:15px;">&reg;</span> wczuwasz się w gnębionego przez szkolnych kolegów grubasa.
  119.     Twoim zadaniem jest unikać głów swoich prześladowców spadających z nieba.<br>
  120.     <strong>Sterowanie:</strong><br>
  121.     A lub strzałka w lewo - <strong>Poruszanie w lewo </strong><br>
  122.     D lub strzałka w prawo - <strong>Poruszanie w prawo</strong>
  123.    
  124.     </div>
  125.     </div>
  126.    
  127.    
  128.     <div id='qGame' class='gMOption' onclick='quitGame()'>Wyjdź z gry</div>
  129.     </div>
  130.    
  131.     <!-- POLE GRY -->
  132.    
  133.     <div id="pAContainer" style="margin-left:300px;">
  134.         <div id="pASky">
  135.         <div id="pACloudArea">
  136.         </div>
  137.        
  138.         <img src="char01.png" id="pACh" >
  139.         </div>
  140.         <div id="pAGround">
  141.        
  142.        
  143.         </div>
  144.     </div>
  145.     <script>
  146.     function quitGame(){
  147.     if(confirm('Jesteś pewny?')){
  148.     window.close();
  149.     }
  150.    
  151.     }
  152.     function menu(){
  153.     document.getElementById('gMenu').style.opacity = '0';
  154.     document.getElementById('gMenu').style.transitionDuration = '1s';
  155.     setTimeout('document.getElementById("gMenu").style.display = "none";',1000)
  156.    
  157.     }
  158.     //////////////////CHARACTER CONTROL/////////////////////
  159.     var poziomo = 480;
  160.     var x = document.getElementById('pACh');
  161.     document.body.onkeydown = function lol(e){
  162. if((e.keyCode == 68 || e.keyCode == 39) && (x.style.left != '980px')){
  163. poziomo += 10;
  164. x.style.left = poziomo + 'px';
  165. x.src='char02rdir01.png';
  166.     if(poziomo%20==0){
  167.     x.src='char03rdir0201.png';
  168.     }
  169. }
  170.  
  171. if((e.keyCode == 65 || e.keyCode == 37) && (x.style.left != '0px')){
  172. poziomo -= 10;
  173. x.style.left = poziomo + 'px';
  174. x.src='char02ldir01.png';
  175.     if(poziomo%20==0){
  176.     x.src='char03ldir0201.png';
  177.     }
  178. }
  179. }
  180. document.getElementById('pACh').style.left = poziomo + 'px';
  181.     ////////////////////GENERATE ENVIRONMENT/////////////////////////////////
  182.     //var pos_x = Math.floor((Math.random()*1000)+301);
  183.     //var pos_y = Math.floor((Math.random()*400)+1);
  184.     //alert(pos_x + ':' + pos_y);
  185.     window.onload = chmurki;
  186.  
  187.     function chmurki(){
  188.         var clouds = Math.floor((Math.random()*10)+1);
  189.             for(var i = 0; i<clouds;i++){
  190.           var pos_x = Math.floor((Math.random()*1000)-130);
  191.           var pos_y = Math.floor((Math.random()*300)+1);
  192.           var ccount = document.createElement('IMG');
  193.               ccount.src = 'clouds.png';
  194.               ccount.style.height = '100px';
  195.               ccount.style.width= '150px';
  196.               ccount.style.position = 'absolute';
  197.               ccount.style.display = 'block';
  198.               ccount.style.zIndex = '3';
  199.               ccount.setAttribute('class', 'chmury');
  200.               ccount.style.left = pos_x + 'px';
  201.               ccount.style.top = pos_y + 'px';
  202.               document.getElementById('pACloudArea').appendChild(ccount);
  203.           }
  204.  
  205.           kamykiitrawa();
  206.   }
  207.   function kamykiitrawa(){
  208.       var stones =  Math.floor((Math.random()*3)+1);
  209.       var thots =  Math.floor((Math.random()*14)+1);
  210.           for(var i = 0; i<stones;i++){
  211.               var pos_x = Math.floor((Math.random()*1000)-130);
  212.               var pos_y = Math.floor((Math.random()*190)+1);
  213.               var kcount = document.createElement('IMG');
  214.               kcount.src = 'stone.png';
  215.               kcount.id = 'kamien' + i;
  216.               kcount.style.height = '50px';
  217.               kcount.style.width= '90px';
  218.               kcount.style.position = 'absolute';
  219.               kcount.style.zIndex = '2';
  220.               kcount.style.display = 'block';
  221.               kcount.style.left = pos_x + 'px';
  222.               kcount.style.top = pos_y + 'px';
  223.               document.getElementById('pAGround').appendChild(kcount);
  224.            
  225.               var kamyk = document.getElementById('kamien' + i);
  226.            
  227.            
  228.            
  229.           }
  230.           for(var i = 0; i<thots;i++){
  231.           var pos_x = Math.floor((Math.random()*1000)-130);
  232.               var pos_y = Math.floor((Math.random()*190)-10);
  233.               var tcount = document.createElement('IMG');
  234.               tcount.src = 'tuft.png';
  235.               tcount.id='trawa' + i;
  236.               tcount.setAttribute('class' , 'grass');
  237.               tcount.style.height = '75px';
  238.               tcount.style.zIndex = '1';
  239.               tcount.style.width= '55px';
  240.               tcount.style.position = 'absolute';
  241.               tcount.style.display = 'block';
  242.               tcount.style.left = pos_x + 'px';
  243.            
  244.               tcount.style.top = pos_y + 'px';
  245.               document.getElementById('pAGround').appendChild(tcount);
  246.               var trawka = document.getElementById('trawa' + i);
  247.            
  248.                
  249.           }
  250.           if(trawka.style.top < kamyk.style.top){
  251.                   tcount.style.zIndex = '2';
  252.                   kcount.style.zIndex = '1';
  253.                   }
  254.  
  255.                   falowanie();
  256.  
  257.   }
  258.   var wavePoint = 0;
  259.   function falowanie(){
  260.   wavePoint+=1;
  261.   setTimeout('falowanie()', 500);
  262.   var z = document.getElementsByClassName('chmury');
  263.   var x = document.getElementsByClassName('grass');
  264.   var y = x.length;
  265.   var w = z.length;
  266.       for(var i = 0; i<y;i++){
  267.       if(i%2==0){
  268.           if(x[i].style.transform == 'rotateY(15deg)'){
  269.               x[i].style.transform = 'rotateY(-25deg)';
  270.               }
  271.           else{x[i].style.transform = 'rotateY(15deg)';};
  272.    
  273.       }
  274.       else{
  275.           if(x[i].style.transform == 'rotateY(-25deg)'){
  276.           x[i].style.transform = 'rotateY(15deg)';
  277.           }
  278.           else{x[i].style.transform = 'rotateY(-25deg)';}
  279.  
  280.   }
  281.   }
  282.       for(var i=0; i<w;i++){
  283.       if(i%2==0){
  284.           if(z[i].style.transform == 'rotateX(0deg)'){
  285.               z[i].style.transform = 'rotateX(-15deg)';
  286.            
  287.               }
  288.           else{z[i].style.transform = 'rotateX(0deg)';};
  289.    
  290.       }
  291.       else{
  292.           if(z[i].style.transform == 'rotateX(-15deg)'){
  293.           z[i].style.transform = 'rotateX(0deg)';
  294.           }
  295.           else{z[i].style.transform = 'rotateX(-15deg)';}
  296.    
  297.    
  298.    
  299.       }
  300.   }
  301.       }
  302. //////////////////////////GAME MECHANISMS/////////////////////////////
  303. var poziom = 1;
  304. var eCount = poziom * 10;
  305. var pos_y = 600;
  306.  
  307. function game(){
  308.  
  309. document.getElementById('gAButon').onclick = '';
  310. for(var i=0;i<eCount;i++){
  311.   var pos_x = Math.floor((Math.random()*(100)+0))*10;
  312.   var enemyFace = document.createElement('IMG');
  313.   var faceNumber = Math.floor((Math.random()*6)+1);
  314.       enemyFace.src = 'face' + faceNumber+'.jpg';
  315.       enemyFace.style.position = 'absolute';
  316.       enemyFace.style.display = 'block';
  317.       enemyFace.style.height = '20px';
  318.       enemyFace.style.width = '20px';
  319.       enemyFace.setAttribute('class' , 'enemies');
  320.       enemyFace.style.left = pos_x + 'px';
  321.       enemyFace.style.bottom = pos_y + 'px';
  322.       document.getElementById('pASky').appendChild(enemyFace);
  323. }
  324.        
  325.   setTimeout(function(){
  326.       var elo = 0;
  327.       var chX = document.getElementById('pACh').style;
  328.       var x = document.getElementsByClassName('enemies');
  329.       var z = x.length;
  330.        
  331.       for(var i = z-1;i>0;i--){                       //problem dotyczy tej pętli.
  332.                        
  333.             //tworzenie zdjęć i ich wysokosci
  334.                 if(x[i].style.bottom > '0px'){                                                          //
  335.                
  336.                     x[i].style.transitionDuration = '0.3s';        
  337.                     x[i].id = 'fejs'+i;
  338.                     x[i].style.bottom = pos_y+elo+'px';
  339.                         elo-=20;
  340.                             //document.querySelector('#fejs'+i).style.bottom = pos_y+elo + 'px';  
  341.                             //document.getElementById('pASky').childNodes[i].style.bottom = elo+'px';
  342.  
  343.                            
  344.                                            
  345. }
  346.                                                                                                                 //
  347.     //zderzenie z graczem - koniec gry ;d
  348.                 if((chX.left==x[i].style.left)&&(x[i].style.bottom=='0px')){
  349.               alert('siema');
  350.                 }
  351.  
  352.     //spadnięcie na ziemię
  353.                 if(x[i].style.bottom<='0px'){                                                           //
  354.                   if(x[i] && x[i].parentElement){
  355.                   x[i].parentElement.removeChild(x[i]);
  356.                   }
  357.  
  358.               }  
  359.  
  360.       }                                                                                                           //
  361.    
  362. game();
  363.  
  364. },300);
  365.  
  366.  
  367.  
  368. }
  369.  
  370. </script>
  371. </body>
  372. </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!