I’m starting to use this library and I’m not quite sure how things work. I got the base from a YouTube video and then tried adding things myself. The problem is that the frog sprite sinks into the platforms, so I suppose the problem is that either the frog image is too big for the sprite or it’s wrong. It could also be that the collisions with the platforms are off or lower than normal, making it look like the frog is sinking instead of staying on top of the platform.

This is the full code:

let groundFloor;
let player;
let floors;
let score = 0;
let score_max = 0; 
let music;
let rana;
let sea; 
let seaLevel = 0; 
let gameOver = false; 
let restartButton; 
let seaSpeed = 0.5; 
let seaAccelerationInterval; 

// Precargar la imagen y el sonido
function preload() {
  rana = loadImage('../img/rana_salta.png');
  music = loadSound('../sonido/SonidoJuego.mp3');
}

function setup() {
  // Tamaño pantalla
  let canvas = createCanvas(400, 600);
  // Asegurar que el canvas está en el centro
  canvas.parent('gameContainer'); 
  // Gravedad
  world.gravity.y = 10;

  // Piso del suelo (a una altura y estático)
  groundFloor = new Sprite(0, height - 20, width * 2, 20, 's');

  // Pared izquierda en el extremo del groundFloor
  leftWall = new Sprite(-groundFloor.w / 2 + 10, height / 2, 20, height * 100, 's');
  // Pared derecha en el extremo del groundFloor
  rightWall = new Sprite(groundFloor.w / 2 - 10, height / 2, 20, height * 100, 's');

  // Jugador
  player = new Sprite(width / 2, height - 100, 40, 40, 'd');
  player.rotationLock = true;
  player.image = rana;
  player.scale = 0.05;

  // Mar
  // Iniciar el mar más abajo
  sea = new Sprite(0, height + 300, width * 2, 200, 's'); 
  sea.color = 'blue'; 

  floors = new Group();

  // Pisos
  for (let i = 0; i < 100; i++) {
    let f = new floors.Sprite();
    f.w = random(20, 100);
    f.h = 20;
    f.collider = 's';
    f.x = random(leftWall.x + leftWall.w / 2, rightWall.x - rightWall.w / 2); // Generar pisos entre las paredes
    f.y = player.y - (i * 50);
  }
  
  music.loop();

  // Configurar intervalo para acelerar el mar
  startSeaAcceleration();
}

function draw() {
  clear();
  background(0);

  if (!gameOver) {
    // Actualizar la posición del mar
    sea.y -= seaSpeed; 

    // Actualizar el nivel del mar
    seaLevel = floor((height + 300 - sea.y) * 0.5);

    // Verificar colisión con el mar
    if (player.colliding(sea)) {
      endGame(); 
    }

    // Score
    // Para que no sea menor a 0
    if (player.y > 0) {
      score = 0;
    } else {
      // Redondea la posición y del jugador hacia abajo
      score = floor((player.y * -1));
    }

    // Actualizar score_max
    if (score > score_max) {
      score_max = score;
    }

    camera.off();

    //Textos
    textSize(20); 
    fill(255);
    text(`Score: ${score}`, 10, 30); 
    text(`Max Score: ${score_max}`, 10, 60); 
    text(`Sea Level: ${seaLevel}`, 10, 90); 
    camera.on();

    // Fijar la cámara en el jugador
    camera.x = player.x;
    camera.y = player.y;
    camera.zoom = 2;

    // Controles
    // Moverse
    if (kb.pressing('a')) {
      player.x -= 2; 
    } else if (kb.pressing('d')) {
      player.x += 2; 
    }
    // Saltar solo si estás tocando superficies
    if (kb.presses('space') && (player.colliding(floors) || player.colliding(groundFloor))) {
      player.vel.y = -10; 
    }

    spawnFloors();
  } else {
    showGameOverScreen();
  }
}

// Función para configurar el intervalo de aceleración del mar
function startSeaAcceleration() {
  seaAccelerationInterval = setInterval(() => {
    seaSpeed *= 1.05; // Aumentar la velocidad del mar en un 5%
  }, 10000); // Cada 10 segundos
}

// Función para terminar el juego y mostrar la pantalla de "Has perdido"
function endGame() {
  gameOver = true;
  noLoop(); // Detener el bucle de dibujo de p5.js
  clearInterval(seaAccelerationInterval); // Detener la aceleración del mar

  // Crear botón de reiniciar
  restartButton = createButton('Reiniciar');
  restartButton.position((windowWidth / 2) - 50, (windowHeight / 2));
  restartButton.mousePressed(resetGame);
}

// Función para reiniciar el juego
function resetGame() {
  gameOver = false;
  player.x = width / 2;
  player.y = height - 100;
  score = 0;
  sea.y = height + 300; 
  seaSpeed = 0.5; 
  floors.removeAll();

  // Recrear los pisos iniciales
  for (let i = 0; i < 100; i++) {
    let f = new floors.Sprite();
    f.w = random(20, 100);
    f.h = 20;
    f.collider = 's';
    // Generar pisos entre las paredes
    f.x = random(leftWall.x + leftWall.w / 2, rightWall.x - rightWall.w / 2); 
    f.y = player.y - (i * 50);
  }

  // Eliminar botón de reiniciar
  restartButton.remove();
  loop(); // Reiniciar el bucle de dibujo

  // Reiniciar la aceleración del mar
  startSeaAcceleration();
}

// Función para mostrar la pantalla de "Has perdido"
function showGameOverScreen() {
  camera.off();
  textSize(50);
  fill(255);
  textAlign(CENTER, CENTER);
  text('Has perdido', width / 2, height / 2 - 100);
  camera.on();
}

function spawnFloors() {
  if (player.y < floors[floors.length - 1].y) {
    let f = new floors.Sprite();
    f.w = random(20, 100);
    f.h = 20;
    f.collider = 's';
    f.x = random(leftWall.x + leftWall.w / 2, rightWall.x - rightWall.w / 2); // Generar pisos entre las paredes
    f.y = player.y - random(50, 100);
  }
}

As i said i think the problem is in this specifics parts:

player = new Sprite(width / 2, height - 100, 40, 40, 'd');
 player.rotationLock = true;
 player.image = rana;
 player.scale = 0.05;

/ Pisos
 for (let i = 0; i < 100; i++) {
   let f = new floors.Sprite();
   f.w = random(20, 100);
   f.h = 20;
   f.collider = 's';
   f.x = random(leftWall.x + leftWall.w / 2, rightWall.x - rightWall.w / 2); // Generar pisos entre las paredes
   f.y = player.y - (i * 50);
 }

I have tried making the sprite smaller and even adjusting the player’s scale up and down, but I’m not sure how to fix the collisions with the platforms.