JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<body>
	<img id="bird" src="http://www.clumsy-bird.com/flappy-bird-3.png"/>
	<div id="fullPipe">
		<div id="leftPipe"><img src="http://4.bp.blogspot.com/-B2dadCj19Ac/UrMhgeMNm6I/AAAAAAAAAEs/KTjAPW3VfS8/s1600/mario-pipe.PNG"/></div>
		<div id="rightPipe"><img src="http://4.bp.blogspot.com/-B2dadCj19Ac/UrMhgeMNm6I/AAAAAAAAAEs/KTjAPW3VfS8/s1600/mario-pipe.PNG"/></div>
	</div>
</body>

CSS

html, body 
{ 
	height: 100%; 
	width: 100%;
	margin:0;
	padding:0;
}
body
{
    background-image: url('http://www.albertopasca.it/whiletrue/wp-content/uploads/2014/02/MarioBackground-scrolling-top.png');
    background-repeat: repeat;
	overflow:hidden;
	background-position:0 0;
}

#bird
{
	position:absolute;
	width:4%;
	height: auto;
	right:0;
}

#fullPipe
{
	position:absolute;
	width:100%;
	left:0%;
	height: 10%;
}

#leftPipe, #rightPipe
{
	position:absolute;
	top:0;
	width:48%;
	height: 100%;
}

#leftPipe
{
	left:0%;
}

#rightPipe
{
	right:0%;
}

.zero #leftPipe, .zero #rightPipe
{
	width:48%;
}

.one #leftPipe
{
	width:8%;
}

.one #rightPipe
{
	width:88%;
}

.two #leftPipe
{
	width:28%;
}

.two #rightPipe
{
	width:68%;
}

.three #leftPipe
{
	width:58%;
}

.three #rightPipe
{
	width:38%;
}

.four #leftPipe
{
	width:88%;
}

.four #rightPipe
{
	width:8%;
}

#leftPipe img, #rightPipe img
{
	width:100%;
	height: 100%;
}

JavaScript

$(document).ready(function(){
	//Variables
	var screenWidth = $(window).width();//Screen width
	var screenHeight = $(window).height();//Screen height
	var birdWidth = $("#bird").width();//bird width
	var y = 0;//Background y position
	var astY = 0;//Pipe position

    var bird = {//bird properties
        goingLeft: false,
        goingRight: false,
        lspeed: 0,
        rspeed: 0,
        maxSpeed: 10
    };

	setBirdPosition(screenWidth/2 - birdWidth/2, screenHeight/1.3 - birdWidth/2);
	startBackgroundMovement();
//	spawnPipe();
	
	
	//Start move the screen
	function startBackgroundMovement(){
		setInterval(function()
		{
			y+=1;
		$('body').css('background-position-y',y + 'px');
		}, 10);
	}

	
	//Spaceship starting position
	function setBirdPosition(posX, posY) {
		$("#bird").css("left", posX);
		$("#bird").css("top", posY);
        bird.position = posX;
	}
	 (function birdLoop() {
        if (bird.goingLeft) {
            bird.lspeed = Math.min(bird.lspeed *1.1 || 1, bird.maxSpeed);
        } else {
            bird.lspeed = Math.max(bird.lspeed - 0.5, 0);
        }
        if (bird.goingRight) {
            bird.rspeed = Math.min(bird.rspeed *1.1 || 1, bird.maxSpeed);
        } else {
            bird.rspeed = Math.max(bird.rspeed - 0.5, 0);
        }
        bird.position = bird.position + (bird.rspeed - bird.lspeed);
        $("#bird").css('left', bird.position);
        requestAnimationFrame(birdLoop);
    }());
	
	//Move bird
	$(document).keydown(function(e){
        switch(e.which){
            case 37://left
                bird.goingLeft= true; 
				 //left edge of screen
          if (bird.position < 0) {
            bird.position = 0;
          }
          break;
            case 39://right
                bird.goingRight= true;
				 //right edge of screen
          if (bird.position > screenWidth - birdWidth) {
            bird.position = screenWidth - birdWidth;
          }
            default: return;	
		e.preventDefault();//not sure if...