Gfrktyl

 

 function makeObstacleRND(){

 	if (Math.random()>0.7){makeObstacle()}

 }

 

 function makeObstacle(){

  var el = document.getElementById('world');

  var st = window.getComputedStyle(el, null);

  var tr = st.getPropertyValue("transform");



    var values = tr.split('(')[1];

    values = values.split(')')[0];

    values = values.split(',');

    var a = values[0]*1;

    var b = values[1]*-1;

    var c = values[2]*-1;

    var d = values[3]*1;





		//var mymatrix='matrix('+a+','+b+','+c+','+d+', 0, 0)'

    //var mymatrix='matrix(1,0,0,1, 0, 0)'

    var mymatrix='matrix('+a+','+b+','+c+','+d+',0,0)'

		console.log(mymatrix)

 

 $clone = $('#stock .base').clone( true ).css('transform',mymatrix).appendTo("#world")  .delay(6000).queue(function() {$(this).remove()})

 

 }

 

 function checkObstacle(element) {

    return element.className=='obstacle';

}







function checkCollision(){

	$el=$('#player');

	var myX=400;

  var myY=235;

  var myY=$el.position().top + $el.offset().top -50 //this is not working ok yet

  $('#sensor').css('top',myY+'px').css('left',myX+'px')

  console.log(myY);

	myelements=document.elementsFromPoint(myX, myY)

  isobstacle=(typeof myelements.find(checkObstacle)!="undefined")

 

	if(isobstacle){

  	$('#player').css('background-color','red')

    }

  else{

  	$('#player').css('background-color','green')

    } 

}



var checkCollisionInterval=setInterval(checkCollision, 100);

var makeObstacleRNDInterval=setInterval(makeObstacleRND, 600);

 

 

$( "body" ).keydown(function(e){

	 e.stopPropagation();

 e.preventDefault();

	var $el=$('#player');

	if (!$el.hasClass( "jump" )){

		$('#player').addClass('jump')

    $('#gaia').addClass('bump')

		var timeoutforremoveclass=setTimeout(ready2jump, 280);

  }

})		



function ready2jump(){

	$('#player').removeClass('jump')

  $('#gaia').removeClass('bump')

}

#world{

  background-image: url('https://hyperalbum.com/jump/earth-3228308_19202.png');

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  

  position: absolute;



  width: 1000px;

  height: 1000px;

  animation:spin 10s linear infinite;

  

}

#gaia{

  position: absolute;

  top: 240px;

  left: -100px;

  

}





@keyframes spin { 100% { transform:rotate(-360deg); } }





.base{

  position: absolute;

  top: 0px;

  left: 0px;

  height: 40px;

  margin-top: 480px;

  margin-bottom: 480px;

  width: 1000px;

  display: block;



}



.obstacle {

position: absolute;

top: 0px;

left: 1000px;

display: block;

height: 40px;

width: 40px;

background: blue;

}



#stock {display: none}



#player {

position: absolute;

left: 360px;

top: 140px;

height: 100px;

width: 40px;

background: green;

  

}



.jump{ animation: jump 0.3s linear 0s  normal ;}

.bump{ animation: bump 0.3s linear 0s  normal ;}



@keyframes jump {

  0%{

	transform: translateY(0);

  }

  10%{

	transform: translateY(-140px);

  }



  100%{

	transform: translateY(0px);

  }

}



@keyframes bump {

  0%{

	transform: translateY(0);

  }

  10%{

	transform: translateY(12px);

  }



  40%{

	transform: translateY(0px);

  }



  80%{

	transform: translateY(6px);

  }

  

  100%{

	transform: translateY(0px);

  }

}



#sensor{height: 2px; width:2px; display: block; position: absolute; background-color: orange}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div id="gaia">

<div id="world">

</div>

</div>



<div id="player" href="#">



</div>





<!--<div id="sensor"></div>-->



<div id="stock">

<div class="base">  

<div class="obstacle"></div>

</div> 

</div>