API tools faq
paste
Advertisement
beannshie

HTML Flappy Bird

beannshie
Sep 23rd, 2018
962
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.84 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.         <title>Flappy Bird</title>
  7.         <meta name="description" content="">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  10.         <link rel="icon" href="">
  11.         <style>
  12.             * {
  13.                 font-family: sans-serif;
  14.                 font-size: 16px;
  15.                 width: 100%;
  16.                 height: 100%;
  17.                 padding: 0;
  18.                 margin: 0;
  19.             }
  20.             canvas {
  21.                 width: 100%;
  22.                 height: 99.6%;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <canvas id="canvas"></canvas>
  28.         <script>
  29.             var canvas = document.getElementById("canvas");
  30.             var ctx = canvas.getContext("2d");
  31.             var winW = window.innerWidth;
  32.             var winH = window.innerHeight;
  33.             canvas.width  = window.innerWidth;
  34.             canvas.height = window.innerHeight;
  35.             document.onkeydown = checkKey;
  36.            
  37.             var gameSpeed = 30;
  38.            
  39.             var x,y,score;
  40.             var scored = false;
  41.             var jumpH = winH/10;
  42.             var gravity = winH/750;
  43.             var maxGrav = 15;
  44.             const pillarCount = 4;
  45.            
  46.             var pillarX = [];
  47.             var pillarY1 = [];
  48.             var pillarY2 = [];
  49.             var pillarW = winW/(pillarCount*2.75+1);
  50.             var pillarDist = winH/5;
  51.             var ballR = jumpH/3.5;
  52.            
  53.             setup();
  54.             function timeout() {
  55.                 setTimeout(function () {
  56.                     main();
  57.                     timeout();
  58.                 }, gameSpeed);
  59.             };
  60.             timeout();
  61.            
  62.             function setup()
  63.             {
  64.                 x = winW/10;
  65.                 y = winH/2;
  66.                 score = 0;
  67.                
  68.                 for(var i = 0; i < pillarCount; i++)
  69.                 {
  70.                     if(i === 0)
  71.                     {
  72.                         pillarX[i] = winW;
  73.                     }
  74.                     else
  75.                     {
  76.                         pillarX[i] = pillarX[(i-1)] + pillarW*4;
  77.                     }
  78.                     pillarY1[i] = Math.floor(Math.random() * ((winH-winH/5) - (winH/10) + 1)) + (winH/10);
  79.                     pillarY2[i] = pillarY1[i] + pillarDist;
  80.                 }
  81.             }
  82.            
  83.             function main()
  84.             {
  85.                 logic();
  86.                 move();
  87.                 draw();
  88.             }
  89.            
  90.             function move()
  91.             {
  92.                 if(gravity < maxGrav/2)
  93.                 {
  94.                     gravity *= 1.1;
  95.                 }
  96.                 else if(gravity < maxGrav)
  97.                 {
  98.                     gravity *= 1.05;
  99.                 }
  100.                 y += gravity;
  101.                 for(var i = 0; i < pillarCount; i++)
  102.                 {
  103.                     pillarX[i] -= 10;
  104.                 }
  105.             }
  106.            
  107.             function logic()
  108.             {
  109.                 if(y < 0 || y > winH)
  110.                 {
  111.                     alert("You died with a score of " + score);
  112.                     setup();
  113.                 }
  114.                
  115.                 for(var i = 0; i < pillarCount; i++)
  116.                 {
  117.                     if(x >= pillarX[i] && x <= pillarX[i]+pillarW && y-ballR/1.5 > pillarY1[i] && y+ballR/1.5 < pillarY2[i])
  118.                     {
  119.                         if(!scored)
  120.                         {
  121.                             score++;
  122.                             scored = true;
  123.                         }
  124.                     }
  125.                     else if(x+ballR/1.5 >= pillarX[i] && x-ballR/1.5 <= pillarX[i]+pillarW && (y-ballR/1.5 < pillarY1[i] || y+ballR/1.5 > pillarY2[i]))
  126.                     {
  127.                         alert("You died with a score of " + score);
  128.                         setup();
  129.                     }
  130.  
  131.                     if(scored)
  132.                     {
  133.                         if(x > pillarX[i]+pillarW)
  134.                         {
  135.                             scored = false;
  136.                         }
  137.                     }
  138.                
  139.                     if(pillarX[i]+pillarW <= 0)
  140.                     {
  141.                         pillarX[i] += winW + pillarW*4;
  142.                         pillarY1[i] = Math.floor(Math.random() * ((winH-winH/5) - (winH/10) + 1)) + (winH/10);
  143.                         pillarY2[i] = pillarY1[i] + pillarDist;
  144.                     }
  145.                 }
  146.             }
  147.            
  148.             function draw()
  149.             {
  150.                 rect(0,0, winW,winH, '#0088CC');
  151.                 circle(x,y, ballR,'#CCCC00');
  152.                
  153.                 for(var i = 0; i < pillarCount; i++)
  154.                 {
  155.                     rect(pillarX[i],0, pillarW,pillarY1[i],'#007700');
  156.                     rect(pillarX[i],pillarY2[i], pillarW,(winH-pillarY2[i]),'#007700');
  157.                 }
  158.                  
  159.                 ctx.fillStyle = 'red';
  160.                 ctx.font = 'normal bold 42px sans-serif';
  161.                 ctx.textAlign = 'center';
  162.                 ctx.fillText(score,winW/2,winH/15);
  163.                
  164.             }
  165.            
  166.             function rect(x,y, width,height, color)
  167.             {
  168.                 ctx.fillStyle = color;
  169.                 ctx.fillRect(x,y, width,height);
  170.             }
  171.            
  172.             function circle(cX,cY, radius, color)
  173.             {
  174.                 ctx.fillStyle = color;
  175.                 ctx.beginPath();
  176.                 ctx.arc(cX,cY, radius,0,Math.PI*2,true);
  177.                 ctx.fill();
  178.             }
  179.            
  180.             function checkKey(e)
  181.             {
  182.                 var keynum;
  183.                 if(window.event) { // IE                    
  184.                     keynum = e.keyCode;
  185.                 } else if(e.which){ // Netscape/Firefox/Opera                  
  186.                     keynum = e.which;
  187.                 }
  188.                
  189.                 switch(keynum)
  190.                 {
  191.                     case 32:
  192.                         gravity = 0;
  193.                         j = Math.floor(jumpH/2);
  194.                         (function theLoop (i) {
  195.                             setTimeout(function () {
  196.                                 y -= 2;
  197.                                 if (--i) {
  198.                                   theLoop(i);
  199.                                 }
  200.                             }, 1);
  201.                         })(j);
  202.                         setTimeout(function () { gravity = winH/750; }, j);
  203.                         break;
  204.                 }
  205.             }
  206.         </script>
  207.     </body>
  208. </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!