How to detect arrow keys in a Javascript game?

Question

I made a pong like game and I want to control the paddle with arrow keys instead of the mouse.

For some reason the game is not detecting the keypress. Also, I tried adding a pause game function when I press P, but I am also stuck on this.

Can somebody please help?

The declaration of the event listeners:

document.addEventListener('keydown', event => {
        if (event.keyCode === 38) {
            paddle1 += 5;
        } else if (event.keyCode === 40) {
            paddle1 -= 5;
        } else if (event.keycode === 80) {
            PausePressed;
        }
    });

Here's the full pong game with keyboard controls:

    
        var canvas;
        var canvasContext;
        var ballX = 50;
        var ballSpeedX = 10;
        var ballY = 50;
        var ballSpeedY = 5;
        var ym = 10; // the movement of y axis
        var keys = new Array();
        
        var player1Score = 0;
        var player2Score = 0;
        const WinningScore = 5;
        
        var showingWinScreen = false;
        
        var paddle1 = 350;
        var paddle2 = 350;
        const paddleHeight = 100;
        const paddleThickness = 10;
    
        
        
        function PausePressed(evt) {
            if(showingWinScreen) {
                player1Score = 0;
                player2Score = 0;
                showingWinScreen = false;
                
            }
        }
        
        
        
        window.onload =function() {
            canvas = document.getElementById('Mycanvas');
            canvasContext = canvas.getContext('2d');
            window.addEventListener('keydown',doKeyDown,true);
            window.addEventListener('keyup',doKeyUp,true);
    
            var framesPerSecond = 60;
            setInterval(function() {
                moveEverything();
                drawEverything();
            }, 1000/framesPerSecond);
    
     }
     function ballReset(){
         if(player1Score >= WinningScore ||
            player2Score >= WinningScore) {
    
             showingWinScreen = true;
         }
         
         ballX = canvas.width/3;
         ballY = canvas.height/3;
         ballSpeedX = -ballSpeedX
     }       
    
    function doKeyDown(evt){   
            keys[evt.keyCode] = true;
            evt.preventDefault();   // Prevents the page to scroll up/down while pressing arrow keys
        }
    
        function doKeyUp(evt) {
            keys[evt.keyCode] = false;
        }       
        
    function move() {
            if (38 in keys && keys[38]){ //up
                paddle1 += ym;
            }
            if (40 in keys && keys[40]){ //down
                paddle1 -= ym;
            }
    }
        
        function computerMovement() {
            var paddle2Center = paddle2 + (paddleHeight/2);
            if(paddle2Center < ballY - 30) {
              paddle2 = paddle2 + 8;
          } else if(paddle2Center > ballY + 30) {
              paddle2 = paddle2 - 8;
          }  
        }
        
        function moveEverything(){
            if(showingWinScreen) {
                return;
            }
            
            
            
            computerMovement();
            
         ballX = ballX + ballSpeedX;
         ballY = ballY + ballSpeedY;
         if(ballX > canvas.width) {
             if(ballY > paddle2 &&
               ballY < paddle2+paddleHeight) {
                 ballSpeedX = -ballSpeedX;
                 
                 var deltaY = ballY
                        -(paddle2+paddleHeight/2);
                 ballSpeedY = deltaY * 0.25;
                 
             } else {
                 player1Score += 1;
                 ballReset();
             }
         }
         if(ballX < 0) {
             if(ballY > paddle1 &&
               ballY < paddle1+paddleHeight) {
                 ballSpeedX = -ballSpeedX;
                 
                 var deltaY = ballY
                        -(paddle1+paddleHeight/2);
                 ballSpeedY = deltaY * 0.25;
                 
             } else {
                 player2Score += 1;
                 ballReset();
             }
         }
         if(ballY > canvas.height) {
             ballSpeedY = -ballSpeedY
         }
         if(ballY < 0) {
             ballSpeedY = -ballSpeedY
         }
     }
    
        
     function drawNet() {
         for(var i=0;i<canvas.height; i+=40) {
             colorRect(canvas.width/2-1,i,2,20,'white');
         }
     }   
        
     function drawEverything() {
         
    colorRect(0,0,canvas.width,canvas.height,'black');
         
                 if(showingWinScreen) {
                     canvasContext.fillStyle = 'white';
                     
                        if(player1Score >= WinningScore) {
                            canvasContext.font = 'italic 60pt Calibri';
                            canvasContext.fillText('Left Player Won!', 475,350);
                        } else if(player2Score >= WinningScore) {
                            canvasContext.font = 'italic 60pt Calibri';
                            canvasContext.fillText('Right Player Won', 475,350);
                        }
                     
                      canvasContext.font = 'italic 80pt Calibri';  
                     canvasContext.fillText('click to continue', 400,600);
                     
                     
                return;
            }
         
            drawNet();
         
    colorRect(0,paddle1,paddleThickness,paddleHeight,'white');
    colorRect(canvas.width-paddleThickness,paddle2,paddleThickness,paddleHeight,'white');
    colorCircle(ballX, ballY, 10, 'white')
         
         canvasContext.fillText(player1Score, 100,100);
         canvasContext.fillText(player2Score, canvas.width-100,100);
         
     
     }
        function colorRect(leftX,topY, width, height, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.fillRect(leftX,topY, width,height);
        }
        
        function colorCircle(centerX, centerY, radius, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2, true);
            canvasContext.fill();
        }
    
        init();
        

    <html>
        <head>
        
        <title>Ping Pong Game</title>
    
        </head>
    <body bgcolor="#FFB630">
    
    <canvas id="Mycanvas" width="1600" height="800"></canvas>
        
   
        
        <div>
        <h1>The Ping Pong Game</h1>
        
            <h2>Use the mouse to control the paddle!</h2>
        </div>
    
        </body>
    
    </html>

And here's the original game with mouse control

var canvas;
var canvasContext;
var ballX = 50;
var ballSpeedX = 10;
var ballY = 50;
var ballSpeedY = 5;

var player1Score = 0;
var player2Score = 0;
const WinningScore = 5;

var showingWinScreen = false;

var paddle1 = 350;
var paddle2 = 350;
const paddleHeight = 100;
const paddleThickness = 10;

function calculateMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  var root = document.documentElement;
  var mouseX = evt.clientX - rect.left - root.scrollLeft;
  var mouseY = evt.clientY - rect.top - root.scrollTop;
  return {
    x: mouseX,
    y: mouseY
  }
}

function handleMouseClick(evt) {
  if (showingWinScreen) {
    player1Score = 0;
    player2Score = 0;
    showingWinScreen = false;

  }
}

window.onload = function() {
  canvas = document.getElementById('Mycanvas');
  canvasContext = canvas.getContext('2d');

  var framesPerSecond = 60;
  setInterval(function() {
    moveEverything();
    drawEverything();
  }, 1000 / framesPerSecond);

  canvas.addEventListener('mousedown', handleMouseClick);

  canvas.addEventListener('mousemove',
    function(evt) {
      var mousePos = calculateMousePos(evt);
      paddle1 = mousePos.y - (paddleHeight / 2);
    });

}

function ballReset() {
  if (player1Score >= WinningScore ||
    player2Score >= WinningScore) {

    showingWinScreen = true;
  }

  ballX = canvas.width / 3;
  ballY = canvas.height / 3;
  ballSpeedX = -ballSpeedX
}

function computerMovement() {
  var paddle2Center = paddle2 + (paddleHeight / 2);
  if (paddle2Center < ballY - 30) {
    paddle2 = paddle2 + 8;
  } else if (paddle2Center > ballY + 30) {
    paddle2 = paddle2 - 8;
  }
}

function moveEverything() {
  if (showingWinScreen) {
    return;
  }
  computerMovement();

  ballX = ballX + ballSpeedX;
  ballY = ballY + ballSpeedY;
  if (ballX > canvas.width) {
    if (ballY > paddle2 &&
      ballY < paddle2 + paddleHeight) {
      ballSpeedX = -ballSpeedX;

      var deltaY = ballY -
        (paddle2 + paddleHeight / 2);
      ballSpeedY = deltaY * 0.25;
    } else {
      player1Score += 1;
      ballReset();
    }
  }
  if (ballX < 0) {
    if (ballY > paddle1 &&
      ballY < paddle1 + paddleHeight) {
      ballSpeedX = -ballSpeedX;

      var deltaY = ballY -
        (paddle1 + paddleHeight / 2);
      ballSpeedY = deltaY * 0.25;
    } else {
      player2Score += 1;
      ballReset();
    }
  }
  if (ballY > canvas.height) {
    ballSpeedY = -ballSpeedY
  }
  if (ballY < 0) {
    ballSpeedY = -ballSpeedY
  }
}

