How would I make a gif jump, while implementing gravity and a ground y-variable?

Question

CatBus Code Link

I'm trying to make my gif "jump", while also coming back to rest at a y value of 730. No more, no less. It would work to the same extent as the Dinosaur game, when the wifi is out. I'd like to include a gravity function as well. I'm not sure how to do that. (I'm VERY new to coding.) Any tips?

[Code is below]

let img;    //background
var bgImg;    //also the background
var x1 = 0;
var x2;

var scrollSpeed = 4;  //how fast background is

let bing;   //for music

let cat = {   //coordinates for catbus
  x:70,
  y:730
}
  
var mode;  //determines whether the game has started


function preload() {
  bgImg = loadImage("backgwound.png");  //importing background

  bing=loadSound('catbus theme song.mp3');  //importing music

}

function setup() {
  createCanvas(1000, 1000);   //canvas size

  img = loadImage("backgwound.png"); //background in

  x2 = width;

bing.loop()  //loops the music
  
  catGif=createImg("catgif.gif")    //creates catbus
  catGif. position(cat.x, cat.y)    //creates position
  catGif. size(270,100)             //creates how big
  
  mode = 0;                         //game start
  textSize(50);                     //text size
  
}

function draw() {

  let time = frameCount;        //start background loop

  image(img, 0 - time, 0);

  image(bgImg, x1, 2, width, height);
  image(bgImg, x2, 2, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;

  if (x1 <= -width) {
    x1 = width;
  }
  if (x2 <= -width) {
    x2 = width;
  }                       //end background loop

  
  fill("white")              //text colour
 if(mode==0){ 
  text('Press SPACE to start the game.',150,500);     //what text to type
 }  

  if(mode==0){
  text('CATBUS BIZZARE ADVENTURE',135,450)    //what text to type
  
  }
    
}


function pickRandom() {
  x = random(20, width - 20);
}

Answer 1

I've updated your p5.js sketch to point you in the right direction.

I've introduced a few variables that are defined at the top of your code before setup:

let gravity = 0.1;
let velocity = 0;
let upForce = 3;

let startY = 730;
let startX = 70;
...

You can tweak these numbers to fit your game. But the basic premise here is that each frame we add the velocity to the cat.y and the velocity is incremented each frame by the gravity:

 cat.y = cat.y + velocity;
 velocity = velocity + gravity;

However, there's a caveat, we don't want to add the velocity to the cat.y if the cat is at its startY, as startY is the grass:

if (cat.y > startY) {
  velocity = 0;
  cat.y = startY;
}

catGif.position(cat.x, cat.y); // reposition the gif

And lastly, when you hit spacebar, jump! (And get rid of the starting screen)

function keyPressed() {
  if (keyCode === 32) {
    //spacebar
    mode = 1;
    velocity -= upForce;
  }
}