JSFiddle - React, Tailwind, and code Playground

by Kinetic915

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
    background-color: yellow;
}

JavaScript

//make paddle stop at end of window
//NEED PART 9
//    augment the removal of a block randomly performing one of the following actions:

//        nothing

//        increase or decrease the speed of the ball

//        increase or decrease the size of the paddle
//       increase or decrease the size of the ball



//*********************
//GLOBAL VARIABLES :(
//*********************

//****SLOPE****
var dx = 2; //direction of x      Y OVER X, RISE OVER RUN = M
var dy = 4; //direction of y
//could randomize these numbers, or allow for user input
//*************
var Cir;
var paddlex;

var paddleh;
var paddlew;
var ppoffset = 30; //paddlepositionoffset
var rightpress = false;
var leftpress = false;

//brick variables
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;

//set when down
function Keypress(evt) {
    if (evt.keyCode == 39) rightpress = true;
    else if (evt.keyCode == 37) leftpress = true;
}

//unset
function Keyoff(evt) {
    if (evt.keyCode == 39) rightpress = false;
    else if (evt.keyCode == 37) leftpress = false;
}

$(document).keydown(Keypress);
$(document).keyup(Keyoff);


function init_paddle() {
    paddlex = WIDTH / 2;
    paddleh = 10;
    paddlew = 100;
}

function start() {
    Cir = $('#canvas')[0].getContext("2d");
    //Cir1 = $('#canvas')[0].getContext("2d");

    //var c=document.getElementById("myCanvas"); solomente javascript
    //var ctx=c.getContext("2d");
    return setInterval(drawCIRCLE, 10);
}

function windowsize() {
    WIDTH = $("#canvas")[0].width = ($(window).width()-20.5);
    HEIGHT = $("#canvas")[0].height = ($(window).height()-20.5);

}

windowsize();

var x = WIDTH / 2; //divide by 2 start in middle of window
var y = HEIGHT / 2;

function circle() {
    //Cir.clearRect(0, 0, WIDTH, HEIGHT);
    Cir.beginPath();
    Cir.arc(x, y, 10, 0, Math.PI * 2, true);
    Cir.closePath();
    Cir.fill();
}

function initbricks() {
  NROWS = 5;
  NCOLS = 5;
  BRICKWIDTH = (WIDTH/NCOLS) - 1;
 ...