DeepSeek vs Kimi vs Qwen —— AI 生成俄罗斯方块代码效果横评

作者:互联网

2026-03-21

⼤语⾔模型脚本

DeepSeek vs Kimi vs Qwen —— AI 生成俄罗斯方块代码效果横评


一、引言

  • 背景:国产大模型崛起,代码生成能力成为核心竞争力之一
  • 测试动机:以经典游戏「俄罗斯方块」为载体,直观对比三款模型的代码生成质量
  • 参测模型版本说明:DeepSeek(DeepSeek-R1 Thinking + Network Search)、Kimi(Kimi 2.5 Agent)、Qwen(Qwen3.5-Plus Thinking)

二、测试方法论

  • 统一 Prompt 设计

    • 使用相同的提示词
    • 示例 Prompt:用原生 HTML + CSS + JavaScript 实现一个完整的俄罗斯方块游戏,包含计分、加速、游戏结束逻辑

三、各模型生成结果对比

deepseek效果

kimi效果

qwen效果

对比维度deepseek.htmlkimi.htmlqwen.html
渲染方式Canvas 2DDOM + CSS GridCanvas 2D
代码架构函数式(IIFE闭包)面向对象(Class)函数式(全局变量)
视觉效果⭐⭐⭐⭐ 深海蓝主题,精美UI⭐⭐⭐⭐⭐ 霓虹发光效果,最华丽⭐⭐ 简洁朴素
幽灵方块(降落位置指示)
暂停功能
连续移动 支持长按连续移动 单次触发 单次触发
计分规则1/3/5/8百分制,不乘等级1/3/5/8百分制,乘以等级1/3/6/10十分制,乘以等级
软降加分 软降+1分 硬降+2×距离
升级机制每消2行升级每消10行升级每消10行升级
速度下限80ms100ms100ms
代码可维护性中(注释详细但耦合较高)高(Class封装清晰)低(全局变量,耦合高)
代码体积小(最精简)
性能较好(Canvas渲染)较差(大量DOM操作)好(Canvas渲染,代码轻量)

四、总结与推荐

  • 个人直观游戏体验来讲,kimi 2.5 agent生成的游戏玩起来是最舒服的,色彩华丽,功能完整、玩法丰富(包括落地指示,暂停游戏等),但是生成代码速度较慢,画面稍稍有些延迟,UI布局有些不对称
  • deepseek r1色彩比较丰富,玩法比较丰富,游玩体验非常流畅
  • qwen3.5-plus生成的代码行数最少,但只有最基本的玩法,色彩表现方面比较朴素,游戏运行非常流畅(仁者见仁,可能朴素的才是最好玩的)

我自己体验下来,感觉kimi生成的代码是最成熟的。个人认为是其agent模式起到了非常大的作用。kimi在代码生成期间,展示了其工作流程与步骤,显示出其首先进行了规划,制定了todo list,在代码生成前参考了许多设计文档,对代码进行了多次迭代。


五、附录

Deepseek代码


lang="zh">

    charset="UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    原生俄罗斯方块 · 经典加速计分版
    


class="game-container">
class="play-area"> id="gameCanvas" width="300" height="600">
class="info-panel">
class="next-piece">

▶ 下一个

id="nextCanvas" width="120" height="120">
class="score-box">
id="scoreDisplay">0
class="label">得分
class="level-box"> id="levelDisplay">0"label">级
class="status" id="gameStatus">
style="color:#89b9cd; font-size:0.75rem; margin-top:5px;"> ← → 移动  ; ↓ 软加速   ↑ 旋转
空格 硬到底

Kimi生成代码

