I want the white circle(id="spc") to stop when spacebar is clicked

3788 views javascript css

I am trying to make a game, so I want to use spacebar to determine the speed of the ball thrown.But I was unable to do it , I have been trying various websites for answers but I don't understand where the mistake is.

function pausespc(event) {
  if (event.keyCode === 27) {
    spc.style.animationPlayState = "paused";
#speed {
  height: 350px;
  width: 20px;
  background: linear-gradient(red, yellow, green);
  position: absolute;
  top: 90px;
  left: 875px;
  border: 3px solid black;
  border-radius: 40px;
  display: block;

#spc {
  width: 18px;
  height: 18px;
  background-color: #fff;
  position: absolute;
  border-radius: 50%;
  border: 1px solid black;
  animation: spdc 850ms linear 0s 4 alternate;
  animation-play-state: running;

@keyframes spdc {
  0% {
    top: 0px;
  100% {
    top: 330px;
<div id="speed">
  <div id="spc" onkeydown="pausespc(event)"></div>

answered question

Is the variable 'spc' defined anywhere?

How do I ask a good question: The title should give a short summary of the problem. Introduce the problem before you post any code. (Don't add unnecessary phrases like "Please help...", "Thank you", "Thanks for reading", ...)

I made you a snippet.

1 Answer


Why are you using if(event.keyCode === 27)? The keyCode for space bar is 32. You can try writing if(event.keyCode === 32) and check the results.

posted this

Have an answer?


Please login first before posting an answer.