JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="container">
    <div id="moveup"></div>
    <div id="movedown"></div>
    <p>
        <canvas id="playbox" width="800" height="600" />
    </p>
    <p>
        <input type="button" id="start" value="Start" onclick="startGame()" />
    </p>
</div>

CSS

body {
    background-color: black;
}
#container {
    width: 800px;
    height: 600px;
    margin: auto auto;
    z-index: 0;
}
#playbox {
    background-color: white;
    width: 800px;
    height: 600px;
    z-index: 1;
}
#moveup {
    position: absolute;
    width: 800px;
    height: 300px;
    margin: auto auto;
    z-index: 2;
}
#movedown {
    position: absolute;
    height: 300px;
    top: 316px;
    margin: auto auto;
    z-index: 3;
}

JavaScript

// Initializing Game vars
var xPlayer = 10;
var yPlayer = 260;
var xBall = 395;
var yBall = 295;
var xBallSpeed = 2;
var yBallSpeed = 2;
var playerSpeed = 2;
var runsGame = 0;
var runningGame = null;

// Graphics 
// Draw the Player
function drawPlayer(x, y) {
    var playbox = document.getElementById("playbox");
    var draw = playbox.getContext("2d");
    draw.fillStyle = "rgba(0,0,0,1)";
    draw.fillRect(x, y, 10, 80);
}

// Draw the Ball
function drawBall(x, y) {
    var playbox = document.getElementById("playbox");
    var draw = playbox.getContext("2d");
    draw.fillStyle = "rgba(0,0,0,1)";
    draw.fillRect(x, y, 10, 10);
}

// Clear Canvas
function clear() {
    var playbox = document.getElementById("playbox");
    var draw = playbox.getContext("2d");
    draw.clearRect(0, 0, playbox.width, playbox.height);
}

// Reset Elements
function resetO() {
    var playbox = document.getElementById("playbox");
    var draw = playbox.getContext("2d");
    draw.clearRect(0, 0, playbox.width, playbox.height);
    xPlayer = 10;
    yPlayer = 260;
    xBall = 395;
    yBall = 295;
    xBallSpeed = 2;
    yBallSpeed = 2;
    playerSpedd = 2;

}

// Player Controls

// Control vars
var movesUp = 0;
var moveDown = 0;

// Game Logic

// Main function
function main() {

    if (runsGame == 1) {
        // Drawing game elements
        clear();
        drawPlayer(xPlayer, yPlayer);
        drawBall(xBall, yBall);
        xBall += xBallSpeed;
        yBall += yBallSpeed;
        // Ball hits bottom
        if (yBall > 590) {
            yBallSpeed = -2;
        }
        // Ball hits right
        if (xBall > 790) {
            xBallSpeed = -2;
        }
        // Ball hits top
        if (yBall < 0) {
            yBallSpeed = 2;
        }
        // Ball hits Player 
        if (xBall <= xPlayer + 10 && yBall >= yPlayer && yBall <= yPlayer + 80) {
            xBallSpeed = 2;
        }
        // Ball hits "Out"
        if (xBall < 0) {
            resetO();
           ...