title: Why is my this.x increment getting bigger each time?
body: <p>I'm trying to implement simple movement for an object 'player' of class Player, which was instantiated with <code>player = new Player(40, 40, 15);</code> in function setup() of my JavaScript file.
  The following code is included within my draw() function, and it correctly recognises keyboard inputs for D, A and Space.</p>
  <pre><code>window.addEventListener(&quot;keydown&quot;, checkKeyPress, false);
        function checkKeyPress(key){
          if (key.keyCode == &quot;68&quot;){
            player.rightMove();
          } else if (key.keyCode == &quot;65&quot;){
            player.leftMove();
          } else if (key.keyCode == &quot;32&quot;){
            player.jump();
          }
        }
        player.show();
  </code></pre>
  <p>My problem though comes with the following code:</p>
  <pre><code>constructor(x, y, r) {
      this.x = x;
      this.y = y;
      this.r = r;
    }
  
    rightMove() {
      this.x++;
      if (this.x &gt;= 980){
        this.x--
      }
    }
    leftMove() {
      this.x--;
      if (this.x &lt;= 20){
        this.x++
      }
  </code></pre>
  <p>This is within the Player class structure, and it correctly moves the object right/left/up via incrementing/decrementing the x/y value as necessary.
  And below is part of the show() function:</p>
  <pre><code>ellipse(this.x, this.y, this.r*1.7);
  </code></pre>
  <p>However, the problem I have is that every time I execute one of the movement functions by pressing a key, it seems that the value my x/y value in/decrements by is increasing. Every time I press one of the keys it moves the object more and more, not just the '1' change it should be with '++' or '--'.
  I'm not sure why the change is increasing with each press - how can I fix this to only change the x or y by 1 each time?</p>
  <p>Thank you for your help.</p>
  <p>Edit: below is my function draw(), which includes show() at the bottom once.</p>
  <pre><code>function draw() {
    background(220);
    image(BG,0,0,width,height);
    window.addEventListener(&quot;keydown&quot;, checkKeyPress, false);
    function checkKeyPress(key){
      if (key.keyCode == &quot;68&quot;){
        player.rightMove();
      } else if (key.keyCode == &quot;65&quot;){
        player.leftMove();
      } else if (key.keyCode == &quot;32&quot;){
        player.jump();
      }
    }
    player.show();
  }
  </code></pre>
  <p>This results in the player object moving left/right/up when the correct key is pressed/held, by drawing a new ellipse at the new coordinates, as below:</p>
  <pre><code>show() {
      stroke('#800080');
      strokeWeight(4);
      fill('#800080')
      ellipse(this.x, this.y, this.r*1.7);
    }
  </code></pre>