JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Пятнашки</h3>
<div id="contaner">
    <div id="message"></div>
    <canvas width="240" height="240" id="canvas"></canvas>
    <button id="button">Смешать</button>
</div>

CSS

#contaner{
   width:240px;
   height:240px;
   margin: 0 auto;
}
h3{
    text-align: center;
}
#canvas{
   // border: 2px solid;
    cursor:pointer;
}
button{
   width:100px;
   margin: 0 auto;
}
#message{
    width:220px;
    height:100px;
    padding:10px;
    border:1px solid black;
    margin-bottom: 10px;
}

JavaScript

// объект игры
function Game(canvasSelector, buttonSelector, messageSelector, borderDiceColor, diceColor, diceWidth, fontString, borderZeroColor, zeroDiceColor, textColor,  zeroText) {
    var dices = []; // Массив координат
    var zero;
    var canvas = document.querySelector(canvasSelector); // Канвас
    var context = canvas.getContext('2d'); // Контекст
    var button = document.querySelector(buttonSelector); // Кнопка смешивания
    var msg = document.querySelector(messageSelector);
    var canvasWidth = canvas.getAttribute('width');
    var diceRow = canvasWidth / diceWidth;
    var dicesCount = diceRow * diceRow;
    var lastValue;
    var start = false;
  //  var n = {name:'Вася'};
    context.font = fontString; //Шрифт
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    function drawDice(x, y, txtValue , borderDiceColor, diceColor) { //Построение плашки
        var textX;
        var textY;
        context.strokeStyle = borderDiceColor;
        context.strokeRect(x, y, diceWidth, diceWidth);
        context.fillStyle = diceColor;
        context.fillRect(x + 1, y + 1, diceWidth - 2, diceWidth - 2);
        context.fillStyle =  textColor;
        if (x == 0) {
            textX = (1 + diceWidth - diceWidth / 2);
        }
        else {
            textX = (x + diceWidth - diceWidth / 2);
        }
        if (y == 0) {
            textY = (1 + diceWidth - diceWidth / 2);
        }
        else {
            textY = (y + diceWidth - diceWidth / 2);
        }
        if(txtValue) {
            context.fillText(txtValue, textX, textY);
        }
       // dices[count] =  {x:x, y: y, value: txtValue};
    }
    function drawGame() {
        var x = -diceWidth;
        var y = 0;
        for (var i = 1; i < dicesCount + 1; i++) {
            x += diceWidth;
            if (x > (diceRow - 1) * diceWidth) {
                x = 0;
                y += diceWidth;
            }
         if(i < dicesCount) {
             drawDice(x, y, i,...