JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="load_document()" onclick="start_game()" onmousemove="follow(event)">
	<div id="area" class="area">
		<div id="enemy" class="enemy"></div>
		<div class="line"></div>
		<div id="ball" class="ball"></div>
		<div id="platform" class="platform"></div>
	</div>
	<div id="score1" class="score1">Click to START</div>
	<div id="score2" class="score2">Click to START</div>
</body>

CSS

body{
	background-color: #006400;
}

.area{
	width: 700px;
	height: 500px;
	margin: auto;
	border: solid 15px white;
	cursor: none;
	background-color: #800000;
}

.platform{
	position: fixed;
	width: 90px;
	height: 10px;
	margin-top:450px;
	background-color: white;
	border-top: solid 5px #b4b4b4;
	border-radius: 10px;
}

.ball{
	position: fixed;
	width: 14px;
	height:14px;
	background-color: white;
	border-radius: 24px;
}

.enemy{
	position: fixed;
	width: 90px;
	height: 10px;
	margin-top: 30px;
	background-color: white;
	border-bottom: solid 5px #b4b4b4;
	border-radius: 10px;
}

.score1{
	position: absolute;
	left:5%;
	top: 20px;
	font-size: 20px;
	color:white;
}

.line{
	float: left;
	width: 700px;
	height: 5px;
	margin: auto;
	margin-top:255px;
	background-color: white;
	
}

.score2{
	position: absolute;
	left:5%;
	top: 500px;
	font-size: 20px;
	color:white;
}

JavaScript

var game_started=0
var x=0; //pozycja gracza
var x_e=0;
var point_gamer=0;
var point_enemy=0;
var kat_poruszania=0;
var wysokosc=500;
var szerokosc=700;
var odbicie=0;
var pozycja=1;
var pozycja_last=0;
var odb_now=1;
var ile_przes=0;

var ball_x=75;
var ball_y=460;
var direction_x="";
var direction_y="";

var center=0;
var half_platform = 0;
var half_enemy = 0;

var width=0;

var max_left=0;
var max_right=0;
var max_top=0;
var max_bottom=0;
var ball="";
var platform="";
var enemy="";

window.setInterval(bouncing_ball, 1);
window.setInterval(ai_enemy, 1);
window.setInterval(check_page_size, 1000);

function check_page_size()
{
	if(document.body.clientWidth!=width)
	{
		window.location.reload();
	}
}

function load_document()
{
	ball = document.getElementById('ball');
	platform=document.getElementById("platform");
	enemy=document.getElementById("enemy");
	w1=document.getElementById("score1");
	w2=document.getElementById("score2");

	center=document.body.clientWidth/2;
	half_platform = platform.offsetWidth/2;
	half_enemy = enemy.offsetWidth/2;

	width=document.body.clientWidth;

	max_left=center-340;
	max_right=center+360;
	max_top=20;
	max_bottom=480;

	w1.style.left=(max_left-200)+"px";
	w2.style.left=(max_left-200)+"px";
}

function start_game()
{
	if(game_started==0)
	{
		direction_x="RIGHT";
		direction_y="UP";


			enemy.style.left=x+"px";
			x_e=x;
			ball.style.left = x+"px";
			ball.style.top=ball_y+"px";
			ball_x = x;


		kat_poruszania=2;
		odbicie=0;
		pozycja=1;
		odb_now=1;
		game_started=1;
	}
}

function follow(event)
{
	x = event.clientX;

	if(x<max_left+half_platform)
	{
		x=max_left+half_platform;
	}
	else if(x>max_right-half_platform)
	{
		x=max_right-half_platform;
	}

	x=x-half_platform;

	platform.style.left = x+"px";

	if(game_started==0)
	{
		enemy.style.left=x+"px";
		x_e=x;
		x=x+half_platform-10;
		ball.style.left = x+"px";
		ball.style.top=ball_y+"px";
		ball_x = x;
	}
}

function...