JSFiddle - React, Tailwind, and code Playground

by ramji

HTML

<title>Gamedev Canvas Workshop</title>
   <canvas id="myCanvas" width="580" height="520"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ctx1 = canvas.getContext("2d");
var pad = canvas.getContext("2d");
 var x = canvas.width/2;
var y = canvas.height-30;
 var x1 = canvas.width/12;
var y1 = canvas.height-10;
var dx = 2;
var dy = -3;
var dx1 = 2;
var dy1 = -2;

var ballRadius = 10;


document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

/*paddle creation Declaration*/
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;


/*
Key board button Declaration for event handling
*/

var rightPressed = false;
var leftPressed = false;







/*Brick Declararation*/

var brickRowCount = 3;
var brickColumnCount = 6;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;


var bricks = [];
for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0,status:1 };
    }
}

/*Draw Paddle Function*/
function drawPaddle() {

    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}


function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

var color1="#0095DD"
var color2="#000000"


function drawball()
{
	    ctx.beginPath();

ctx.fillStyle = color1;
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fill();
ctx.closePath();

}

function drawball2()
{
        ctx1.beginPath();
ctx1.arc(x1, y1, ballRadius, 0, Math.PI*2);
ctx1.fillStyle = color2;
ctx1.fill();
ctx1.closePath();

}


function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
   ...