JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <canvas id="canvas" height="400" width="600" style="background: #333;"></canvas></body>
</html>

JavaScript

var game = {
    canvas: document.getElementById("canvas"),
    ctx: this.canvas.getContext("2d"),
    cellCount: 9,
    cellWidth: 30,
    lineCount: 5,
    mode: 7,
    actions: {},
    play: function(name, action, interval) {
        var me = this;
        this.actions[name] = setInterval(function() {
            action();
            me.draw();
        }, interval || 1);
    },
    stop: function(name) {
        clearInterval(this.actions[name]);
        this.draw();
    },
    colors: ["red", "#039518", "#ff00dc", "#ff6a00", "gray", "#0094ff", "#d2ce00"],
    start: function() {
        this.map.init();
        this.ready.init();
        this.draw();
        this.canvas.onclick = this.onclick;
    },
    over: function() {
        alert("GAME OVER");
    },
    draw: function() {
        this.ctx.clearRect(0, 0, 400, 600);
        this.ctx.save();
        this.map.draw();
        this.ready.draw();
        this.ctx.restore();
    },
    clicked: null,
    onclick: function(e) {
        console.log(e);

        var px = e.offsetX - game.map.startX;
        var py = e.offsetY - game.map.startY;
        if (px < 0 || py < 0 || px > game.map.width || py > game.map.height) {
            return;
        }
        var x = parseInt(px / game.cellWidth);
        var y = parseInt(py / game.cellWidth);

        var bubble = game.map.getBubble(x, y);
        if (bubble) {
            if (this.clicked) {
                //同一个泡不做反映
                if (this.clicked.x == x && this.clicked.y == y) {
                    return;
                }
                this.clicked.stop();
            }
            this.clicked = bubble;
            bubble.play();
        }
        else {
            if (this.clicked) {
                var bubble = this.clicked;
                this.clicked.stop();
                this.clicked = null;
                //移动clicked
            }
        }
        console.log("x:" + x + " y:" + y);
    },
    getRandom: function(max) {
        return...