JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
  <div class='bg'>
    <div class='clouds'></div>
    <div class='buildings'></div>
    <div class='floor slide_animation'></div>
  </div>
  <div class='pipe_container'>
    <div class='pipes'>
      <div class='top pipe'></div>
      <div class='gap target'></div>
      <div class='bottom pipe'></div>
    </div>
  </div>
  <div class='bird'></div>
  <div class='hud'>
    <div class='intro'>
      <div class='logo'></div>
      <div class='startBtn'></div>
    </div>
    <div class='click'></div>
  </div>
</div>
<div class='flash'></div>
<div class='fullscreen'>Fullscreen</div>

CSS

html, * {
  user-select: none;
  overflow:hidden;
}
.fullscreen{
  position:absolute;
  top:0;
  right:0;
  background: rgba(0,0,0,.5);
  padding:5px;
  border:solid white 2px;
  border-radius:5px;
  cursor:pointer;
}
.wrapper,.bg{
  background:  #4ac3ce;
  width:100%;
  height:100%;
  cursor:default;
}
.flash{
  background:  #fff;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  display:none;
}
.clouds{
  position:absolute;
  bottom:220px;
  width:100%;
  height:65px;
  background-image: 
    url( http://i.imgur.com/muPxV7u.jpg );
}
.buildings{
  position:absolute;
  bottom:55px;
  width:100%;
  height:165px;
  background-image: 
    url( http://i.imgur.com/eKk2wGa.jpg );
}
.floor{
  position:absolute;
  bottom:0;
  width:100%;
  height:55px;
  background-image: 
    url( http://i.imgur.com/d6cKZAT.jpg );
}
.slide_animation{
  animation: slide .3s linear infinite;
}
.bird{
  position:absolute;
  bottom:260px;
  left:50px;
  width:88px;
  height:74px;
  background-image: 
    url(http://i.imgur.com/fJC1dix.gif);
  background-repeat: no-repeat ;
  animation: float 2s linear infinite;
}
.flapp_animation{
  animation: flapp .7s linear;
  animation-fill-mode: forwards;
}
.pipe_container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.pipes{
  position:absolute;
  bottom:55px;
  width:130px;
  height:100%;
}
.pipe{
  width:130px;
  height:700px;
  background-image:
    url(http://i.imgur.com/wn22MTx.gif);
  background-position: 130px 0;
}
.pipe.top{
  background-position: 270px 0;
}
.pipe.bottom{
}
.gap{
  height: 260px;
}
@keyframes slide {
  to { background-position: -60px 0; }
}
@keyframes float {
  0%  {transform: translate( 0px,   0px);}
  30% {transform: translate( 0px, -20px);}
  100%{transform: translate( 0px,   0px);}
}
@keyframes flapp {
  0%  {transform:rotate(0deg);}
  30% {transform:rotate(-40deg);}
  100%{transform:rotate(90deg)}
  /**
  0%{background-position:0 0;}
  32.9%{background-position:0 0;}
 ...

JavaScript

$().ready(onReady);
function onReady(){
  configGame();
  bindings();
  $('.click').fadeOut(0);
  screen=0;
}
function configGame(){
  if(typeof pipe_base === "undefined"){
    pipe_base = $(".pipe_container").html();
  }
  $(".pipes").remove();
  bird = $(".bird");
  bird.attr('style','');
  flash = $(".flash");
  floor = 60;
  flapStrenght = 7;
  gravity = -15;
  accelVariation = .2;
  acceleration = 0;
  bottom = parseInt(bird.css('bottom'));
  space = 0
  tick = 0;
  points=0;
  $('.floor').addClass("slide_animation");
}
function startGame(){
  switch(screen){
      case 0:
        screen=1;
        $('.intro').fadeOut(400, function(){
          $('.click').fadeIn();
        });
      break;
      case 1:
      case 3:
        screen=2;
        if(!tick){
          $('.intro').fadeOut()
          $('.click').fadeOut();
          configGame();
          bird.attr('style','');
          tick = setInterval(onTick,10);
          $(".wrapper").click(flap);
          flap();
        }
      break;
      case 2:
        //game
      break;
  }
}
function bindings(){
  $(".fullscreen").click(toggleFullScreen);
  $(".wrapper").click(startGame);
}
function onTick(){
  acceleration -= accelVariation;
  bottom += acceleration;
  if(acceleration<gravity){
    acceleration = gravity;
  }
  if(bottom<floor){
    hit();
  }
  /**/
  $(".pipe").each(function(){
    if(collision(bird,$(this))){
      hit();
    }
  })
  $(".target").each(function(){
    if(collision(bird,$(this))){
      points++;
      $(this).removeClass("target");
      console.log(points);}
  })
  /**/
  if(space==350){
    space=0;
    var p = $(pipe_base).clone();
    var r = parseInt(100+Math.random()*150);
    //p.children(".top").css('margin-top',-400-Math.random()*150);
    p.children(".top").css({
      'height':r,
      'background-position':'270px '+(-(700-r))+'px'
    });
    p.css('left',$(window).width());
    $(".pipe_container").append(p);
  }
  space++;
  /**/
  bird.css('bottom',bottom);
 ...