js实现俄罗斯方块

目前的话有以下问题未解决

1，左右移动到达边界之后由于数组大小有限，超过边界之后并未处理出现异常

2，方块形状没有解决

3，未制作游戏开始以及失败判定

额应该还有其他问题目前就发现这么多，然后就是面向对象的思想问题

下面是源代码

js的

// 获取 canvas 元素和上下文
var canvas = document.getElementById('tetrisCanvas');
var ctx = canvas.getContext('2d');
// 绘制方块
var Diamonds = {
    // 设置方块的位置和大小
    x: 0,
    y: 0,
    width: 25,
    height: 25,
    // 画方块
    draw: function () {
        ctx.fillStyle = '#EED5B7'; // 设置方块颜色
        ctx.fillRect(this.x, this.y, this.width, this.height); // 画方块
        // 绘制方块的描边
        ctx.strokeStyle = '#000011'; // 设置描边颜色
        ctx.lineWidth = 2; // 设置描边宽度
        ctx.strokeRect(this.x, this.y, this.width, this.height); // 绘制方块的描边
    }
};
// 绘制面板
var panel = {
    gamePanelHeight:29,
    gamePanelWeight: 30,
    text: '下一个方块',
    draw: function () {
        for (let i = 0; i < this.gamePanelHeight; i++) {
            // 设置方块的位置和大小
            Diamonds.x = 0;
            Diamonds.y = i * 27;
            Diamonds.draw();
        }
        for (let i = 0; i < this.gamePanelHeight; i++) {
            // 设置方块的位置和大小
            Diamonds.x = 21 * 27;
            Diamonds.y = i * 27;
            Diamonds.draw();
        }
        for (let i = 0; i < this.gamePanelWeight; i++) {
            // 设置方块的位置和大小
            Diamonds.x = 30 * 27;
            Diamonds.y = i * 27;
            Diamonds.draw();
        }

        for (let i = 21; i < this.gamePanelWeight; i++) {
            // 设置方块的位置和大小
            Diamonds.x = i * 27;
            Diamonds.y = 7 * 27;
            Diamonds.draw();
        }
        for (let i = 0; i < this.gamePanelWeight; i++) {
            // 设置方块的位置和大小
            Diamonds.x = i * 27;
            Diamonds.y = 29 * 27;
            Diamonds.draw();
        }
        // 画文字
        // 设置字体样式
        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#EED5B7';
        // 写文字
        ctx.fillText('下一个方块!', 620, 44);
        // 画文字
        // 设置字体样式
        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#EED5B7';
        // 写文字
        ctx.fillText('-->  向右移动', 620, 400);// 画文字
        // 设置字体样式
        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#EED5B7';
        // 写文字
        ctx.fillText('<--  向左移动', 620, 500);// 画文字
        // 绘制箭杆
        ctx.beginPath();
        ctx.moveTo(640, 600); // 箭杆起点坐标
        ctx.lineTo(640, 630); // 箭杆终点坐标
        ctx.strokeStyle='#EED5B7';
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(640, 630); // 箭杆起点坐标
        ctx.lineTo(620, 615); // 箭杆终点坐标
        ctx.strokeStyle='#EED5B7';
        ctx.stroke();ctx.beginPath();
        ctx.moveTo(640, 630); // 箭杆起点坐标
        ctx.lineTo(660, 615); // 箭杆终点坐标
        ctx.strokeStyle='#EED5B7';
        ctx.stroke();
        // 设置字体样式
        ctx.font = '30px sans-serif';
        ctx.fillStyle = '#EED5B7';
        // 写文字
        ctx.fillText('向下移动', 680, 630);// 画文字
    }
};
// 绘制下落方块
var downDiamonds = {
    initX: (Math.floor(Math.random() * (19 - 1 + 1)) + 1) * 27,
    y: 0,
    draw: function () {
        // 清除之前的下落方块
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        panel.draw();
        // 如果下落方块已经到达底部，则重新初始化
        if (this.y >= canvas.height - Diamonds.height-(27+2)||array[this.initX/27][this.y/27+1]==1) {
            array[this.initX/27][this.y/27]=1;
            //消除方块
            // 检查是否有完整的一行
            for (let i = 0; i < array[0].length; i++) {
                let fullRow = true;
                for (let j = 0; j < array.length; j++) {
                    if (array[j][i] == 0) {
                        fullRow = false;
                        break;
                    }
                }
                // 如果当前行是完整的一行，清除该行，并将上方的方块往下移动一行
                if (fullRow) {
                    for (let k = i; k > 0; k--) {
                        for (let j = 0; j < array.length; j++) {
                            array[j][k] = array[j][k - 1];
                        }
                    }
                    // 清空第一行
                    for (let j = 0; j < array.length; j++) {
                        array[j][0] = 0;
                    }
                }
            }
            this.y = 0;
            this.initX = (Math.floor(Math.random() * (19 - 1 + 1)) + 1) * 27; // 重新随机生成初始位置
        } else {
            // 下落方块未到达底部，继续下落
            this.y += 27; // 增加下落速度，可以根据需要调整
        }
        // 绘制下落方块
        Diamonds.x = this.initX+27;
        Diamonds.y = this.y;
        Diamonds.draw();
        this.diamondsArea();
    },
    //积分区画面绘制
    diamondsArea:function (){
        for (let i = 0; i < array.length; i++) {
            // 获取当前行
            const row = array[i];
            for (let j = 0; j < row.length; j++) {
                // 获取当前列的值
                const value = row[j];
                if(value){
                    Diamonds.x=i*27+27;
                    Diamonds.y=j*27;
                    Diamonds.draw();
                }
            }
        }
    }
};
// 将键盘事件监听器添加到全局作用域
document.addEventListener('keydown', function(event) {
    // 检查按下的键是否为方向键
    switch(event.key) {
        case "ArrowLeft":
            // 处理左箭头键的操作
            downDiamonds.initX -= 27;
            downDiamonds.draw();
            break;
        case "ArrowRight":
            // 处理右箭头键的操作
            downDiamonds.initX += 27;
            downDiamonds.draw();
            break;
            case "ArrowDown":
            // 处理右箭头键的操作
            downDiamonds.y += 27;
            downDiamonds.draw();
            break;
        default:
            // 如果按下的不是方向键，不做处理
            return;
    }
});
function create2DArray(rows, cols) {
    const newArray = [];

    for (let i = 0; i < rows; i++) {
        // 创建一个空的子数组
        const row = new Array(cols);
        newArray.push(row);
    }

    return newArray;
};
var array=new create2DArray(20,19);
function frame() {
    panel.draw();
    downDiamonds.draw();
};
// 设置帧动画
var fps = 1; // 设置每秒帧数
var interval = 1000 / fps; // 计算每帧之间的间隔时间
setInterval(() => {
    frame();
}, interval);

html的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <style>
        #tetrisCanvas{display: block;margin:0px auto; border:1px solid rgb(9, 8, 8);background: black}
    </style>
</head>
<body>
<canvas id="tetrisCanvas" width="837" height="810"></canvas>
<script src="js/eluosi.js"></script>
</body>
</html>