gamefly/script.js at main · mohsine-seg123/gamefly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
   const MOVE_SPEED = 3;
    const GRAVITY = 0.5;

    const bird = document.querySelector('.bird');
    const img = document.getElementById('bird-1');
    let birdProps = bird.getBoundingClientRect();
    const background = document.querySelector('.background').getBoundingClientRect();
    const scoreVal = document.querySelector('.score_val');
    const message = document.querySelector('.message');
    const scoreTitle = document.querySelector('.score_title');

    let game_state = 'Start';
    let birdDy = 0;
    img.style.display = 'none';

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && game_state !== 'Play') {
        document.querySelectorAll('.pipe_sprite').forEach(el => el.remove());
        bird.style.top = '40vh';
        img.style.display = 'block';
        img.src = 'flappybird.gif';
        scoreVal.textContent = '0';
        scoreTitle.textContent = 'Score : ';
        message.textContent = '';
        message.classList.remove('messageStyle');
        game_state = 'Play';
        birdDy = 0;
        play();
      }
    });

    // Saut de l'oiseau (géré une seule fois globalement)
    document.addEventListener('keydown', (e) => {
      if ((e.key === 'ArrowUp' || e.key === ' ') && game_state === 'Play') {
        birdDy = -7.6;
        img.src = 'flappybird.gif';
      }
    });

    function play() {
      function movePipes() {
        if (game_state !== 'Play') return;

        document.querySelectorAll('.pipe_sprite').forEach(el => {
          const pipeProps = el.getBoundingClientRect();
          birdProps = bird.getBoundingClientRect();

          if (pipeProps.right <= 0) {
            el.remove();
            return;
          }

          const collision =
            birdProps.left < pipeProps.left + pipeProps.width &&
            birdProps.left + birdProps.width > pipeProps.left &&
            birdProps.top < pipeProps.top + pipeProps.height &&
            birdProps.top + birdProps.height > pipeProps.top;

          if (collision) return endGame();

          if (pipeProps.right < birdProps.left && el.dataset.score === '1') {
            scoreVal.textContent = String(+scoreVal.textContent + 1);
            el.dataset.score = '0';
          }

          el.style.left = pipeProps.left - MOVE_SPEED + 'px';
        });

        requestAnimationFrame(movePipes);
      }
      requestAnimationFrame(movePipes);

      function applyGravity() {
        if (game_state !== 'Play') return;

        birdDy += GRAVITY;
        bird.style.top = birdProps.top + birdDy + 'px';
        birdProps = bird.getBoundingClientRect();

        if (birdProps.top <= 0 || birdProps.bottom >= background.bottom) {
          return endGame();
        }

        requestAnimationFrame(applyGravity);
      }
      requestAnimationFrame(applyGravity);

      let pipeSeparation = 0;
      const PIPE_GAP = 35;

      function createPipe() {
        if (game_state !== 'Play') return;

        if (pipeSeparation > 115) {
          pipeSeparation = 0;

          const pipePos = Math.floor(Math.random() * 43) + 8;

          const pipeTop = document.createElement('div');
          pipeTop.className = 'pipe_sprite';
          pipeTop.style.top = pipePos - 65 + 'vh';
          pipeTop.style.left = '100vw';
          pipeTop.style.transform = 'rotate(180deg)';
          document.body.appendChild(pipeTop);

          const pipeBottom = document.createElement('div');
          pipeBottom.className = 'pipe_sprite';
          pipeBottom.style.top = pipePos + PIPE_GAP + 'vh';
          pipeBottom.style.left = '100vw';
          pipeBottom.dataset.score = '1';
          document.body.appendChild(pipeBottom);
        }

        pipeSeparation++;
        requestAnimationFrame(createPipe);
      }
      requestAnimationFrame(createPipe);
    }

    function endGame() {
      game_state = 'End';
      img.style.display = 'none';
      message.innerHTML = 'Game Over<br>Press Enter to Restart';
      message.classList.add('messageStyle');
    }