title: javascript game: making player jump and landing
body: <p>I am making a javascript game, using canvas. I want to make a character(player) jump and land on the next coming log when the keyboard(37) is pressed. So, I tried to make an array containg y position of log when updated, and the player land on the y position of the log in the array in a regular sequence when the keyboard is pressed. <img src="https://i.stack.imgur.com/gYvVz.png" alt=""></p>
  
  <p>However, it works weird. The player doesn't land on the planned y position of the log, and sometimes suddenly moves to other position while jumping, and the player goes to y position without jumping when pressing keyboard first time(second time and after, it jumps well). I really don't know the reason for several days...Is there something wrong in the below code? How can I solve the problem?</p>
  
  <p>This is a github address that includes all the files related game.
  <a href="https://github.com/psh5487/lionTravel.git" rel="nofollow noreferrer">https://github.com/psh5487/lionTravel.git</a></p>
  
  <p>Among them, RS_PlayGame.js is directly related with the jumping and landing.</p>
  
  <p>RS_PlayGame.js</p>
  
  <pre><code>function PlayGameState()
  {
      //player
      this.sprPlayer = new SpriteAnimation(resourcePreLoader.GetImage("/.c9/img/game_player.png"), 125, 167, 4, 4);
      this.x = 150;
      this.y = 200;
  
      this.Invalid();
  
      this.isJumpingUp = false;
      this.jumpPower = 0;
  
      //log
      this.imgShortlog1 = resourcePreLoader.GetImage("/.c9/img/game_shortlog.png");
      this.imgShortlog2 = resourcePreLoader.GetImage("/.c9/img/game_shortlog.png");
      this.imgShortlog3 = resourcePreLoader.GetImage("/.c9/img/game_shortlog.png");
  
      //moving logs
      this.posShortlog1 = 0+200;
      this.speedShortlog1 = 7;
  
      this.posShortlog2 = 315+200;
      this.speedShortlog2 = 7;
  
      this.posShortlog3 = 625+200;
      this.speedShortlog3 = 7;
  
      //default y position of log
      this.y_log_position_Arr = new Array(3);
      this.y_log_position_Arr[0] = 350;
      this.y_log_position_Arr[1] = 300;
      this.y_log_position_Arr[2] = 350;
  
      //player position after jumping
      this.afterjump_Arr = new Array();
      this.afterjump_Arr[0] = 350;
      this.afterjump_Arr[1] = 300;
      this.afterjump_Arr[2] = 350;
  
      this.i = 0;
  }
  
  PlayGameState.prototype.Render = function()
  {
      var theCanvas = document.getElementById("GameCanvas");
      var Context = theCanvas.getContext("2d");
  
      //drawing log
      Context.drawImage(this.imgShortlog1, this.posShortlog1, this.y_log_position_Arr[0], 170, 32);
      Context.drawImage(this.imgShortlog2, this.posShortlog2, this.y_log_position_Arr[1], 170, 32);
      Context.drawImage(this.imgShortlog3, this.posShortlog3, this.y_log_position_Arr[2], 170, 32);
  
      //drawing player
      this.sprPlayer.Render(Context);
  };
  
  PlayGameState.prototype.Update = function()
  { 
      this.sprPlayer.Update();
  
      //moving log
      this.posShortlog1 -= this.speedShortlog1;
      this.posShortlog2 -= this.speedShortlog2;
      this.posShortlog3 -= this.speedShortlog3;
  
      if(this.posShortlog1 &lt; -170)
      {
          this.posShortlog1 = 800;
  
          var y_position_values_ud = [350, 300, 250];
          var position_index_ud = getRandomInt(3);
          var y_log_position_ud = y_position_values_ud[position_index_ud];
  
          this.y_log_position_Arr[0] = y_log_position_ud;
  
          this.afterjump_Arr.push(this.y_log_position_Arr[0]);
      }
  
      if(this.posShortlog2 &lt; -170)
      {
          this.posShortlog2 = 800;
  
          var y_position_values_ud = [350, 300, 250];
          var position_index_ud = getRandomInt(3);
          var y_log_position_ud = y_position_values_ud[position_index_ud];
  
          this.y_log_position_Arr[1] = y_log_position_ud;
  
          this.afterjump_Arr.push(this.y_log_position_Arr[1]);
      }
  
      if(this.posShortlog3 &lt; -170)
      {
          this.posShortlog3 = 800;
  
          var y_position_values_ud = [350, 300, 250];
          var position_index_ud = getRandomInt(3);
          var y_log_position_ud = y_position_values_ud[position_index_ud];
  
          this.y_log_position_Arr[2] = y_log_position_ud;
  
          this.afterjump_Arr.push(this.y_log_position_Arr[2]);
      }
  
      //keyboard control
      if(this.isJumpingUp == false)
      {
          if(inputSystem.isKeyDown(37))
          {
              this.isJumpingUp = true;
              this.jumpPower = -17;
              this.i++;
          }
      }
      else
      {
          this.y += this.jumpPower;
          this.jumpPower += 1;
  
          if(this.y &gt;= this.afterjump_Arr[this.i]-150)
          {
              this.y = this.afterjump_Arr[this.i]-150;
  
              this.isJumpingUp = false;
          }
          this.Invalid();
      }
  };
  
  PlayGameState.prototype.Invalid = function()
  {
      this.sprPlayer.SetPosition(this.x, this.y);
  };
  
  //getting random number
  function getRandomInt(num)
  {
      return Math.floor(Math.random() * num);
  }
  </code></pre>