Add Tetris to Mapbox GL JS

maps.js

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
let center = [-74.5, 40]
const map = new mapboxgl.Map({
    container: 'map',
    center: [-74.426, 40.1792],
    zoom: 9,
    pitch: 50,
    keyboard: false,
    preserveDrawingBuffer: true,
});

var COLS = 10, ROWS = 20;

let scale = 0.01
let cubePoints = []
let maxAltitude = 20000
let wallThickness = 0.3

map.on('click', function (e) {
    playButtonClicked()
})

map.addControl(new mapboxgl.AttributionControl({
    compact: true,
    customAttribution: '<a href="https://twitter.com/dkwiens" target="_blank">Twitter</a> | <a href="https://github.com/dionyziz/canvas-tetris" target="_blank">Tetris Code</a>'
}));

map.on('load', function () {
    map.addSource('board', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: [{
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [
                        [
                            xyToLatLng(-wallThickness, 0, 0),
                            xyToLatLng(-wallThickness, 1, 0),
                            xyToLatLng(COLS + wallThickness, 1, 0),
                            xyToLatLng(COLS + wallThickness, 0, 0),
                            xyToLatLng(-wallThickness, 0, 0)
                        ]
                    ]
                },
                properties: {
                    color: 'black',
                    height: maxAltitude,
                    base: maxAltitude - 100,
                }
            }, {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [
                        [
                            xyToLatLng(-wallThickness, 0, 0),
                            xyToLatLng(-wallThickness, 1, 0),
                            xyToLatLng(COLS + wallThickness, 1, 0),
                            xyToLatLng(COLS + wallThickness, 0, 0),
                            xyToLatLng(-wallThickness, 0, 0)
                        ]
                    ]
                },
                properties: {
                    color: 'black',
                    height: 100,
                    base: 0,
                }
            }, {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [
                        [
                            xyToLatLng(0, 0, 0),
                            xyToLatLng(0, 1, 0),
                            xyToLatLng(-wallThickness, 1, 0),
                            xyToLatLng(-wallThickness, 0, 0),
                            xyToLatLng(0, 0, 0)
                        ],
                        [
                            xyToLatLng(COLS, 0, 0),
                            xyToLatLng(COLS, 1, 0),
                            xyToLatLng(COLS + wallThickness, 1, 0),
                            xyToLatLng(COLS + wallThickness, 0, 0),
                            xyToLatLng(COLS, 0, 0)
                        ]
                    ]
                },
                properties: {
                    color: 'black',
                    height: maxAltitude,
                    base: 0,
                }
            }]
        }
    })
    map.addLayer({
        id: 'board',
        type: 'fill-extrusion',
        source: 'board',
        paint: {
            'fill-extrusion-color': ['get', 'color'],
            'fill-extrusion-opacity': 0.95,
            'fill-extrusion-base': ['get', 'base'],
            'fill-extrusion-height': ['get', 'height']
        }
    })

    map.addSource('cubes', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: []
        }
    })
    map.addLayer({
        id: 'cubes',
        type: 'fill-extrusion',
        source: 'cubes',
        paint: {
            'fill-extrusion-color': ['get', 'color'],
            'fill-extrusion-opacity': 0.8,
            'fill-extrusion-base': ['get', 'base'],
            'fill-extrusion-height': ['get', 'height']
        }
    })
})

function zToAltitude(z) {
    return new mapboxgl.MercatorCoordinate(0, 0, z * scale).toAltitude()
}

function xyToLatLng(x, y, z) {
    const altitude = zToAltitude(z)
    return mapboxgl.MercatorCoordinate.fromLngLat([(center[0] + x * scale), center[1] + y * scale], altitude).toLngLat().toArray();
}

function pointToCube(x, y, color) {
    return feature = {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    xyToLatLng(x, 0, y),
                    xyToLatLng(x, 1, y),
                    xyToLatLng(x + 1, 1, y),
                    xyToLatLng(x + 1, 0, y),
                    xyToLatLng(x, 0, y)
                ]
            ]
        },
        properties: {
            color: color,
            height: maxAltitude - (maxAltitude / ROWS * y),
            base: maxAltitude - ((maxAltitude / ROWS * y) + maxAltitude / ROWS),
        }
    }
}

function drawCube(x, y, color) {
    let feature = pointToCube(x, y, color)
    let data = map.getSource('cubes')._data
    data.features.push(feature)
    map.getSource('cubes').setData(data)
}

function clearCubes() {
    map.getSource('cubes').setData({
        type: 'FeatureCollection',
        features: []
    })
}