html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块 - Tetristitle>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .game-container {
            display: flex;
            gap: 30px;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: center;
        }

        .game-board-wrapper {
            position: relative;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-template-rows: repeat(20, 30px);
            gap: 1px;
            background: #0a0a0a;
            border: 3px solid #4a4a6a;
            border-radius: 8px;
            padding: 5px;
            box-shadow: 0 0 30px rgba(0, 150, 255, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .cell {
            width: 30px;
            height: 30px;
            border-radius: 3px;
            transition: all 0.1s ease;
        }

        .cell.empty {
            background: #1a1a2a;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        }

        .cell.I { background: linear-gradient(145deg, #00f5ff, #00a8b5); box-shadow: 0 0 10px rgba(0, 245, 255, 0.5); }
        .cell.O { background: linear-gradient(145deg, #ffeb3b, #c9b600); box-shadow: 0 0 10px rgba(255, 235, 59, 0.5); }
        .cell.T { background: linear-gradient(145deg, #e040fb, #9c00d1); box-shadow: 0 0 10px rgba(224, 64, 251, 0.5); }
        .cell.S { background: linear-gradient(145deg, #76ff03, #4caf00); box-shadow: 0 0 10px rgba(118, 255, 3, 0.5); }
        .cell.Z { background: linear-gradient(145deg, #ff5252, #c00000); box-shadow: 0 0 10px rgba(255, 82, 82, 0.5); }
        .cell.J { background: linear-gradient(145deg, #448aff, #0057c9); box-shadow: 0 0 10px rgba(68, 138, 255, 0.5); }
        .cell.L { background: linear-gradient(145deg, #ff9100, #c56200); box-shadow: 0 0 10px rgba(255, 145, 0, 0.5); }
        .cell.ghost { 
            background: rgba(255, 255, 255, 0.1); 
            border: 1px dashed rgba(255, 255, 255, 0.3);
        }

        .side-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 200px;
        }

        .panel-box {
            background: rgba(26, 26, 46, 0.9);
            border: 2px solid #4a4a6a;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .panel-box h3 {
            color: #00f5ff;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 15px;
            text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
        }

        .score-value {
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .level-value, .lines-value {
            color: #ffeb3b;
            font-size: 24px;
            font-weight: bold;
        }

        .next-piece-board {
            display: grid;
            grid-template-columns: repeat(4, 25px);
            grid-template-rows: repeat(4, 25px);
            gap: 2px;
            justify-content: center;
            margin-top: 10px;
        }

        .next-cell {
            width: 25px;
            height: 25px;
            border-radius: 3px;
        }

        .next-cell.empty {
            background: transparent;
        }

        .controls-info {
            color: #aaa;
            font-size: 12px;
            line-height: 1.8;
        }

        .controls-info span {
            color: #00f5ff;
            font-weight: bold;
        }

        .btn {
            padding: 15px 30px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-start {
            background: linear-gradient(145deg, #00f5ff, #00a8b5);
            color: #1a1a2e;
            box-shadow: 0 5px 20px rgba(0, 245, 255, 0.4);
        }

        .btn-start:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 245, 255, 0.6);
        }

        .btn-pause {
            background: linear-gradient(145deg, #ff9100, #c56200);
            color: #fff;
            box-shadow: 0 5px 20px rgba(255, 145, 0, 0.4);
        }

        .btn-pause:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 145, 0, 0.6);
        }

        .game-over-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .game-over-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .game-over-text {
            color: #ff5252;
            font-size: 36px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 20px;
            text-shadow: 0 0 20px rgba(255, 82, 82, 0.8);
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .final-score {
            color: #fff;
            font-size: 20px;
            margin-bottom: 30px;
        }

        .final-score span {
            color: #00f5ff;
            font-size: 28px;
            font-weight: bold;
        }

        .title {
            text-align: center;
            margin-bottom: 30px;
        }

        .title h1 {
            color: #fff;
            font-size: 42px;
            text-transform: uppercase;
            letter-spacing: 5px;
            text-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
            background: linear-gradient(90deg, #00f5ff, #ffeb3b, #e040fb, #00f5ff);
            background-size: 300% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradient 3s linear infinite;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }

        .mobile-controls {
            display: none;
            gap: 10px;
            justify-content: center;
            margin-top: 20px;
        }

        .mobile-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            background: rgba(0, 245, 255, 0.2);
            color: #00f5ff;
            font-size: 24px;
            cursor: pointer;
            border: 2px solid #00f5ff;
            transition: all 0.2s ease;
        }

        .mobile-btn:active {
            background: rgba(0, 245, 255, 0.5);
            transform: scale(0.95);
        }

        @media (max-width: 600px) {
            .game-board {
                grid-template-columns: repeat(10, 25px);
                grid-template-rows: repeat(20, 25px);
            }
            .cell {
                width: 25px;
                height: 25px;
            }
            .side-panel {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
            .mobile-controls {
                display: flex;
            }
        }
    style>
<base target="_blank">
head>
<body>
    <div class="wrapper">
        <div class="title">
            <h1>俄罗斯方块h1>
        div>
        <div class="game-container">
            <div class="game-board-wrapper">
                <div class="game-board" id="gameBoard">div>
                <div class="game-over-overlay" id="gameOverOverlay">
                    <div class="game-over-text">游戏结束div>
                    <div class="final-score">最终得分: <span id="finalScore">0span>div>
                    <button class="btn btn-start" onclick="game.restart()">重新开始button>
                div>
            div>
            <div class="side-panel">
                <div class="panel-box">
                    <h3>得分h3>
                    <div class="score-value" id="score">0div>
                div>
                <div class="panel-box">
                    <h3>等级h3>
                    <div class="level-value" id="level">1div>
                div>
                <div class="panel-box">
                    <h3>消除行数h3>
                    <div class="lines-value" id="lines">0div>
                div>
                <div class="panel-box">
                    <h3>下一个h3>
                    <div class="next-piece-board" id="nextPiece">div>
                div>
                <div class="panel-box">
                    <h3>操作说明h3>
                    <div class="controls-info">
                        <span>span> 左移<br>
                        <span>span> 右移<br>
                        <span>span> 加速下落<br>
                        <span>span> 旋转<br>
                        <span>空格span> 直接落地
                    div>
                div>
                <button class="btn btn-start" id="startBtn" onclick="game.start()">开始游戏button>
                <button class="btn btn-pause" id="pauseBtn" onclick="game.togglePause()" style="display: none;">暂停button>
            div>
        div>
        <div class="mobile-controls">
            <button class="mobile-btn" onclick="game.moveLeft()">button>
            <button class="mobile-btn" onclick="game.rotate()">button>
            <button class="mobile-btn" onclick="game.moveRight()">button>
            <button class="mobile-btn" onclick="game.softDrop()">button>
            <button class="mobile-btn" onclick="game.hardDrop()">button>
        div>
    div>

    <script>
        // 俄罗斯方块游戏类
        class TetrisGame {
            constructor() {
                // 游戏配置
                this.cols = 10;
                this.rows = 20;
                this.board = [];
                this.score = 0;
                this.level = 1;
                this.lines = 0;
                this.isGameOver = false;
                this.isPlaying = false;
                this.isPaused = false;
                this.dropInterval = 1000;
                this.lastDropTime = 0;
                this.animationId = null;

                // 方块形状定义
                this.pieces = {
                    I: {
                        shape: [
                            [0, 0, 0, 0],
                            [1, 1, 1, 1],
                            [0, 0, 0, 0],
                            [0, 0, 0, 0]
                        ],
                        color: 'I'
                    },
                    O: {
                        shape: [
                            [1, 1],
                            [1, 1]
                        ],
                        color: 'O'
                    },
                    T: {
                        shape: [
                            [0, 1, 0],
                            [1, 1, 1],
                            [0, 0, 0]
                        ],
                        color: 'T'
                    },
                    S: {
                        shape: [
                            [0, 1, 1],
                            [1, 1, 0],
                            [0, 0, 0]
                        ],
                        color: 'S'
                    },
                    Z: {
                        shape: [
                            [1, 1, 0],
                            [0, 1, 1],
                            [0, 0, 0]
                        ],
                        color: 'Z'
                    },
                    J: {
                        shape: [
                            [1, 0, 0],
                            [1, 1, 1],
                            [0, 0, 0]
                        ],
                        color: 'J'
                    },
                    L: {
                        shape: [
                            [0, 0, 1],
                            [1, 1, 1],
                            [0, 0, 0]
                        ],
                        color: 'L'
                    }
                };

                this.pieceTypes = Object.keys(this.pieces);
                this.currentPiece = null;
                this.nextPiece = null;
                this.ghostPiece = null;

                // 初始化
                this.initBoard();
                this.renderBoard();
                this.bindEvents();
            }

            // 初始化游戏板
            initBoard() {
                this.board = Array(this.rows).fill(null).map(() => 
                    Array(this.cols).fill(0)
                );
            }

            // 渲染游戏板
            renderBoard() {
                const boardEl = document.getElementById('gameBoard');
                boardEl.innerHTML = '';

                for (let row = 0; row < this.rows; row++) {
                    for (let col = 0; col < this.cols; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell empty';
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        boardEl.appendChild(cell);
                    }
                }
            }

            // 更新显示
            updateDisplay() {
                const cells = document.querySelectorAll('.game-board .cell');

                // 清空所有单元格
                cells.forEach(cell => {
                    cell.className = 'cell empty';
                });

                // 绘制已固定的方块
                for (let row = 0; row < this.rows; row++) {
                    for (let col = 0; col < this.cols; col++) {
                        if (this.board[row][col]) {
                            const index = row * this.cols + col;
                            cells[index].className = `cell ${this.board[row][col]}`;
                        }
                    }
                }

                // 绘制幽灵方块
                if (this.ghostPiece && this.isPlaying && !this.isPaused) {
                    this.ghostPiece.shape.forEach((row, y) => {
                        row.forEach((cell, x) => {
                            if (cell) {
                                const boardX = this.ghostPiece.x + x;
                                const boardY = this.ghostPiece.y + y;
                                if (boardY >= 0 && boardY < this.rows && boardX >= 0 && boardX < this.cols) {
                                    const index = boardY * this.cols + boardX;
                                    if (this.board[boardY][boardX] === 0) {
                                        cells[index].className = 'cell ghost';
                                    }
                                }
                            }
                        });
                    });
                }

                // 绘制当前方块
                if (this.currentPiece && this.isPlaying && !this.isPaused) {
                    this.currentPiece.shape.forEach((row, y) => {
                        row.forEach((cell, x) => {
                            if (cell) {
                                const boardX = this.currentPiece.x + x;
                                const boardY = this.currentPiece.y + y;
                                if (boardY >= 0 && boardY < this.rows && boardX >= 0 && boardX < this.cols) {
                                    const index = boardY * this.cols + boardX;
                                    cells[index].className = `cell ${this.currentPiece.color}`;
                                }
                            }
                        });
                    });
                }

                // 更新分数显示
                document.getElementById('score').textContent = this.score;
                document.getElementById('level').textContent = this.level;
                document.getElementById('lines').textContent = this.lines;
            }

            // 渲染下一个方块
            renderNextPiece() {
                const nextEl = document.getElementById('nextPiece');
                nextEl.innerHTML = '';

                if (!this.nextPiece) return;

                const shape = this.nextPiece.shape;
                const offsetX = Math.floor((4 - shape[0].length) / 2);
                const offsetY = Math.floor((4 - shape.length) / 2);

                for (let row = 0; row < 4; row++) {
                    for (let col = 0; col < 4; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'next-cell empty';

                        const shapeRow = row - offsetY;
                        const shapeCol = col - offsetX;

                        if (shapeRow >= 0 && shapeRow < shape.length && 
                            shapeCol >= 0 && shapeCol < shape[0].length &&
                            shape[shapeRow][shapeCol]) {
                            cell.className = `next-cell ${this.nextPiece.color}`;
                        }

                        nextEl.appendChild(cell);
                    }
                }
            }

            // 生成随机方块
            randomPiece() {
                const type = this.pieceTypes[Math.floor(Math.random() * this.pieceTypes.length)];
                const pieceData = this.pieces[type];
                return {
                    shape: pieceData.shape.map(row => [...row]),
                    color: pieceData.color,
                    x: Math.floor((this.cols - pieceData.shape[0].length) / 2),
                    y: 0
                };
            }

            // 生成新方块
            spawnPiece() {
                if (this.nextPiece) {
                    this.currentPiece = this.nextPiece;
                } else {
                    this.currentPiece = this.randomPiece();
                }
                this.nextPiece = this.randomPiece();
                this.renderNextPiece();
                this.updateGhostPiece();

                // 检查游戏结束
                if (!this.isValidPosition(this.currentPiece, this.currentPiece.x, this.currentPiece.y)) {
                    this.gameOver();
                }
            }

            // 更新幽灵方块位置
            updateGhostPiece() {
                if (!this.currentPiece) return;

                this.ghostPiece = {
                    shape: this.currentPiece.shape,
                    x: this.currentPiece.x,
                    y: this.currentPiece.y,
                    color: 'ghost'
                };

                // 将幽灵方块下落到底
                while (this.isValidPosition(this.ghostPiece, this.ghostPiece.x, this.ghostPiece.y + 1)) {
                    this.ghostPiece.y++;
                }
            }

            // 检查位置是否有效
            isValidPosition(piece, x, y) {
                for (let row = 0; row < piece.shape.length; row++) {
                    for (let col = 0; col < piece.shape[row].length; col++) {
                        if (piece.shape[row][col]) {
                            const newX = x + col;
                            const newY = y + row;

                            if (newX < 0 || newX >= this.cols || newY >= this.rows) {
                                return false;
                            }

                            if (newY >= 0 && this.board[newY][newX]) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

            // 旋转方块
            rotate() {
                if (!this.isPlaying || this.isPaused || !this.currentPiece) return;

                if (this.currentPiece.color === 'O') return; // O方块不需要旋转

                const rotated = this.currentPiece.shape[0].map((_, i) =>
                    this.currentPiece.shape.map(row => row[i]).reverse()
                );

                const oldShape = this.currentPiece.shape;
                this.currentPiece.shape = rotated;

                // 如果旋转后位置无效,尝试左右移动
                let offset = 0;
                while (!this.isValidPosition(this.currentPiece, this.currentPiece.x, this.currentPiece.y)) {
                    offset = offset > 0 ? -offset : -offset + 1;
                    this.currentPiece.x += offset;
                    if (Math.abs(offset) > 2) {
                        this.currentPiece.shape = oldShape;
                        this.currentPiece.x -= offset;
                        return;
                    }
                }

                this.updateGhostPiece();
                this.updateDisplay();
            }

            // 移动方块
            moveLeft() {
                if (!this.isPlaying || this.isPaused || !this.currentPiece) return;
                if (this.isValidPosition(this.currentPiece, this.currentPiece.x - 1, this.currentPiece.y)) {
                    this.currentPiece.x--;
                    this.updateGhostPiece();
                    this.updateDisplay();
                }
            }

            moveRight() {
                if (!this.isPlaying || this.isPaused || !this.currentPiece) return;
                if (this.isValidPosition(this.currentPiece, this.currentPiece.x + 1, this.currentPiece.y)) {
                    this.currentPiece.x++;
                    this.updateGhostPiece();
                    this.updateDisplay();
                }
            }

            // 软降落(加速)
            softDrop() {
                if (!this.isPlaying || this.isPaused || !this.currentPiece) return;
                if (this.isValidPosition(this.currentPiece, this.currentPiece.x, this.currentPiece.y + 1)) {
                    this.currentPiece.y++;
                    this.score += 1;
                    this.updateDisplay();
                } else {
                    this.lockPiece();
                }
            }

            // 硬降落(直接落地)
            hardDrop() {
                if (!this.isPlaying || this.isPaused || !this.currentPiece) return;

                let dropDistance = 0;
                while (this.isValidPosition(this.currentPiece, this.currentPiece.x, this.currentPiece.y + 1)) {
                    this.currentPiece.y++;
                    dropDistance++;
                }

                this.score += dropDistance * 2;
                this.lockPiece();
            }

            // 自动下落
            autoDrop() {
                if (!this.isPlaying || this.isPaused || !this.currentPiece) return;

                if (this.isValidPosition(this.currentPiece, this.currentPiece.x, this.currentPiece.y + 1)) {
                    this.currentPiece.y++;
                    this.updateDisplay();
                } else {
                    this.lockPiece();
                }
            }

            // 固定方块
            lockPiece() {
                if (!this.currentPiece) return;

                this.currentPiece.shape.forEach((row, y) => {
                    row.forEach((cell, x) => {
                        if (cell) {
                            const boardY = this.currentPiece.y + y;
                            const boardX = this.currentPiece.x + x;
                            if (boardY >= 0) {
                                this.board[boardY][boardX] = this.currentPiece.color;
                            }
                        }
                    });
                });

                this.clearLines();
                this.spawnPiece();
                this.updateDisplay();
            }

            // 消除完整行
            clearLines() {
                let linesCleared = 0;

                for (let row = this.rows - 1; row >= 0; row--) {
                    if (this.board[row].every(cell => cell !== 0)) {
                        this.board.splice(row, 1);
                        this.board.unshift(Array(this.cols).fill(0));
                        linesCleared++;
                        row++;
                    }
                }

                if (linesCleared > 0) {
                    this.lines += linesCleared;

                    // 计分系统
                    const points = [0, 100, 300, 500, 800];
                    this.score += points[linesCleared] * this.level;

                    // 等级提升
                    const newLevel = Math.floor(this.lines / 10) + 1;
                    if (newLevel > this.level) {
                        this.level = newLevel;
                        this.dropInterval = Math.max(100, 1000 - (this.level - 1) * 100);
                    }
                }
            }

            // 游戏循环
            gameLoop(timestamp) {
                if (!this.isPlaying) return;

                if (!this.isPaused) {
                    if (timestamp - this.lastDropTime > this.dropInterval) {
                        this.autoDrop();
                        this.lastDropTime = timestamp;
                    }
                }

                this.animationId = requestAnimationFrame((ts) => this.gameLoop(ts));
            }

            // 开始游戏
            start() {
                if (this.isPlaying) return;

                this.reset();
                this.isPlaying = true;
                this.isGameOver = false;
                this.spawnPiece();

                document.getElementById('startBtn').style.display = 'none';
                document.getElementById('pauseBtn').style.display = 'block';
                document.getElementById('gameOverOverlay').classList.remove('active');

                this.lastDropTime = performance.now();
                this.gameLoop(performance.now());
            }

            // 重置游戏
            reset() {
                this.initBoard();
                this.score = 0;
                this.level = 1;
                this.lines = 0;
                this.dropInterval = 1000;
                this.currentPiece = null;
                this.nextPiece = null;
                this.isGameOver = false;
                this.isPaused = false;

                if (this.animationId) {
                    cancelAnimationFrame(this.animationId);
                }

                this.updateDisplay();
            }

            // 重新开始
            restart() {
                this.reset();
                this.start();
            }

            // 暂停/继续
            togglePause() {
                if (!this.isPlaying || this.isGameOver) return;

                this.isPaused = !this.isPaused;
                document.getElementById('pauseBtn').textContent = this.isPaused ? '继续' : '暂停';

                if (!this.isPaused) {
                    this.lastDropTime = performance.now();
                }

                this.updateDisplay();
            }

            // 游戏结束
            gameOver() {
                this.isGameOver = true;
                this.isPlaying = false;

                if (this.animationId) {
                    cancelAnimationFrame(this.animationId);
                }

                document.getElementById('finalScore').textContent = this.score;
                document.getElementById('gameOverOverlay').classList.add('active');
                document.getElementById('pauseBtn').style.display = 'none';
            }

            // 绑定键盘事件
            bindEvents() {
                document.addEventListener('keydown', (e) => {
                    if (!this.isPlaying) {
                        if (e.code === 'Space' && !this.isGameOver) {
                            e.preventDefault();
                            this.start();
                        }
                        return;
                    }

                    if (this.isPaused && e.code !== 'Escape') return;

                    switch(e.code) {
                        case 'ArrowLeft':
                            e.preventDefault();
                            this.moveLeft();
                            break;
                        case 'ArrowRight':
                            e.preventDefault();
                            this.moveRight();
                            break;
                        case 'ArrowDown':
                            e.preventDefault();
                            this.softDrop();
                            break;
                        case 'ArrowUp':
                            e.preventDefault();
                            this.rotate();
                            break;
                        case 'Space':
                            e.preventDefault();
                            this.hardDrop();
                            break;
                        case 'Escape':
                            e.preventDefault();
                            this.togglePause();
                            break;
                    }
                });
            }
        }

        // 创建游戏实例
        const game = new TetrisGame();
    script>
body>
html>

qwen生成代码


lang="zh-CN">

    charset="UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    原生 JS 俄罗斯方块
    



    
class="game-container"> id="tetris" width="240" height="400">
class="ui-panel">
class="stat-box">
class="stat-label">分数 (Score)
class="stat-value" id="score">0
class="stat-box">
class="stat-label">等级 (Level)
class="stat-value" id="level">1
class="controls-info">

← → : 移动

↑ : 旋转

↓ : 加速下落

id="game-over-modal">

GAME OVER

最终得分:id="final-score">0

相关标签:

DeepSeek