How to code and switch between sprite backgrounds

The game plays well but now I would like a start and game over screens. When I use a sprite as a background, they do not show. I am using the “visible” block to turn on and off the sprites. I feel there is a better way to switch to another sprite background when a condition is met like a score is achieved or to just have a start screen with a button or keyboard command to start the game.

using switch statement you can make a good visible version of this

countking = 0;
var screen = "start";
var background = createSprite(200, 200);
background.setAnimation("background");
background.scale = .35;
var GameOver = createSprite(200, 200);
GameOver.visible = false;
GameOver.setAnimation("background_underwater_17_1");
var barb = createSprite(194, 365);
barb.setAnimation("barb");
barb.scale = .07;
barb.rotation = 180;
barb.setCollider("circle", 80, 0, 60);
var hook = createSprite(200, 590);
hook.setAnimation("hook");
var king = createSprite(0, 200);
king.setAnimation("ChinookRT");
king.scale = .4;
king.velocityX = 4;
king.setCollider("circle", 30, 0, 25);
var king2 = createSprite(0, 100);
king2.setAnimation("Chinook2RT");
king2.scale = .3;
king2.velocityX = 6;
king2.setCollider("circle", 0, 0, 25);


function draw() {
  switch (screen) {
    case "start":
      start_screen();
      break;
    case "play":
      hook_movement();
      king_movement();
      Game_Over();
      Fish_Caught();
      drawSprites();
      break;
    case "finish":
      // Add additional code here when a game over happens or a win
      break;
  }
  // if (start) {
  //   hook_movement();
  //   king_movement();
  //   Game_Over();
  //   Fish_Caught();
  //   drawSprites();
  // } else {
  //   start_screen();
  // }

}
function Fish_Caught() {
  if (barb.isTouching(king)) {
    playSound("https://audio.code.org/winpoint1.mp3", false);
    king.x = 360;
    king.y = 320;
    king.velocityX = 0;
    hook.x = 200;
    barb.x = 194;
    hook.y = 590;
    barb.y = 365;
    countking = countking + 1;

  }
  if (barb.isTouching(king2)) {
    playSound("https://audio.code.org/winpoint1.mp3", false);
    king2.x = 360;
    king2.y = 340;
    king2.velocityX = 0;
    hook.x = 200;
    barb.x = 194;
    hook.y = 570;
    barb.y = 365;
    countking = countking + 1;

  }
}
function myFunction() {

}
function Game_Over() {
  if (countking == 2) {
    screen = "finish";
    GameOver.visible = true;
    king.visible = false;
    king2.visible = false;
    barb.visible = false;
    king2.visible = false;
    hook.visible = false;
  }
}
function start_screen() {
  textFont("Arial");
  textSize(24);
  text("Press the (s) key to start fishing.", 50, 150);
  if (keyDown("s")) {
    screen = "play";
  }
}
function hook_movement() {
  if (hook.y < 200) {
    hook.x = 200;
    barb.x = 194;
    hook.y = 590;
    barb.y = 365;
  }
  if (hook.y > 579) {
    barb.visible = true;
    hook.velocityY = 0;
    barb.velocityY = 0;
  }
  if (keyDown("right")) {
    hook.x = hook.x + 3;
    barb.x = barb.x + 3;
  }
  if (keyDown("left")) {
    hook.x = hook.x + -3;
    barb.x = barb.x + -3;
  }
  if (keyDown("space")) {
    hook.y = hook.y - 15;
    barb.y = barb.y - 15;
  }
  if (keyWentUp("space")) {
    barb.visible = false;
    hook.velocityY = 2;
    barb.velocityY = 2;
  }
}
function king_movement() {
  if (king.x > 450) {
    king.setAnimation("ChinookLT");
    king.velocityX = -4;
    king.y = randomNumber(60, 300);
  }
  if (king.x < -20) {
    king.setAnimation("ChinookRT");
    king.velocityX = 8;
    king.y = randomNumber(60, 300);
  }
  if (king2.x > 450) {
    king2.setAnimation("Chinook2LT");
    king2.velocityX = -4;
    king2.y = randomNumber(60, 300);
  }
  if (king2.x < -25) {
    king2.setAnimation("Chinook2RT");
    king2.velocityX = 15;
    king2.y = randomNumber(60, 300);
  }
}

