Canvas disappearing on event listener

Question

I am trying to create a rect that moves on keypress for a pong game and when I press the key the left rect disappears.. Any ideas how to fix the problem? It is really important.. The code is written in vanilla javascript so please don't write jQuery..

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pong</title> <script type="text/javascript"> var x = 100; var y = 100; var xmoveFirst = 720; var ymoveFirst = 0; var xmoveSecond = 30 ; var ymoveSecond = 0; function canvas() { var can = document.getElementById('theCanvas'); can.style.backgroundColor = "black"; var ctx = can.getContext('2d'); //first player ctx.fillStyle="white"; ctx.fillRect(xmoveFirst,ymoveFirst,5,75); //second player ctx.fillStyle = 'white'; ctx.fillRect(xmoveSecond,ymoveSecond,5,75); //first player move function moveFirst(eFirst) { ctx.clearRect(0,0,750,750); //clear rects if (eFirst.keyCode == 40) { ymoveFirst+=25; console.log("first,"+ymoveFirst); } else if (eFirst.keyCode == 38) { ymoveFirst-=25; console.log("first,"+ymoveFirst); } ctx.fillStyle="white"; ctx.fillRect(xmoveFirst,ymoveFirst,5,75); ctx.fillRect(xmoveSecond,ymoveSecond,5,75); } var first = document.onkeydown = moveFirst; //second player move function moveSecond(eSecond) { ctx.clearRect(0,0,750,750); if (eSecond.keyCode == 83) { ymoveSecond+=25; console.log("second,"+ymoveSecond); } else if (eSecond.keyCode == 87) { ymoveSecond-=25; } ctx.fillStyle="white"; ctx.fillRect(xmoveFirst,ymoveFirst,5,75); ctx.fillRect(xmoveSecond,ymoveSecond,5,75); console.log("second,"+ymoveSecond) } var second = document.onkeydown = moveSecond; } 83,87 </script> </head> <body onload="canvas()"> <canvas id="theCanvas" width="750" height="750"></canvas> </body> </html>

Answer 1

This line: can.width=can.width; resets the canvas width.

When you change the canvas size (width or height), you clear the canvas (making everything black). After this line, you are only redrawing the rightmost paddle, so the left one remains missing.

You'll need to redraw the leftmost paddle as well if you want it to come back. Here is the modified moveRight() function:

function moveRight(eFirst) {
  if (eFirst.keyCode==40) {
    ymoveFirst+=25;
    console.log(ymoveFirst);
  }

  else if (eFirst.keyCode==38) {
    ymoveFirst-=25;
    console.log(ymoveFirst);
  }
  can.width=can.width;
  ctx.fillStyle="white";

  // Redraw BOTH paddles
  ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
  ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
}

Also, replace

document.onkeydown = moveFirst; and document.onkeydown = moveSecond;

with

document.addEventListener("keydown", moveFirst); , and document.addEventListener("keydown", moveSecond);

Currently, you are overwritting the first listener with document.onkeydown = moveSecond; . By using addEventListener , you don't overwrite the ones that already exist.

Canvas disappearing on event listener

Question

1 answers

solution1
0 ACCPTED 2016-07-02 18:50:19

Canvas disappearing on event listener

Question

1 answers

solution1 0 ACCPTED 2016-07-02 18:50:19

solution1
0 ACCPTED 2016-07-02 18:50:19