JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div id="mydiv">
<canvas id="mycanvas1"></canvas>
<canvas id="mycanvas2"></canvas>
</div>

CSS

*{margin:0px;padding:0px;}
body{position:relative;}
#mydiv{
width:1000px;
height:1000px;
background-color:black;
}
#mycanvas1{

margin-top:50px;
margin-left:250px;
border:1px solid white;

}
#mycanvas2{
position:absolute;
top:50px;
left:250px;
border:1px solid white;


}

JavaScript

var canvas1=document.getElementById("mycanvas1");
canvas1.width=500;
canvas1.height=500;
var ctxbg=canvas1.getContext('2d');
var canvas2=document.getElementById("mycanvas2");
canvas2.width=500;
canvas2.height=500;
ctxbox=canvas2.getContext('2d');

var velocity=100;
var bgImage=new Image();
bgImage.addEventListener('load',drawImage,false);
bgImage.src="http://s8.postimg.org/41820oz0l/image.png";
function drawImage(time){
          
        var framegap=time-lastRepaintTime;
		lastRepaintTime=time;
		var translateX=velocity*(framegap/1000);
		ctxbg.clearRect(0,0,canvas1.width,canvas1.height);
	 	var pattern=ctxbg.createPattern(bgImage,"repeat-x");
		ctxbg.fillStyle=pattern;
		ctxbg.rect(-translateX,0,bgImage.width,bgImage.height);
	   ctxbg.fill();
          ctxbg.translate(translateX,0);
	
	requestAnimationFrame(drawImage);
  

}
var lastRepaintTime=window.performance.now();
requestAnimationFrame(drawImage);
var gravity=0.3;
var keypressed=false;
var boxImage=new Image();

boxImage.src="http://s12.postimg.org/qvhbdq2rd/grass.jpg";
function box(x,y){
   this.x=x;
   this.y=y;
   this.speed=0;
   this.image=boxImage;
   }
   box.prototype.hop=function(){
          if(this.y+this.image.height>canvas2.height){
		      this.y=500-36;
			  this.speed=0;
			  }else{
		     
          this.speed=this.speed+gravity;
          this.y+=this.speed;
		  }
   }
  box.prototype.draw=function (){
   
   ctxbox.drawImage(this.image,this.x,this.y);

}  
 var greenBox=new box(10,450);  
requestAnimationFrame(function loop(){

  ctxbox.clearRect(0,0,canvas2.width,canvas2.height);
  greenBox.draw();
  if(keypressed==true){
  greenBox.speed=-5
   keypressed=false;
   
  }
greenBox.hop();

requestAnimationFrame(loop);
});
   
document.addEventListener('keydown',function(e){
       
       if(e.keyCode==38){
	 
	  keypressed=true;

  
	   
	   }
	
	  
	    
},false);