JSFiddle - React, Tailwind, and code Playground

by Paras

JavaScript

// game to sit in.)
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// YOUR JAVASCRIPT CODE HERE:

var paddleX = 200;
var paddleY = 460;

var paddleWidth = 100;
var paddleHeight = 15;

var paddleDeltaX = 0;
var paddleDeltaY = 0;

function drawPaddle() {
    context.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
}

var ballX = 300;
var ballY = 300;
var ballRadius = 10;
function drawBall() {
    // Context.beginPath when you draw primitive shapes
    context.beginPath();

    // Draw arc at center ballX, ballY with radius ballRadius, 
    // From 0 to 2xPI radians (full circle)
    context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2, true);

    // Fill up the path that you just drew
    context.fill();
}


var bricksPerRow = 8;
var brickHeight = 20;
var brickWidth = canvas.width / bricksPerRow;

// Brick Layout: 1 is orange, 2 is green, 3 is gray, 0 means no brick 
var bricks = [
	[RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3)],
    [RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3)],
    [RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3)],
    [RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3), RandInt(0,3)]
];


function RandInt(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
// iterate through the bricks array and draw each brick using drawBrick()
function createBricks() {
    for (var i = 0; i < bricks.length; i++) {
        for (var j = 0; j < bricks[i].length; j++) {
            drawBrick(j, i, bricks[i][j]);
        }
    }
}

// draw a single brick
function drawBrick(x, y, type) {
    switch (type) { // if brick is still visible; three colors for three types of bricks
        case 1:
            context.fillStyle = 'orange';
            break;
        case...