Flappy Bird (Код с урока)?

Question

[SaberChazer]

Подскажите как сделать так чтобы при достижении "Score: 10" то менялся фон на такую картинку.

// Файлы (звуки, объекты)
	let back = new Image();
// Снизу первый задний фон "back", а мне еще нежна картинка с Pikabu которая снизу
 	back.src = "img/back.png"; //http://s11.pikabu.ru/post_img/2018/08/06/11/1533579347172198765.jpg

	let bird = new Image();
	bird.src = "img/bird.png";

	let pipeBottom = new Image();
	pipeBottom.src = "img/pipeBottom.png";

	let pipeUp = new Image();
	pipeUp.src = "img/pipeUp.png";

	let road = new Image();
	road.src = "img/road.png";
// 	let fly = new Audio();
// 	fly.src = "audio/fly.mp3";

	let score_audio = new Audio();
	score_audio.src = "audio/score.mp3";
    // Конец файлов

	let canvas = document.getElementById("canvas");
	let ctx = canvas.getContext("2d");

	canvas.width = 256;
	canvas.height = 512;
  
    let score_text = document.getElementById("score");
    let bst = document.getElementById("best");

    let secret = 5;
  	let xPos = 10;
	  let yPos = 120;
	  let gravity = 0.1;
	  let velY = 0;
  	let pipe = [];
    let gap = 100;
    let score = 0;
    let best_score = 0;
    let pause = true;
	pipe[0] = {
		x: canvas.width,
        y: 0
	};

	function draw() {
		if (!pause) {
		ctx.drawImage(back, 0, 0);
		ctx.drawImage(bird, xPos, yPos);
		velY += gravity;
		yPos += velY;
		 if (yPos >= 440) {
		 	reload();
		 }
		     for (let i = 0; i < pipe.length; i++) {
		     	if (pipe[i].x < -pipeUp.width) {
		     		pipe.shift()
		     	}
		     	else {
     	ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
     	ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);
     	pipe[i].x -= 2;
     	if (pipe[i].x == 40) {
     		pipe.push({
     			x: canvas.width,
     			y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
     		});
     	 }
       }	
      // прикосновение птицы с трубами
       if (xPos + bird.width >= pipe[i].x && xPos <= pipe[i].x + pipeUp.width && 
       	 (yPos <= pipe[i].y + pipeUp.height || yPos + bird.height >= pipe[i].y + pipeUp.height + gap)) {
       	reload();
       }
       if (pipe[i].x == 0) {
          score_audio.play();
          score++;
       }
     } 
     score_text.innerHTML = "Score: " + score;
     bst.innerHTML = "Best score: " + best_score;

     ctx.drawImage(road, 0, 440);
	}
	else {
		ctx.drawImage(back, 0, 0);
		ctx.drawImage(bird, xPos, yPos);
		for (let i = 0; i < pipe.length; i++) {
			ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
     	    ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);
		}
		ctx.drawImage(road, 0, 440);
		ctx.fillStyle = `rgba(0, 0, 0, 0.3)`;
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
}

	setInterval(draw, 20);

	document.addEventListener("keydown", function(event) {
     if (event.code == "Space") {
          MoveUp();      
     }
	})
 
	function MoveUp() {
		velY -= 4;
		fly.play();
	}

	function reload() {
		xPos = 10;
		yPos = 150;
		velY = 0;
		pipe = [];
		if (score > best_score) {
            best_score = score;
		}
		score = 0;
		pipe[0] = {
			x: canvas.width,
			y: 0
		}
	}

	function game_pause() {
		pause = !pause;
	}
  
	document.addEventListener(`keyup`, function(event) {
		if (event.code == "KeyP") {
			game_pause();
		}
	});

<div class="wrapper">
		<p id="score">Score: </p>
		<p id="best">Best score: </p>
	</div>
	<div class="cvs" id="twoContent">
		<canvas id="canvas"></canvas>
	</div>

Comments

[Александр Шипин]

вам необходимо вынести отрисовку фона в отдельный метод, в котором вы будете проверять количество набранных очков и отрисовывать необходимый вам фон. после этот метод протянуть в метод draw, который занимается общей отрисовкой.

в идеале, метод draw должен содержать в себе набор методов, связанных с отрисовкой, то есть

function draw() {
 drawBackground();
 drawBird();
 drawPipe();
 // и тд
}

function drawBackground() {
 if (!isGameEnd) {
  score < 20 ? drawFirstBack() : drawSecondBack();
 }
 // и тд
}
function drawBird() {
 moveBird();
 checkOnCollision();
 // и тд
}

[SaberChazer]

Александр Шипин, Спасибо большое