JSFiddle - React, Tailwind, and code Playground

HTML

<div class="active">
        <!-- backround-->
        <div class="background">
            <div class="inside">
                <div class="canvasContainer">
                    <canvas id="extraFood" width="760px" height="460px">
                    </canvas>
                    <canvas id="snakeMoveCanvas" width="760px" height="460px">
                    </canvas>
                </div>
            </div>
            <div class="menu">
                
                    <button class="newGame">New Game</button>
                    <select id="level">
                        <option value="1">Easy</option>
                        <option value="2">Medium</option>
                        <option value="3">Hard</option>
                    </select>
                    <button class="help">Help</button>
               
            </div>
        </div>
        <!-- end-->
        <div class="inputContainer">
            <input type="button" value="PAUSE" id="pause" />
            <input type="button" value="RESTART" id="restart" />
            <span>
                <label>
                    Your Score is
                </label>
                <span id="score"></span></span>
        </div>
    </div>

CSS

.background
{
    position: relative;
    width: 762px;
    height: 463px;
    background: url(bg.png) no-repeat;
    overflow: hidden;
    top: 150px;
    left: 210px;
}
.inputContainer
{
    position: absolute;
    top: 0px;
    left: 0px;
}

.active
{
    position: relative;
    width: 100%;
}

#extraFood
{
    position: absolute;
    top: 0px;
    left: 0px;
}

.menu
{
    position: absolute;
    top: 151px;
    left: 327px;
    width: 250px;
    height: 200px;
}
.newGame,.help
{
    float: left;
    width: 80px;
    height: 40px;
    margin-right: 100px;
    margin-bottom: 10px;
}
#level
{
    width: 100px;
    height: 20px;
    margin-right: 105px;
    margin-bottom: 10px;
}

JavaScript

//  _Snake is the global object for Sanke class
var _Snake;

// Document ready to call snake constructor
$(function () {
    _Snake = new Snake();
});

// point class to hold x, y property 
function Point(x, y) {
    this.x = x;
    this.y = y;
}

// Snake class is main class for entire scoparts
function Snake() {
    _Snake = this;

    _Snake.initialization();
    _Snake.attachHandler();
    //    _Snake.loadScreen();
}

// function initializing a variable and objects
Snake.prototype.initialization = function () {

    _Snake.interVal = 0;  // It is setInterval object of snake moving
    _Snake.canvas = $("#snakeMoveCanvas");
    _Snake.context = _Snake.canvas[0].getContext("2d");   // canvas objects
    _Snake.extraFoodcanvas = $("#extraFood");
    _Snake.extraFoodcontext = _Snake.extraFoodcanvas[0].getContext("2d");   // canvas objects

    _Snake.SnakePoint = [new Point(1, 2), new Point(2, 2), new Point(3, 2), new Point(4, 2)];  // snake start position
    _Snake.direction = "right"; // default snake direction is right
    //    _Snake.speed = 60;          // snake speed
    _Snake.width = 10;          // single snake frame width and height
    _Snake.height = 10;
    _Snake.incrementValue = 1;   // snake position move length

    _Snake.catchBall = new Point(0, 0);  // food point

    _Snake.circleColor = "blue";         // food color
    _Snake.bodyColor = "red";
    _Snake.borderColor = "black";

    _Snake.leftEnd = 0;   // snake restriction place
    _Snake.rightEnd = _Snake.canvas.width() - 5;
    _Snake.bottomEnd = _Snake.canvas.height() - 5;

    _Snake.circleRadius = 5;   // snake position move length

    _Snake.score = 0;  // score value

    $("#score").text(_Snake.score);

    //   _Snake.catchBall = _Snake.generateBall(); // initial ball

    _Snake.boost = [];
    _Snake.deathCount = 0;

    _Snake.extraFoodArr = [];
    _Snake.scoreIncrementPerFood = 5;
    _Snake.bigFishRadius = 10;
    _Snake.bigFishColor = ["yellow", "red", "green",...