JSFiddle - React, Tailwind, and code Playground
HTML
<div id="game">
<div id="square0"></div>
<div id="square1"></div>
<div id="notepad"></div>
<div id="pad"></div>
</div>
<script type="text/javascript">
var gameWidth = 400
var gameHeight = 400
var intervalOne, intervalTwo, timeoutOne, x
var angle = 2
var tempX = 0
var tempY = 0
var block = 1
var square = 0
var squareTop = 0
var squareLeft = 0
var squareMotion = 1
var speed = 80
var getPad = 0
var nextScore = 0
var score = 0
var count = 0
var collisionOne = 0
var collisionTwo = 0
var collisionThree = 0
document.body.style.margin = "0px"
document.body.style.padding = "0px"
function setupGame() {
document.getElementById("game").style.borderRight = "1px solid #aaa"
document.getElementById("game").style.borderRight = "1px solid #aaa"
document.getElementById("game").style.borderBottom = "1px solid #aaa"
document.getElementById("game").style.width = gameWidth + "px"
document.getElementById("game").style.height = gameHeight + "px"
document.getElementById("square0").style.position = "absolute"
document.getElementById("square0").style.width = "40px"
document.getElementById("square0").style.height = "40px"
document.getElementById("square0").style.backgroundColor = "#444"
document.getElementById("square0").style.display = "none"
document.getElementById("square1").style.position = "absolute"
document.getElementById("square1").style.width = "40px"
document.getElementById("square1").style.height = "40px"
document.getElementById("square1").style.backgroundColor = "#444"
document.getElementById("square1").style.display = "none"
document.getElementById("pad").style.position = "absolute"
document.getElementById("pad").style.width = "60px"
document.getElementById("pad").style.height = "30px"
document.getElementById("pad").style.paddingTop = "10px"
document.getElementById("pad").style.textAlign = "center"
document.getElementById("pad").style.font =...