Jumping in Javascript

programming
1

Hello,

I added some jumping here and it seems to work most of the time.
http://muskiecoding.com/movejump.html

It seems to work most of the time with a glitch once in awhile depending on how quickly or frequency of hitting the space bar. Is there a more eloquent solution or something else I can add for fine-tuning?

The CSS

@keyframes ball{
0%{transform:translate(0,0)}
50%{transform:translate(0,5px) }
0%{transform:translate(0,0) }
}

@keyframes ball-jump{
0%{width:60px;height:60px;box-shadow:0px 0px 0px black;}
50%{width:100px;height:100px;box-shadow:17px 17px 40px black;}
100%{width:60px;height:60px;box-shadow:0px 0px 0px black;}
}

The JS

if(jump==true){
ball.style.animationName="ball-jump"  
setTimeout(timebounce,600)
}```

function timebounce(){
ball.style.animationName="ball";
}
2

I would suggest using a CSS Transition. That will avoid you having to deal with hardcoded keyframe values where if you jump in the middle of an animation, the movement looks unnecessarily…jumpy :slight_smile:

Here is an example:

<!DOCTYPE html>
<html>

<head>
  <title>Jumping</title>

  <style>
    #container {
      width: 100%;
      height: 290px;
      background-color: #EEE;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    #hexagon {
      transition: all .2s ease-in-out;
    }
    #hexagon.bounce {
      transform: scale3d(1.2, 1.2, 1);
    }
    #hexagon.no_bounce {
      transform: scale3d(1, 1, 1);
    }
  </style>
</head>

<body>
  <div id="container">
    <img id="hexagon" src="https://www.kirupa.com/images/hexagon.svg" />
  </div>

  <script>
    var hexagon = document.querySelector("#hexagon");

    window.addEventListener("keydown", checkKeyPressed, false);
    hexagon.addEventListener("transitionend", resetSize, false);

    function checkKeyPressed(e) {
      if (e.keyCode == "32”) {
        hexagon.classList.remove("no_bounce");
        hexagon.classList.add("bounce");
      }
    }

    function resetSize() {
      hexagon.classList.remove("bounce");
      hexagon.classList.add("no_bounce");
    }
  </script>
</body>

</html>
1 Like
3

I saw “transition” and immediately thought “doh!, Why didn’t I think of that?”

4

IMO, as soon as you start to want to encounter real-world physics, you should use a library or framework that calculates those things for you.

Like boxbox in this throwaway project I did in school: http://temp.reclipse.net/NW30-alley/

2 Likes