JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="1920" height="1080"></canvas>
 <div id="start-game-block">
  <button id="btn-start" onclick="location.reload();">START</button>
  <h1 id="score">Очки:<span id="new-score"></span></h1>
</div>
  <img style="display:none;" id="apple" src="http://klb.zzz.com.ua/img/apple.png" onclick="none(this)">
 
<!--]--><div style="text-align:center;font-size:11px" class="cbalink"><a href="https://www.zzz.com.ua/" title="&#1073;&#1077;&#1089;&#1087;&#1083;&#1072;&#1090;&#1085;&#1099;&#1081; &#1093;&#1086;&#1089;&#1090;&#1080;&#1085;&#1075;">&#1073;&#1077;&#1089;&#1087;&#1083;&#1072;&#1090;&#1085;&#1099;&#1081; &#1093;&#1086;&#1089;&#1090;&#1080;&#1085;&#1075;</a> ZZZ.COM.UA<br/><br/></div>
<script type="text/javascript" src="//a5.zzz.com.ua/r1.js"></script>
<div class="cumf_bt_form_wrapper" style="display:none">
<form id="contact_us_mail_feedback" action="/oldTi9QvqM6ytokU9Q8ylQq" method="post">
    <fieldset>
        <!-- Form Name -->
        <legend>Contact Us</legend>
        <!-- Text input-->
        <div class="cumf_bt_form-group">
            <label class="col-md-4 cumf_bt_control-label" for="cumf_bt_name">name</label>
            <div class="col-md-4">
                <input id="cumf_bt_name" name="cumf_bt_name" type="text" placeholder="your name" class="cumf_bt_form-control cumf_bt_input-md" required />
                <span class="cumf_bt_help-block">Please enter your name</span>
            </div>
        </div>
        <!-- Text input-->
        <div class="cumf_bt_form-group">
            <label class="col-md-4 cumf_bt_control-label" for="cumf_bt_email">your email</label>
            <div class="col-md-4">
                <input id="cumf_bt_email" name="cumf_bt_email" type="text" placeholder="enter your email" class="cumf_bt_form-control cumf_bt_input-md" required />
                <span class="cumf_bt_help-block">please enter your email</span>
            </div>
        </div>
        <!-- Textarea -->
        <div...

CSS

#canvas{
	width: 100%;
    height: 100%;
    margin: 0;
    background-size: 100%;
    right: 0px;
    top: -1px;
    background: red;
}

#start-game-block{
	background: #20ff79;
    padding: 74px 134px;
    max-width: 200px;
    border: 1px solid #478e47;
    margin: 0 auto;
    left: 537px;
    position: absolute;
    display:none;
    border-radius: 18px;
    top: 249px;
}
#btn-start{
    background: #efff00;
    padding: 8px 40px;
    position: relative;
    top: 104px;
    left: -9px;
    font-family: arial;
    font-weight: bold;
    color: green;
    text-transform: uppercase;
}
#score{
    font-family: arial;
    color: red;
    position: relative;
    top: -92px;
    left: -13px;
    padding: 8px;
}

JavaScript

var cvs = document.getElementById("canvas"); 
var ctx = cvs.getContext("2d"); 

var bird = document.getElementById('bird');
var bg = document.getElementById('bg');
 
var score = 0; 

var xPos = 50; 
var yPos = 50; 

var grav = 0.3 


var second=30;

function getMouesPosition(e) {
    var mouseX = e.offsetX * cvs.width / cvs.clientWidth | 0;
    var mouseY = e.offsetY * cvs.height / cvs.clientHeight | 0;
    return {x: mouseX, y: mouseY};
}

function killFood(f) {
	let pos = fruit.indexOf(f);
  if (pos === -1) {
  	// already dead
    return;
  }
  fruit.splice(pos, 1);
	score += ~~Math.floor(Math.random()+ 17)
}

function food(e){
	let mouse = getMouesPosition(e);
  fruit.forEach(f => {
  	if (mouse.x > f.x && mouse.y > f.y && mouse.x < f.x + apple.width && mouse.y < f.y + apple.height) {
    	killFood(f);
    }
  });
}


cvs.addEventListener("click", food)

let fruit = [ 
{ 

x: 150 + ~~(Math.random() * cvs.width - 75), 
y: 0, 
speed: 1 + ~~(Math.random() * 3), 
score: ~~(Math.random() * 5) 
},
]; 


function draw(){ 
ctx.drawImage(bg, 0, 0); 
 


for(var i = 0; i < fruit.length; i++){ 
ctx.drawImage(apple, fruit[i].x, fruit[i].y); 

fruit[i].y++;

if(fruit[i].y == 50){ 
fruit.push({ 
x : ~~(Math.random() * cvs.width - 13), 
y : ~~(Math.random() * apple.height - apple.height)
}) 
} 

 if(fruit[i].y == cvs.height - 30){
	 fruit.splice(i,1);
	 
 }

}




ctx.fillStyle = "#fff";
ctx.font = "33px Verdana"; 
ctx.fillText("Очки:" +score , 1670, cvs.height - 980); 
ctx.fillText("Time:" +second , 1670, cvs.height - 1030); 



if(!window.stopgame)requestAnimationFrame(draw); 

yPos += grav; 


if(second == 0){
	document.getElementById("start-game-block").style.display = "block";
	document.getElementById("new-score").innerHTML = (+score);

}


}

var timeTicker = () => {
	second--;
	if(second <= 0) return window.stopgame = true;
	setTimeout(timeTicker.bind(this), 1000);
  };
 timeTicker();

draw();