Frog-Leap-Game

1
// Фон
2
export function drawBackground(ctx, canvas) {    
3
    // Небо
4
    ctx.fillStyle = "#87ceeb";
5
    ctx.fillRect(0, 0, canvas.width, canvas.height * 0.7);
6

7
    // Болото с градиентом
8
    const gradient = ctx.createLinearGradient(
9
      0,
10
      canvas.height * 0.7,
11
      0,
12
      canvas.height
13
    );
14
    gradient.addColorStop(0, "darkgreen");
15
    gradient.addColorStop(1, "black");
16
  
17
    ctx.fillStyle = gradient;
18
    ctx.fillRect(0, canvas.height * 0.7, canvas.width, canvas.height * 0.3);
19

20
    // Камыши
21
    for (let i = 0; i < canvas.width; i += 85) {
22
      ctx.fillStyle = "#556B2F";
23
      ctx.fillRect(i, canvas.height * 0.7 - 60, 6, 60); // Стебель
24
      ctx.fillStyle = "#8B4513";
25
      ctx.fillRect(i, canvas.height * 0.7 - 76, 6, 25); // Верхушка
26
    }
27

28
    // Солнце
29
    ctx.fillStyle = "yellow";
30
    ctx.beginPath();
31
    ctx.arc(canvas.width - 100, 100, 50, 0, Math.PI * 2);
32
    ctx.fill();
33

34
    // Облако слева
35
    ctx.fillStyle = "white";
36
    ctx.beginPath();
37
    ctx.arc(150, 100, 40, 0, Math.PI * 2);
38
    ctx.arc(200, 100, 50, 0, Math.PI * 2);
39
    ctx.arc(250, 100, 40, 0, Math.PI * 2);
40
    ctx.fill();
41

42
    // Облако справа
43
    ctx.fillStyle = "white";
44
    ctx.beginPath();
45
    ctx.arc(450, 150, 40, 0, Math.PI * 2);
46
    ctx.arc(500, 150, 50, 0, Math.PI * 2);
47
    ctx.arc(550, 150, 40, 0, Math.PI * 2);
48
    ctx.fill();
49
}
50

51
// Кувшинки
52
export const lilyPads = [
53
    { x: 150, y: 400, width: 100, height: 20 },
54
    { x: 350, y: 400, width: 100, height: 20 },
55
    { x: 550, y: 400, width: 100, height: 20 },
56
  ];
57
  export function drawLilyPads(ctx) {
58
    ctx.fillStyle = "#00ca33";
59
        lilyPads.forEach((lilyPad) => {
60
          ctx.fillRect(lilyPad.x, lilyPad.y, lilyPad.width, lilyPad.height);
61
        });
62
}
63

64
// Счёт - Score
65
export function drawScore(ctx, score) {
66
    ctx.fillStyle = "white";
67
        ctx.font = "20px sans-serif";
68
        // Заголовок Score, число 0, расположение на экране
69
        ctx.fillText(`Score: ${score}`, 10, 30); 
70
}
71

72
// Проверка на столкновение лягушки и мошки
73
export function detectCollision(frog, fly) {
74
    return (
75
        frog.x < fly.x + fly.width &&
76
        frog.x + frog.width > fly.x &&
77
        frog.y < fly.y + fly.height &&
78
        frog.height + frog.y > fly.y
79
      );
80
}
81

82
// Обновление игры
83
export function update(ctx, frog, flies, score, gameRunning) {
84
    if (gameRunning) {
85
        ctx.clearRect(0, 0, canvas.width, canvas.height);
86
        drawBackground();
87
        drawLilyPads();
88
        frog.update();
89
        frog.draw();
90
        flies.forEach((fly) => {
91
          fly.update();
92
          fly.draw();
93
          if (detectCollision(frog, fly)) {
94
            score++;
95
            fly.x = Math.random() * canvas.width;
96
            fly.y = Math.random() * (canvas.height - 200);
97
          }
98
        });
99
        drawScore();
100

101
        // Обновляем и рисуем всплески
102
        splashes = splashes.filter((splash) => splash.alpha > 0);
103
        splashes.forEach((splash) => {
104
          splash.update();
105
          splash.draw();
106
        });
107
      }
108
      requestAnimationFrame(update);
109
}
110