How do I use kbInput to move the paddles in my JS game of Pong?

  canvas, html, javascript, pong

I am a beginner in Javascript, and for a project for my computer science class, I am trying to make a 2-player (NOT AI) game of pong, with Player 1 using the W and S keys and Player 2 to use the up and down arrow keys. For this project, I am required to use the variable kbInput, and I’m having trouble making the paddles move up and down. Any help would be appreciated!!

<!doctype html>
<html lang="en">
<body onload = "ball()">
    <h1 style="position:absolute;left:45%;top:10px;font-size:70px;">Pong</h1>
    <h1 style="position:absolute;left:30px;top:80px;">Score 1: <span id="score1">0</span></h1>
    <h1 style="position:absolute;right:30px;top:80px;">Score 2: <span id="score2">0</span></h1>
    <hr style="margin-top:150px;">
    <div id="1"  style="position:absolute;left:0;top:460px;width:10px;height:150px;background-color:black;">
    </div>
    <div id="3"  style="position:absolute;left:820px;top:510px;width:25px;height:25px;background-color:red;border-radius:50%;">
    </div>
    <div id="2"  style="position:absolute;right:0;top:460px;width:10px;height:150px;background-color:black;">
    </div>
</body>
<script type="text/javascript">
    // variables
  var height = 717;
  var paddle_height = 150;
  var speed1 = 0;
  var pos1 = 460;
  var speed2 = 0;
  var pos2 = 460;
  var pos3 = 0;
  var pos4 = 0;
  var speed3 = 0;
  var speed4 = 0;
  var score1 = 0;
  var score2 = 0;
  function ball () {
    pos3 = 510;
    pos4 = 820;
    if (Math.random() < 0.5) {
      var side = 1
    } else {
      var side = -1
    }
    speed3 = Math.random() * -2 - 3;
    speed4 = side * (Math.random() * 2 + 3);
  };
  window.setInterval(function show() {
    pos1 += speed1;
    pos2 += speed2;
    pos3 += speed3;
    pos4 += speed4;
    if (pos1 <= 150) {
      pos1 = 150;
    };
    if (pos1 >= height) {
      pos1 = height;
    };
    if (pos2 <= 150) {
      pos2 = 150;
    };
    if (pos2 >= height) {
      pos2 = height;
    };
    if (pos3 <= 150 || pos3 >= 830) {
      speed3 = -speed3
    }
    if (pos4 <= 10) {
      if (pos3 > pos1 && pos3 < pos1 + paddle_height) {
        speed4 = -speed4;
      } else {
        score2 += 1;
        ball();
      }
    }
    if (pos4 >= 1647) {
      if (pos3 > pos2 && pos3 < pos2 + paddle_height) {
        speed4 = -speed4
      } else {
        score1 += 1;
        ball();
      }
    }

    document.getElementById("1").style.top = (pos1) + "px";
    document.getElementById("2").style.top = (pos2) + "px";
    document.getElementById('3').style.top = (pos3) + 'px';
    document.getElementById('3').style.left = (pos4) + 'px';
    document.getElementById('score1').innerHTML = score1.toString();
    document.getElementById('score2').innerHTML = score2.toString();
  }, 1000/60);

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  // Keyboard Input
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  canvas.addEventListener('keydown', keyHandler)
  canvas.addEventListener('keyup', keyHandler)

  //link to all key values: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
  let kbInput = {
      s : {
          value : "S",
          isPressed: false,
      },
      w : {
          value : "W",
          isPressed: false,
      },

      down : {
          value : "ArrowDown",
          isPressed: false,
      },
      up : {
          value : "ArrowUp",
          isPressed: false,
      }
  }

  function keyHandler(event) {
      event.preventDefault() //prevents the keys that you press from performing their default action in your internet browser
      let type = event.type
      let isPressed = false
      if(type==="keydown"){
          isPressed = true
      }
      if(type==="keyup"){
          isPressed = true
      }

      //logs key stroke values (if necessary)

     
      if(event.key===kbInput.w.value){
          kbInput.w.isPressed = isPressed
      }
      if(event.key===kbInput.s.value){
          kbInput.s.isPressed = isPressed
      }
     
      if(event.key===kbInput.up.value){
          kbInput.up.isPressed = isPressed
      }
      if(event.key===kbInput.down.value){
          kbInput.down.isPressed = isPressed
      }

  }

</script>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT