2
\$\begingroup\$

I'm coding for fun with the secret ambition of making a fun little game for mobile. So I started out building this little jumping game with Javascript and jQuery.

The game relies heavy on css transformations to do the animations. This way it is not nessecary to do the hard animations work by javascript. I suspect it is also more efficient, but I dont know for sure.

I think it is going ok, but I would love feedback on what should/ could be better/ smarter coded. Also I have this nagging feeling that I should ditch this approach and start over with html5 canvas instead. What are your thoughts?

(The jsfiddle works better: https://jsfiddle.net/hpvl/z7vw03ud/36/ )

 
 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>

\$\endgroup\$
  • 2
    \$\begingroup\$ The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. \$\endgroup\$ – Mathias Ettinger Dec 17 '18 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.