JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Faster blaster!!!</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/click.js"></script>
    <script src="js/object.js"></script>
  <!--  <script src="movement.js"></script> -->
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
  </head>

  <body>
    <section id="game">

    </section>
    
    <button id="start">Let's blast!</button>
  </body>
</html>

CSS

body {
  background-color: darkgray;
  flex-direction: column;
  justify-content: space-around;
}

section {
  margin: 200px; 
  border: 3px solid black;
  width: 1024px;
  height: 960px;
  background-color: black;
}

.ball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

div {
  font-size: 15px;
  font-weight: bold;
  border: 3px solid yellow;  
}

button {
  margin-top: -40px;
  margin-left: 500px;
  background-color: green;
  padding: 20px;
  width: 400px;
  font-size: 50px;
  font-weight: bolder;
  font-style: italic;
  line-height: 60px;
  color: white;
  border-radius: 30px;
}

JavaScript

$(document).ready(function(){ 

  $("#start").click(function(){ //Start button calls a new bubble and scoring
    console.log("Start");  
    newBubbles();
  })

  var coloursBall = ["red", "green", "blue"];
  var timeoutID = 0

  function newBubbles() {   //generates new bubble with random properties and set timer
    $("#game").append("<div id=\"1\" class=\"ball\">Click me!</div>");
    var randomWidth = Math.floor(Math.random() * (1024)); //max width on css 1024px 
    if (randomWidth > 1024 - $(".ball").width) {
      randomWidth /= 2;
    }
    console.log(randomWidth);
    var randomHeight = Math.floor(Math.random() * (960)); //max heigth on css 960px
    if (randomHeight > 960 - $("ball").height) {
      randomHeight /= 2
    }
    console.log(randomHeight);
    var randomColor = coloursBall[Math.floor(Math.random() * coloursBall.length)];
    console.log(randomColor);

    $(".ball").css({"margin-left": randomWidth});
    $(".ball").css({"margin-top": randomHeight});
    $(".ball").css({"background-color": randomColor});
    
    //timeoutID = setTimeout(function(){gameOver()},2000) //timer to click the bubble  
  }


  
  var click = $("#1").click(function(){ //click a bubble call to end previous bubble and timer
    console.log("Click to Ball");
    alert("Hola");
    //$(this).remove();	
    //clearTimeout(timeoutID);
    //newBubbles();
  })

  function gameOver() { //to call if time is out
    console.log("hello")
    var gameOver = "You lost!";
    console.log(gameOver);
  }

})