function drawNet() {
  for (var i = 0; i < canvas.height; i += 40) {
    colorRect(canvas.width / 2 - 1, i, 2, 20, 'white');
  }
}



function drawEverything() {

  colorRect(0, 0, canvas.width, canvas.height, 'black');

  if (showingWinScreen) {
    canvasContext.fillStyle = 'white';

    if (player1Score >= WinningScore) {
      canvasContext.font = 'italic 60pt Calibri';
      canvasContext.fillText('Left Player Won!', 475, 350);
    } else if (player2Score >= WinningScore) {
      canvasContext.font = 'italic 60pt Calibri';
      canvasContext.fillText('Right Player Won', 475, 350);
    }

    canvasContext.font = 'italic 80pt Calibri';
    canvasContext.fillText('click to continue!', 400, 600);


    return;
  }

  drawNet();

  colorRect(0, paddle1, paddleThickness, paddleHeight, 'white');
  colorRect(canvas.width - paddleThickness, paddle2, paddleThickness, paddleHeight, 'white');
  colorCircle(ballX, ballY, 10, 'white')

  canvasContext.fillText(player1Score, 200, 100);
  canvasContext.fillText(player2Score, canvas.width - 200, 100);


}

function colorRect(leftX, topY, width, height, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.fillRect(leftX, topY, width, height);
}

