Synapse-BubbleGamemain-Vision/script.js at main · AshrafMorningstar/Synapse-BubbleGamemain-Vision · 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
/**
 * @license
 * Copyright © 2026 Ashraf Morningstar
 * https://github.com/AshrafMorningstar
 *
 * Licensed under the MIT License.
 * This is a personal educational recreation.
 * Original project concepts remain property of their respective creators.
 */

/*
 Copyright (c) 2026 Ashraf Morningstar
 These are personal recreations of existing projects, developed by Ashraf Morningstar
 for learning and skill development.
 Original project concepts remain the intellectual property of their respective creators.
 Repository: https://github.com/AshrafMorningstar
*/


let timer = 60;
let score = 0;
let hitRandomNumber = 0;


// this  function crate for makeBubble

function makeBubble () {
  let clutter =" ";
for(let i=1; i<=78; i++){
  let randomNumber = Math.floor( Math.random() *10);
  clutter += `<div class="bubble">${randomNumber}</div>`;
  document.querySelector("#contain-bottom").innerHTML = clutter;
}
}


//  this  function create for timer
function runTimer() {
  let timerInt = setInterval(function () {
    if (timer > 0) {
      timer--;
      document.querySelector("#timerVal").textContent = timer;
    } else {
      clearInterval(timerInt);

      // Add Game Over message and Restart button
      document.querySelector("#contain-bottom").innerHTML = `
        <h1 class="game-over">Game Over</h1>
        <button class="restart">Restart</button>`;

      // Delay to ensure DOM update before attaching event listener
      setTimeout(() => {
        const restartBtn = document.querySelector(".restart");
        if (restartBtn) {
          restartBtn.addEventListener("click", function (e) {
            e.preventDefault();
            timer = 60;
            score = 0;
            runTimer(); // Restart the timer function
            makeBubble();

          });
        }
      },0);
    }
  }, 1000);
}

// this function create for Hit
function getNewHit (){
  hitRandomNumber = Math.floor(Math.random()*10);
  document.querySelector("#hitVal").textContent = hitRandomNumber;
}

// this function create for increaseScore
function increaseScore(){
  score += 10;
  document.querySelector("#scoreVal").textContent = score;
}

// this function create for decreaseScore
function decreaseScore(){
  score -= 10;
}

document.querySelector("#contain-bottom")
.addEventListener("click", function (details){
let clickedNumber= (Number(details.target.textContent));

if(clickedNumber === hitRandomNumber){
  increaseScore();
  makeBubble();
  getNewHit();
}else{
  decreaseScore();
  details.target.style.backgroundColor = "red";
}
});

getNewHit();
runTimer();
makeBubble();

// These are personal recreations of existing projects, developed by Ashraf Morningstar for learning and skill development. Original project concepts remain the intellectual property of their respective creators.
https://github.com/AshrafMorningstar