JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b></label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>

CSS

circle{
    width: 50px;
    height: 50px;
    border-radius: 30px;
    position: absolute;
    background-color: blueviolet;
}
body{
    overflow: hidden;
    position: relative;
}
#box{
    width: 100%;
    height: 100%;
}
.score{
    font-size: 18px;
    color: red;
    font-weight: bold;
}
input[type=text]
{
    padding: 5px 5px;
    font-weight: 600;
    font-size: 15px;
    width: 90px;
}
button{
    padding: 4px;
}

JavaScript

var windowHeight = 0;
var parendElement;

 function startg () {
    parendElement = document.getElementById("box");
    windowHeight = window.innerHeight;
    document.body.style.height = windowHeight + "px";

    var interval = setInterval(function () {
        generateBall();
    }, 1000);
};

function generateBall() {
    var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
    var topPos = Math.floor((Math.random() * windowHeight) - 30);
    var para = document.createElement("p");
    para.style.left = leftPos + "px";
    para.style.top = topPos + "px";
    para.setAttribute("class", 'circle');
    parendElement.appendChild(para);
    removeBall(para);
}
function removeBall(ele) {
    setTimeout(function () {
        parendElement.removeChild(ele);
    }, 1000);
}

var clicks= 0;
clicks = document.getElementById('scores').valueOf();

var ballclk = document.getElementsByClassName('circle');
ballclk.onclick = function (){
    clicks++;
    console.log('clicks');
};