LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

0

Click/Press space to begin. Refresh to restart.

CSS
* {
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

body {
  font-size: 14px;
}

p {
  font-size: 90%;
  line-height: 25px;
}

/* Wrapper */
.wrapper {
  width: 350px;
  margin: 20px auto;
}

/* Window */
.window {
	height: 450px;
	background: url('https://s30.postimg.org/tycvlfagh/background.png');
	position: relative;
	overflow: hidden;
  margin-bottom: 10px;
}

/* Score */
.score {
  position: absolute;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 250%;
  padding-top: 20px;
  color: #fff;
  font-weight: 700;
  text-shadow: 2px 2px 0 #000;
  z-index: 4;
}

/* Bird */
.bird {
	height: 28px;
	width: 40px;
	background: url('https://s28.postimg.org/k90gybbtl/bird_Sprite.png');
	position: absolute;
	bottom: 50%;
	left: 130px;
	z-index: 3;
  animation: birdFlap 0.2s steps(3, end) infinite alternate;
  transition: transform 0.3s;
}

@keyframes birdFlap {  
  0% {background-position: 0 84px;}
  100% {background-position: 0 0;}
}

/* Pipes */
.pipe {
	width: 60px;
	height: 100%;
	position: absolute;
	right: -60px;
	z-index: 2;
}

.pipe.hidden {
  display: none;
}

.pipe .topHalf {
	background: url('https://s21.postimg.org/kyr2rnpzr/pipe.png') bottom;
	position: absolute;
	top: 0;
	width: 100%;
}

.pipe .bottomHalf {
	background: url('https://s21.postimg.org/kyr2rnpzr/pipe.png') top;
	position: absolute;
	bottom: 0;
	width: 100%;
}
JS
$(function(){
	$window = $('.window'),
	$bird = $('.bird'),
  fallTime = 1000,
  gapHeight = 120,
  gameState = 2,
  pipeId = 0;

	var int = setInterval(function(){
    if(gameState === 1){
      spawnPipe();
      movePipes();
    }
  }, 1300);
  
  var birdPosInterval = setInterval(function(){ 
    if(gameState === 1){
      birdPos();
    }
  }, 10);

	$window.mousedown(function(){
		birdFlap();
    if(gameState === 2){
      gameState = 1;
      deleteInterval();
    }
	});
  
	$(window).keydown(function(e){
		if(e.keyCode === 32){
			birdFlap();
      e.preventDefault();
      if(gameState === 2){
        gameState = 1;
        deleteInterval();
      }
		}
	});

  function deleteInterval(){
	  setTimeout(function(){
		  var int= setInterval(function(){ 
        if(gameState === 1){
          deletePipe();
        }
      }, 1300);
	  }, 2050);
  }
  
	function birdFlap(){
    if(gameState === 1 || gameState === 2){
      $bird.css('transform', 'rotate(-20deg)');
		  $bird.stop().animate({
			  bottom: '+=60px'
  		}, 200, function(){
        birdPos();
        $bird.css('transform', 'rotate(0deg)');
		  	$bird.stop().animate({
			    bottom: '-=60px'
  		  }, 300, 'linear', function(){
          birdPos();
          gravity();
        });
	  	});
    }
	}

	function gravity(){
    birdPercent = parseInt($bird.css('bottom')) / $window.height();
    totalFallTime = fallTime * birdPercent;
		$bird.stop().animate({
			bottom: '0'
		}, totalFallTime, 'linear');

    $bird.css('transform', 'rotate(90deg)');
	}

	function spawnPipe(){
    pipeId++;
		pipeTopHeight = Math.floor(Math.random() * ($window.height() - 250)) + 50;
		pipeBottomHeight = $window.height() - (pipeTopHeight + gapHeight);
		pipe = '
'; $window.append(pipe); } function deletePipe(){ $('.window .pipe').first().remove(); } function movePipes(){ $('.pipe').each(function(){ $(this).animate({ right: '+=160px' }, 1300, 'linear'); }); } function birdPos(){ if(parseInt($bird.css('bottom')) === 0){ gameEnd(); } curPipe = $('.pipe:nth-of-type(4)'); if(curPipe.length > 0){ pipeTop = $('.pipe:nth-of-type(4) .topHalf'); pipeBottom = $('.pipe:nth-of-type(4) .bottomHalf'); if(($bird.offset().left + $bird.width()) >= curPipe.offset().left && $bird.offset().left <= (curPipe.offset().left + curPipe.width())){ if($bird.offset().top < (curPipe.offset().top + pipeTop.height()) || ($bird.offset().top + $bird.height()) > ((curPipe.offset().top + pipeTop.height()) + gapHeight)){ gameEnd(); } } else if($bird.offset().left >= (curPipe.offset().left + curPipe.width())){ $('.score').text(curPipe.attr('pipe-id')); } } } function gameEnd(){ clearInterval(birdPosInterval); $('.pipe').stop(); gravity(); gameState = 0; } })
Host Instantly Drag and Drop Website Builder

 

Description

This is a jQuery version of Flappy Bird. (Only tested in Google Chrome).
Term
Mon, 11/27/2017 - 21:43

Related Codes

Pen ID
Pen ID
Pen ID