function colorCircle(centerX, centerY, radius, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

<html>

<head>

  <title>Ping Pong Game</title>

</head>

<body>

  <canvas id="Mycanvas" width="1600" height="800"></canvas>


  <div>
    <h1>The Ping Pong Game</h1>

    <h2>Use the mouse to control the paddle!</h2>

  </div>
  <style>
    body {
      background-color: #FFD700;
    }
  </style>

</body>

</html>

Answer 1

So, the biggest issue is that you were never calling your move() function. I added a call to the move() function to your keydown event and then continually console logged everything that was happening until I figured out what was wrong.

Here is my edited code ( I left the console.logs in to show you how I debugged it). It shows the paddle moving and in the correct direction.

You may also have an issue with the delayed paddle movement when holding down a key because it takes a second to register that the key is being held down instead of pressed. I've attached a JS eventhandler reference to help you out in finding a way around that.

You also need to click the page to bring it in focus.

var canvas;
var canvasContext;
var ballX = 50;
var ballSpeedX = 10;
var ballY = 50;
var ballSpeedY = 5;
var ym = 10; // the movement of y axis
var keys = new Array();

var player1Score = 0;
var player2Score = 0;
const WinningScore = 11115;

var showingWinScreen = false;

var paddle1 = 350;
var paddle2 = 350;
const paddleHeight = 100;
const paddleThickness = 10;



function PausePressed(evt) {
  if (showingWinScreen) {
    player1Score = 0;
    player2Score = 0;
    showingWinScreen = false;

  }
}



window.onload = function() {
  canvas = document.getElementById('Mycanvas');
  canvasContext = canvas.getContext('2d');
  window.addEventListener('keydown', doKeyDown, true);
  window.addEventListener('keyup', doKeyUp, true);

  var framesPerSecond = 60;
  setInterval(function() {
    moveEverything();
    drawEverything();
  }, 1000 / framesPerSecond);

}

function ballReset() {
  if (player1Score >= WinningScore ||
    player2Score >= WinningScore) {

    showingWinScreen = true;
  }

  ballX = canvas.width / 3;
  ballY = canvas.height / 3;
  ballSpeedX = -ballSpeedX
}

function doKeyDown(evt) {
  
  keys[evt.keyCode] = true;
  console.log("current keyCode:",evt.keyCode)
  move()
  evt.preventDefault(); // Prevents the page to scroll up/down while pressing arrow keys
}

function doKeyUp(evt) {
  console.log("'key up' event fired")
  console.log(`keyCode: ${evt.keyCode} keys: ${keys}`)
  console.log(" 'key[evt.keyCode]' before:", keys[evt.keyCode])
  keys[evt.keyCode] = false;
  console.log(" 'key[evt.keyCode]' after:", keys[evt.keyCode])
   console.log(`keyCode: ${evt.keyCode} keys: ${keys}`)
}

function move() {
  console.log("Entered move function")
  if (38 in keys && keys[38]) { //up
    console.log("entered '38 in keys'. UP ")
    console.log("paddle1 before -= :", paddle1)
    paddle1 -= ym;
    console.log("paddle1 after -= :", paddle1)
  }
  else if (40 in keys && keys[40]) { //down
    console.log("entered '40 in keys'. DOWN ")
    console.log("paddle1 before += :", paddle1)
    paddle1 += ym;
    console.log("paddle1 after += :", paddle1)
  }
}

function computerMovement() {
  var paddle2Center = paddle2 + (paddleHeight / 2);
  if (paddle2Center < ballY - 30) {
    paddle2 = paddle2 + 8;
  } else if (paddle2Center > ballY + 30) {
    paddle2 = paddle2 - 8;
  }
}

function moveEverything() {
  if (showingWinScreen) {
    return;
  }



  computerMovement();

  ballX = ballX + ballSpeedX;
  ballY = ballY + ballSpeedY;
  if (ballX > canvas.width) {
    if (ballY > paddle2 &&
      ballY < paddle2 + paddleHeight) {
      ballSpeedX = -ballSpeedX;

      var deltaY = ballY -
        (paddle2 + paddleHeight / 2);
      ballSpeedY = deltaY * 0.25;

    } else {
      player1Score += 1;
      ballReset();
    }
  }
  if (ballX < 0) {
    if (ballY > paddle1 &&
      ballY < paddle1 + paddleHeight) {
      ballSpeedX = -ballSpeedX;

      var deltaY = ballY -
        (paddle1 + paddleHeight / 2);
      ballSpeedY = deltaY * 0.25;

    } else {
      player2Score += 1;
      ballReset();
    }
  }
  if (ballY > canvas.height) {
    ballSpeedY = -ballSpeedY
  }
  if (ballY < 0) {
    ballSpeedY = -ballSpeedY
  }
}


function drawNet() {
  for (var i = 0; i < canvas.height; i += 40) {
    colorRect(canvas.width / 2 - 1, i, 2, 20, 'white');
  }
}

function drawEverything() {

  colorRect(0, 0, canvas.width, canvas.height, 'black');

  if (showingWinScreen) {
    canvasContext.fillStyle = 'white';

    if (player1Score >= WinningScore) {
      canvasContext.font = 'italic 60pt Calibri';
      canvasContext.fillText('Left Player Won!', 475, 350);
    } else if (player2Score >= WinningScore) {
      canvasContext.font = 'italic 60pt Calibri';
      canvasContext.fillText('Right Player Won', 475, 350);
    }

    canvasContext.font = 'italic 80pt Calibri';
    canvasContext.fillText('click to continue', 400, 600);


    return;
  }

  drawNet();

  colorRect(0, paddle1, paddleThickness, paddleHeight, 'white');
  colorRect(canvas.width - paddleThickness, paddle2, paddleThickness, paddleHeight, 'white');
  colorCircle(ballX, ballY, 10, 'white')

  canvasContext.fillText(player1Score, 100, 100);
  canvasContext.fillText(player2Score, canvas.width - 100, 100);


}

function colorRect(leftX, topY, width, height, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.fillRect(leftX, topY, width, height);
}

function colorCircle(centerX, centerY, radius, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

<html>

<head>

  <title>Ping Pong Game</title>

</head>

<body bgcolor="#FFB630">

  <canvas id="Mycanvas" width="1600" height="800"></canvas>



  <div>
    <h1>The Ping Pong Game</h1>

    <h2>Use the mouse to control the paddle!</h2>
  </div>

</body>

</html>

Answer 2

You need to assign the new value to paddle1 by using the += and -= operators.

paddle1 += 5 is equivalent to paddle1 = paddle1 + 5

paddle1 -= 5 is equivalent to paddle1 = paddle1 - 5

You misspelled keyCode for the 'p' keydown event

document.addEventListener('keydown', event => {
    if (event.keyCode === 38) {
        paddle1 += 5;
    } else if (event.keyCode === 40) {
        paddle1 -= 5;
    } else if (event.keyCode === 80) {
        alert('You have pressed p!');
    }
});

Further reading for addition / subtraction assignments: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment