JSFiddle - React, Tailwind, and code Playground

by fairmutex

HTML

<section> 
<canvas id="breakOutBricks" width="500" height="300"></canvas> 
 <canvas id="breakOutPaddle" width="500" height="300"></canvas>
 <canvas id="breakOutBall" width="500" height="300"></canvas>
</section>

CSS

canvas{
    position:absolute;
    left:0px;
    top:0px;
    border:1px solid #000000
}

#breakoutCells{
    z-index: 1;
}

#breakoutPaddle{
    z-index: 2;
}

#breakoutCells{
    z-index: 3;
}

JavaScript

var Game = function(){
    this.gameStates = {
    NEW : 1,
    PLAY : 2,
    WIN : 3,
    LOSE: 4
    };
    this.gameState = this.gameStates.NEW;
};

Game.prototype.checkStatus = function(){
 //   console.log(this.ball.yCentre+this.ball.radius +"=="+this.ball.ctx.height)
 //  if(this.ball.yCentre+this.ball.radius >= this.ball.ctx.canvas.height)
 //      return this.gameStates.LOSE;
 //   else 
    console.log(this.level.bricks.length);
        if(this.level.bricks.length == 0){
        return this.gameStates.WIN;
    }else{
       return this.gameStates.PLAY;   
    }
}

Game.prototype.getLevel = function(n){
    var level =...