This is new to me and I like the organization of it. I tried to add a game over screen and I could make it work. I already have a game over screen it goes to when you catch 2 fish. When I moved it over to the case “finish” it didn’t show the screen I wanted. I want something to happen when both fish are caught…when the countking is equal to 2.

that’s because i didn’t add that logic, you asked for a way to have start play and game over screens, you need to add the necessary animations for such screens to be displayed, after digging through your animations tag i had repurposed it to actually show the game over screen

countking = 0;
var screen = "start";
var Background = createSprite(200, 200);
Background.setAnimation("background");
Background.scale = .35;
var GameOver = createSprite(200, 200);
GameOver.setAnimation("game over");
GameOver.scale = 0.5;
GameOver.visible = false;
var barb = createSprite(194, 365);
barb.setAnimation("barb");
barb.scale = .07;
barb.rotation = 180;
barb.setCollider("circle", 80, 0, 60);
var hook = createSprite(200, 590);
hook.setAnimation("hook");
var king = createSprite(0, 200);
king.setAnimation("ChinookRT");
king.scale = .4;
king.velocityX = 4;
king.setCollider("circle", 30, 0, 25);
var king2 = createSprite(0, 100);
king2.setAnimation("Chinook2RT");
king2.scale = .3;
king2.velocityX = 6;
king2.setCollider("circle", 0, 0, 25);

function draw() {
  switch (screen) {
    case "start":
      drawSprites();
      start_screen();
      break;
    case "play":
      hook_movement();
      king_movement();
      Game_Over();
      Fish_Caught();
      drawSprites();
      break;
    case "finish":
      background(255);
      drawSprites();
      // Add additional code here when a game over happens or a win
      break;
  }
}
function Fish_Caught() {
  if (barb.isTouching(king)) {
    playSound("https://audio.code.org/winpoint1.mp3", false);
    king.x = 360;
    king.y = 320;
    king.velocityX = 0;
    hook.x = 200;
    barb.x = 194;
    hook.y = 590;
    barb.y = 365;
    countking = countking + 1;

  }
  if (barb.isTouching(king2)) {
    playSound("https://audio.code.org/winpoint1.mp3", false);
    king2.x = 360;
    king2.y = 340;
    king2.velocityX = 0;
    hook.x = 200;
    barb.x = 194;
    hook.y = 570;
    barb.y = 365;
    countking = countking + 1;

  }
}
function myFunction() {

}
function Game_Over() {
  if (countking == 2) {
    screen = "finish";
    GameOver.visible = true;
    king.visible = false;
    king2.visible = false;
    barb.visible = false;
    king2.visible = false;
    hook.visible = false;
    Background.visible = false;
  }
}
function start_screen() {
  textFont("Arial");
  textSize(24);
  text("Press the (s) key to start fishing.", 50, 150);
  if (keyDown("s")) {
    screen = "play";
  }
}
function hook_movement() {
  if (hook.y < 200) {
    hook.x = 200;
    barb.x = 194;
    hook.y = 590;
    barb.y = 365;
  }
  if (hook.y > 579) {
    barb.visible = true;
    hook.velocityY = 0;
    barb.velocityY = 0;
  }
  if (keyDown("right")) {
    hook.x = hook.x + 3;
    barb.x = barb.x + 3;
  }
  if (keyDown("left")) {
    hook.x = hook.x + -3;
    barb.x = barb.x + -3;
  }
  if (keyDown("space")) {
    hook.y = hook.y - 15;
    barb.y = barb.y - 15;
  }
  if (keyWentUp("space")) {
    barb.visible = false;
    hook.velocityY = 2;
    barb.velocityY = 2;
  }
}
function king_movement() {
  if (king.x > 450) {
    king.setAnimation("ChinookLT");
    king.velocityX = -4;
    king.y = randomNumber(60, 300);
  }
  if (king.x < -20) {
    king.setAnimation("ChinookRT");
    king.velocityX = 8;
    king.y = randomNumber(60, 300);
  }
  if (king2.x > 450) {
    king2.setAnimation("Chinook2LT");
    king2.velocityX = -4;
    king2.y = randomNumber(60, 300);
  }
  if (king2.x < -25) {
    king2.setAnimation("Chinook2RT");
    king2.velocityX = 15;
    king2.y = randomNumber(60, 300);
  }
}

you should be able to make further modifications without my help

Thank you for your time on this. I tried to run it but it had an error. I am going to use the case code you taught me to make my game have an iteration where you fish for different species on different screens. Thanks again.