Function is affecting two sprites in simple JavaScript game

Question

I am working on a simple Google dino clone in JavaScript. At this point, an obstacle block is moving on the ground from right to left, and you can jump over it. I want to add a feature where the obstacle block will either be on the ground (you have to jump) or in the air (you have to duck).

I have a function written to make the character jump, which works just fine. I have also written a function to make the character duck. When you do this, the character sprite ducks as expected, but the obstacle moves up at the same time.

The "duck" function should only affect the "sprite" div, but it is also affecting the "obstacle" div, but in reverse (it's "jumping" when it should stay level). I've combed over my code, and I can't see any reason why that is happening. Any ideas?

var sprite = document.querySelector('#sprite');
var jumpButton = document.querySelector('#jump');
var duckButton = document.querySelector('#duck');

function jump() {
  sprite.classList.add('jump');
  setTimeout(function() {
    sprite.classList.remove('jump');
  }, 750);
}

function duck() {
  sprite.classList.add('duck');
  setTimeout(function() {
    sprite.classList.remove('duck');
  }, 750);
}

jumpButton.addEventListener('click', jump);
duckButton.addEventListener('click', duck);

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #373b47;
  font-family: Helvetica, sans-serif;
}

#container {
  margin: 30px auto 0 auto;
  height: 200px;
  width: 500px;
  border: 1px solid #ffffff;
  background-color: #0d003c;
}

#sprite {
  width: 50px;
  height: 50px;
  background-color: #2897bf;
  position: relative;
  top: 150px;
}

@keyframes jump {
  0% {
    top: 150px;
  }

  30% {
    top: 100px;
  }
  
  70% {
    top: 110px;
  }

  100% {
    top: 150px;
  }
}

@keyframes duck {
  0% {
    height: 50px;
    top: 150px;
  }

  50% {
    height: 25px;
    top: 175px;
  }

  100% {
    height: 50px;
    top: 150px;
  }
}

.jump {
  animation: jump 1s;
}

.duck {
  animation: duck 1s;
}

#obstacle {
  width: 25px;
  height: 25px;
  background-color: #afafc2;
  position: relative;
  top: 125px;
  left: 475px;
  animation: move 1s infinite linear;
}

@keyframes move {
  0% {
    left: 475px;
  }

  100% {
    left: 0px;
  }
}

<div id="container">
  <div id="sprite"></div>
  <div id="obstacle"></div>
</div>
<div id="controls">
  <button id="jump">Jump</button>
  <button id="duck">Duck</button>
</div>

Answer 1

I think you made a mistake in your CSS code. You should set the position property of your container to relative, and set the position of other elements to absolute. Also, you should set the bottom value to 0 for both elements so that they are positioned at the bottom of your container. Now, you can use keyframes to change the top property, and these changes will not affect each other. Therefore, your CSS file should be modified as follows:

var sprite = document.querySelector('#sprite');
var jumpButton = document.querySelector('#jump');
var duckButton = document.querySelector('#duck');

function jump() {
  sprite.classList.add('jump');
  setTimeout(function() {
    sprite.classList.remove('jump');
  }, 750);
}

function duck() {
  sprite.classList.add('duck');
  setTimeout(function() {
    sprite.classList.remove('duck');
  }, 750);
}

jumpButton.addEventListener('click', jump);
duckButton.addEventListener('click', duck);

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #373b47;
  font-family: Helvetica, sans-serif;
}

#container {
  position:relative;
  margin: 30px auto 0 auto;
  height: 200px;
  width: 500px;
  border: 1px solid #ffffff;
  background-color: #0d003c;
  overflow-y:hidden;
}

#sprite {
  width: 50px;
  height: 50px;
  background-color: #2897bf;
  position: absolute;
  bottom:0;
  left:0;
}

@keyframes jump {
  0% {
    top: 150px;
  }

  30% {
    top: 100px;
  }
  
  70% {
    top: 110px;
  }

  100% {
    top: 150px;
  }
}

@keyframes duck {
  0% {
    height: 50px;
    top: 150px;
  }

  50% {
    height: 25px;
    top: 175px;
  }

  100% {
    height: 50px;
    top: 150px;
  }
}

.jump {
  animation: jump 1s;
}

.duck {
  animation: duck 1s;
}

#obstacle {
  width: 25px;
  height: 25px;
  background-color: #afafc2;
  position: absolute;
  bottom: 0;
  left: 475px;
  animation: move 1s infinite linear;
}

@keyframes move {
  0% {
    left: 475px;
  }

  100% {
    left: 0px;
  }
}

<div id="container">
<div id="sprite"></div>
<div id="obstacle"></div>
</div>
<div id="controls">
<button id="jump">Jump</button>
<button id="duck">Duck</button>
</div>