title: P5.js platform game
body: <p>I don't understand how I could make my player land on a platform and these are the issues I have:</p>
  <ol>
  <li><p>When I side scroll offset the screen, the player does not land the platform, however when the screen is on its original position, it does land.</p>
  </li>
  <li><p>I cannot find a way to make an array  of (objects) platforms that the player can land on even when I side scroll.</p>
  </li>
  <li><p>the keyboard input does not communicate or does not work when I have them both for different purpose and for the side scroll but also to to go left and right when the player is on the platform.</p>
  </li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/// Js file for the character 
  
  class GameChar {
  
  constructor(){
  this.p1X =  400;
  this.p1Y = 510;
  this.pWidth = 30;
  this.pHeight = 70;
  
  this.speed = 6;
  this.direction = 1;  
  this.velocity = 2;
  this.fallingSpeed = 0;
  
  this.jumpPower = 15;
  this.minHeight = 375;
  this.maxHeight = 50;
  
  this.jumpCounter = 0;
  
  }
  
  Render()
  {
      if(Left)
      {  
          fill(0);
          rect(this.p1X , this.p1Y ,this.pWidth*1.5 , this.pHeight/5);
          rect(this.p1X , this.p1Y ,this.pWidth*1.5 , this.pHeight/5);
          push();
          strokeWeight(5);
          stroke(0); 
          fill(255);
          rect(this.p1X, this.p1Y ,this.pWidth , this.pHeight);
          pop();
          strokeWeight(2);
          fill(255);
          ellipse(this.p1X , this.p1Y-49 , this.pWidth*PI/2 , this.pHeight/2);
          fill(110);
          ellipse(this.p1X+5 , this.p1Y-49 , this.pWidth*PI/9 , this.pHeight/6);
          ellipse(this.p1X-10 , this.p1Y-49 , this.pWidth*PI/9 , this.pHeight/6);
          fill('red');
          ellipse(this.p1X-10 , this.p1Y+35 , this.pWidth*PI/7 , this.pHeight/4);
          ellipse(this.p1X+10 , this.p1Y+35 , this.pWidth*PI/7 , this.pHeight/4)
      }
      else if(Right)
      {  
         
          fill(0);
          rect(this.p1X , this.p1Y ,this.pWidth*1.5 , this.pHeight/5);
          rect(this.p1X , this.p1Y ,this.pWidth*1.5 , this.pHeight/5);
          push();
          strokeWeight(5);
          stroke(0); 
          fill(255);
          rect(this.p1X, this.p1Y ,this.pWidth , this.pHeight);
          pop();
          strokeWeight(2);
          fill(255);
          ellipse(this.p1X , this.p1Y-49 , this.pWidth*PI/2 , this.pHeight/2);
          fill(110);
          ellipse(this.p1X-5 , this.p1Y-49 , this.pWidth*PI/9 , this.pHeight/6);
          ellipse(this.p1X+10 , this.p1Y-49 , this.pWidth*PI/9 , this.pHeight/6);
          fill('red');
          ellipse(this.p1X-10 , this.p1Y+35 , this.pWidth*PI/7 , this.pHeight/4);
          ellipse(this.p1X+10 , this.p1Y+35 , this.pWidth*PI/7 , this.pHeight/4);
      }
      else    
      {
          
          fill(0);
          rect(this.p1X , this.p1Y ,this.pWidth*1.5 , this.pHeight/5);
          rect(this.p1X , this.p1Y ,this.pWidth*1.5 , this.pHeight/5);
          push();
          strokeWeight(5);
          stroke(0); 
          fill(255);
          rect(this.p1X, this.p1Y ,this.pWidth , this.pHeight);
          pop();
          strokeWeight(2);
          fill(255);
          ellipse(this.p1X , this.p1Y-49 , this.pWidth*PI/2 , this.pHeight/2);
          fill(110);
          ellipse(this.p1X-10 , this.p1Y-49 , this.pWidth*PI/9 , this.pHeight/6);
          ellipse(this.p1X+10 , this.p1Y-49 , this.pWidth*PI/9 , this.pHeight/6);
          fill('red');
          ellipse(this.p1X-10 , this.p1Y+35 , this.pWidth*PI/7 , this.pHeight/4);
          ellipse(this.p1X+10 , this.p1Y+35 , this.pWidth*PI/7 , this.pHeight/4);
      }
  }
  
  gravity()
  {
      if(this.p1Y &gt;= this.minHeight &amp;&amp; jump == false)
      {
      this.p1Y = this.p1Y;
      this.jumpCounter = 0;
      }
      else
      {
          this.p1Y = this.p1Y + (this.direction*this.velocity);
      }
      
      
      if(jump == true)
      {
          if(this.p1Y &lt;= this.maxHeight || this.jumpCounter &gt;= this.jumpPower)
          {
              if(this.p1Y &gt;= this.minHeight)
              {
                  this.p1Y = this.minHeight;
              }
              else
              {
                  this.velocity = this.fallingSpeed;    
              }    
          }
          else
          {
              this.jumpCounter = this.jumpCounter + 1 
              this.velocity = -this.jumpPower;
          }
          
      }
      else
      {
          this.velocity = this.fallingSpeed;
      }
  }
  
  
  Logic()
  {
  
      if(Right)
      {
          if(this.p1X &lt; width * 0.2)
          {
            this.p1X += 5; 
          
          }
          else
          {
            scrollPos -= 5;
          }
        }
      
      
        if(Left)
        {
          if(this.p1X &gt; width * 0.8)
          {
            this.p1X -= 5; 
          }
          else
          {
            scrollPos += 5;
          }
      }
      
  }
  
  
  collisions()
  {    
      if(this.p1X &gt;= b1X - bWidth/2 &amp;&amp; this.p1X &lt;= b1X+bWidth/2 &amp;&amp; this.p1Y+this.pWidth &gt;= b1Y-bHeight/2 &amp;&amp; this.p1Y+this.pWidth &lt;= b1Y+bHeight/2 &amp;&amp; jump == false)
      {
          this.p1Y = this.p1Y;
          velocity = 0; 
          jumpCounter = 0; 
      }
  }
  
  keyPressed()
  {
  
      if(keyDown('UP_ARROW'))
      {
          jump = true;    
      }
      else
      {
          jump = false;
      }
  
      
      if(keyDown('LEFT_ARROW'))
      {
          Left = true;
          this.p1X -= 4;
      }
      else
      {
         Left = false;
      }
  
      if(keyDown('RIGHT_ARROW'))
      {
          Right = true;
          this.p1X += 4; 
      }
      else
      {
          Right = false;
      }
  
  }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;! DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="gameProject.js"&gt;&lt;/script&gt;
  &lt;script src="Character.js"&gt;&lt;/script&gt;
  &lt;script src="Envirioment.js"&gt;&lt;/script&gt;
  &lt;script src="p5.min.js"&gt;&lt;/script&gt;
  &lt;script src="p5.play.js"&gt;&lt;/script&gt;
  &lt;script src="p5.sound.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>////This is the main js file 
  
  /// Envirioment 
  let trees_x;
  let clouds;
  let mountains;
  let canyon;
  
  
  //Booleans
  let jump = false;
  let Left = false;
  let Right = false;
  let isFalling = false;
  
  
  ///PLATFORM
  let b1X = 200; 
  let b1Y = 300;
  let bWidth = 200;
  let bHeight = 50;
  
  
  let stage = 0;
  let floor_y ;
  let scrollPos = 0;
  
  
  function setup(){
      createCanvas(1400 , 800);
      rectMode(CENTER);
      textAlign(CENTER);
      Game = new Game();
      GameChar = new GameChar();
      Environment = new Environment();
      floor_y = 560;
  }
  
  
  function draw(){
      
     if(stage == 0)
     {
        
        Game.Show();
        push();
        translate(scrollPos , 0);
        noStroke();
        Environment.drawClouds();
        Environment .drawMountains();
        Environment.drawTrees();
        Environment.drawRocks();
        Game.Platform();
        pop();
        
        GameChar.gravity();
        GameChar.keyPressed();
        GameChar.Render();
        GameChar.collisions();
        GameChar.Logic();   
     } 
  }
  
  
  class Game {
  
  Show()
  {
      background(150,230,240);
      noStroke();
      fill('saddlebrown');
      rect(0, floor_y*1.19, width*100,height/3);
      fill(100,200,75);
      rect(width/2, floor_y , width , 100);
      noFill();
      stroke(0);
      strokeWeight(15);
  
      ///window frame 
      // rect(width/2 , height/2 , width ,height);
  }
  
  
  Platform (){
  
      stroke(0);
      strokeWeight(5);
      fill(255,120,0);
      rect(b1X , b1Y , bWidth , bHeight);
      
  }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Environment {
  
  drawTrees()
  {
      for (var i = 0; i &lt; trees_x.length; i++)
      {
          fill(122, 31, 31); 
          rect(trees_x[i] , floor_y/1.2, 30, 100);
          fill(34,139,34); 
          ellipse(trees_x[i], floor_y/1.4 , width/10 , height/5);
      }
  }
  
  drawClouds()
  {
      for (var i = 0; i &lt; clouds.length; i++)
      {
          fill(255,255,255);
          ellipse(clouds[i].pos_x, clouds[i].pos_y, 70, 80);
          ellipse(clouds[i].pos_x + 30,clouds[i].pos_y, 80, 100);
          ellipse(clouds[i].pos_x + 60,clouds[i].pos_y, 80, 100);
          ellipse(clouds[i].pos_x + 90,clouds[i].pos_y, 70, 80);
      }
  }
  
  
  drawMountains()
  {    
   for (var i = 0; i &lt; mountains.length; i++)
   {   
      fill(120, 120, 120);
      triangle(mountains[i].pos_x,mountains[i].pos_y,mountains[i].pos_x + 270,
               mountains[i].pos_y - 326,mountains[i].pos_x + 410,mountains[i].pos_y);
  
      fill(255, 255, 255);
      triangle(mountains[i].pos_x + 310,mountains[i].pos_y - 247, mountains[i].pos_x + 267, 
               mountains[i].pos_y - 326, mountains[i].pos_x + 270,mountains[i].pos_y - 266);
  
      triangle(mountains[i].pos_x + 280,mountains[i].pos_y - 266, mountains[i].pos_x + 267, 
               mountains[i].pos_y - 326, mountains[i].pos_x + 210,mountains[i].pos_y - 255);
  
      triangle(mountains[i].pos_x + 225,mountains[i].pos_y - 267, mountains[i].pos_x + 260, 
               mountains[i].pos_y - 247, mountains[i].pos_x + 300,mountains[i].pos_y - 267);
  }}
  
  
  drawRocks()
  {
      for(var i = 0;  i &lt; rocks.length; i++)
      {
      noStroke();
      fill(105,105,105);
      ellipse(rocks[i]-10,floor_y+150, 20 ,20 );
      ellipse(rocks[i]-50,floor_y+190, 20 ,20 );
      ellipse(rocks[i]-30,floor_y+160, 20 ,20 );
      ellipse(rocks[i]-100,floor_y+130, 20 ,20 );
      ellipse(rocks[i]-90,floor_y+90, 20 ,20 );
      ellipse(rocks[i]-60,floor_y+160, 20 ,20 );
      }
  }
  }
  
  
  rocks = [ -600,-450,-200,300 ,500 ,800 ,1000, 1300, 1500, 2000 ,2300, 2750,3300,3700];
  
  
  mountains = [ 
      {pos_x: -75, pos_y: 510},
      {pos_x: -575, pos_y: 510},
      {pos_x:  375, pos_y: 510},
      {pos_x:  795, pos_y: 512},
  ];
  
  
  clouds = [
      {pos_x: 50,   pos_y: 70},
      {pos_x: 250,  pos_y: 70},
      {pos_x: 350,  pos_y: 70},
      {pos_x: 600,  pos_y: 70},
      {pos_x: 800, pos_y: 70},
      {pos_x: -250, pos_y: 70},
      {pos_x: -500, pos_y: 70},
      {pos_x: -750, pos_y: 70}
  ];
  
  trees_x = [-1500,1040,-700,-390,-190,70,300,460, 600 , 750 , 900, 1350];</code></pre>
  </div>
  </div>
  </p>