JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<canvas width='500' height='600'></canvas>

JavaScript

var H = {

    canvasHeight : 400,
    canvasWidth : 500,
    ballRadius : 50,
    ground : 0,

    theBall : false,
    theCanvas : false,

    ballMoving : false,
    ballUp : true,
    ballInterval : false,
    ballIntervalSpeed : 10,
    ballYSpeed : 0,
    ballYSpeedStart : 15,
    ballYSpeedIncrement : 1,
    ballXSpeed : 0,
    ballXSpeedMax : 1,


    init : function() {
        $("canvas").drawArc({
            layer: true,
            name: 'theBall',
            fillStyle: "#c33",
            x: 200, y: H.canvasHeight-H.ballRadius,
            radius: 50,
            mousedown:function(layer) {
                H.ballStart();
            },
            mouseover:function(layer) {
                H.theCanvas.css("cursor","pointer");
            }
        });

        H.theBall = $("canvas").getLayer("theBall");
        H.theCanvas = $("canvas");
        H.ground = H.canvasHeight-H.ballRadius;
        H.ballInterval = setInterval(H.ballMove,H.ballIntervalSpeed);

        document.addEventListener('mousedown', H.handleMousedown, false);

        console.log(H.theBall.y, H.ballYSpeed, H.ballUp);
    },

    ballMove : function() {
        if(H.ballMoving==true){
        console.log(H.theBall.y, H.ballYSpeed, H.ballUp);
            if(H.ballUp) {
                H.ballYSpeed -= H.ballYSpeedIncrement;
                H.theBall.y -= H.ballYSpeed;
            } else {
                H.ballYSpeed += H.ballYSpeedIncrement;
                H.theBall.y += H.ballYSpeed;
            }

            H.theBall.x += H.ballXSpeed;
        
            // Lines 39-45 bounce the Ball horizontally off the walls
            if(H.theBall.x<H.ballRadius){
                H.ballXSpeed = -H.ballXSpeed;
                H.theBall.x = H.ballRadius;
            } else if(H.theBall.x>H.canvasWidth-H.ballRadius) {
                H.ballXSpeed = -H.ballXSpeed;
                H.theBall.x = H.canvasWidth-H.ballRadius;
            }

            if(H.theBall.y>=H.ground) {
              ...