杨正一 (杨正一)

UID: 2865, 注册于 2024-9-26 20:43:20, 最后登录于 2025-12-13 12:39:10, 最后活动于 2025-12-13 12:59:47.

解决了 140 道题目，RP: 217.58 (No. 100)

♂ MOD

个人简介

图片：

https://xwjedu666.wordpress.com/%e6%89%be%e5%9b%be

https://xwjedu666.wordpress.com/找图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>俄罗斯方块（移动端适配）</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #111; font-family: Arial, sans-serif; padding: 10px; transition: background 0.3s; }
    body.light { background: #f5f5f5; }
    .game-container { display: flex; gap: 15px; align-items: flex-start; width: 100%; max-width: 500px; }
    #game-board { border: 2px solid #666; background: #222; transition: border 0.3s, background 0.3s; }
    body.light #game-board { border: 2px solid #ccc; background: #fff; }
    .right-panel { display: flex; flex-direction: column; gap: 15px; }
    .info { color: #fff; display: flex; flex-direction: column; gap: 10px; transition: color 0.3s; }
    body.light .info { color: #333; }
    #next-piece { width: 100px; height: 100px; border: 2px solid #666; background: #222; margin: 0 auto; transition: border 0.3s, background 0.3s; }
    body.light #next-piece { border: 2px solid #ccc; background: #fff; }
    .score-info { text-align: center; }
    .info h3 { font-size: 16px; }
    .info p { font-size: 14px; }
    .mobile-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 130px; margin: 0 auto; }
    .control-btn { height: 60px; font-size: 22px; background: #333; border: 1px solid #666; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; touch-action: manipulation; transition: all 0.3s; }
    body.light .control-btn { background: #eee; border: 1px solid #ccc; color: #333; }
    .start-pause-btn { background: #4CAF50; border-color: #66cc66; }
    body.light .start-pause-btn { background: #66cc66; border-color: #4CAF50; }
    .theme-btn { margin-top: 10px; padding: 8px 16px; border-radius: 6px; border: none; background: #444; color: #fff; cursor: pointer; transition: all 0.3s; }
    body.light .theme-btn { background: #ddd; color: #333; }
</style>
</head>
<body>
<h1 style="color: #fff; font-size: 24px; margin-bottom: 10px; transition: color 0.3s;">俄罗斯方块</h1>
<div class="game-container">
    <div>
        <canvas id="game-board" width="300" height="600"></canvas>
    </div>
    <div class="right-panel">
        <div class="info">
            <canvas id="next-piece" width="100" height="100"></canvas>
            <div class="score-info">
                <h3>分数: <span id="score">0</span></h3>
                <h3>等级: <span id="level">1</span></h3>
                <h3>行数: <span id="lines">0</span></h3>
            </div>
        </div>
        <div class="mobile-controls">
            <button class="control-btn" id="left-btn">←</button>
            <button class="control-btn" id="down-btn">↓</button>
            <button class="control-btn" id="right-btn">→</button>
            <button class="control-btn start-pause-btn" id="start-pause-btn">开始</button>
            <button class="control-btn" id="drop-btn">速落</button>
            <button class="control-btn" id="rotate-btn">旋转</button>
        </div>
    </div>
</div>
<button class="theme-btn" id="themeBtn">切换白色模式</button>
<script>
    const BOARD_WIDTH = 10;
    const BOARD_HEIGHT = 20;
    const BLOCK_SIZE = 30;
    let score = 0;
    let level = 1;
    let lines = 0;
    let gameInterval;
    let isPlaying = false;
    let isDark = true;
    let isGameOver = false; // 标记游戏是否结束
    const TETROMINOS = [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[0, 1, 0], [1, 1, 1]], // T
        [[0, 0, 1], [1, 1, 1]], // L
        [[1, 0, 0], [1, 1, 1]], // J
        [[0, 1, 1], [1, 1, 0]], // S
        [[1, 1, 0], [0, 1, 1]]  // Z
    ];
    const DARK_COLORS = ['#ff0000', '#ff8c00', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#a020f0'];
    const LIGHT_COLORS = ['#f5d0d0', '#f5e4d0', '#f2f5d0', '#d0f5d5', '#add1e9', '#d0d8f5', '#e1d0f5'];
    const boardCtx = document.getElementById('game-board').getContext('2d');
    const nextCtx = document.getElementById('next-piece').getContext('2d');
    let board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
    let currentPiece = null;
    let nextPiece = null;
    let piecePool = []; // 方块池，保证每种方块平等出现

    const themeBtn = document.getElementById('themeBtn');
    const h1 = document.querySelector('h1');
    themeBtn.addEventListener('click', () => {
        isDark = !isDark;
        document.body.classList.toggle('light', !isDark);
        h1.style.color = isDark ? '#fff' : '#333';
        themeBtn.textContent = isDark ? '切换白色模式' : '切换黑色模式';
        drawBoard(); // 切换主题后重绘
    });

    // 初始化方块池（7种方块各1个，打乱顺序）
    function initPiecePool() {
        piecePool = [0, 1, 2, 3, 4, 5, 6];
        // 洗牌算法打乱，保证随机且平等
        for (let i = piecePool.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [piecePool[i], piecePool[j]] = [piecePool[j], piecePool[i]];
        }
    }

    // 生成方块（从池子里取，池空则重新初始化）
    function createPiece() {
        if (piecePool.length === 0) initPiecePool();
        const type = piecePool.pop(); // 取出最后一个元素
        return {
            shape: TETROMINOS[type],
            type: type,
            x: Math.floor(BOARD_WIDTH / 2) - Math.floor(TETROMINOS[type][0].length / 2),
            y: 0
        };
    }

    // 绘制方块
    function drawBlock(x, y, type) {
        const color = isDark ? DARK_COLORS[type] : LIGHT_COLORS[type];
        boardCtx.fillStyle = color;
        boardCtx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
        const borderColor = isDark ? '#555' : '#ddd';
        const highlightColor = isDark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.1)';
        boardCtx.strokeStyle = borderColor;
        boardCtx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
        boardCtx.strokeStyle = highlightColor;
        boardCtx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, 1);
        boardCtx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, 1, BLOCK_SIZE - 1);
    }

    // 绘制下一个方块
    function drawNextPiece() {
        nextCtx.clearRect(0, 0, 100, 100);
        const piece = nextPiece;
        const offsetX = (100 - piece.shape[0].length * BLOCK_SIZE) / 2;
        const offsetY = (100 - piece.shape.length * BLOCK_SIZE) / 2;
        const borderColor = isDark ? '#555' : '#ddd';
        const color = isDark ? DARK_COLORS[piece.type] : LIGHT_COLORS[piece.type];
        piece.shape.forEach((row, y) => {
            row.forEach((cell, x) => {
                if (cell) {
                    nextCtx.fillStyle = color;
                    nextCtx.fillRect(offsetX + x * BLOCK_SIZE, offsetY + y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
                    nextCtx.strokeStyle = borderColor;
                    nextCtx.strokeRect(offsetX + x * BLOCK_SIZE, offsetY + y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
                }
            });
        });
    }

    // 绘制面板
    function drawBoard() {
        boardCtx.clearRect(0, 0, 300, 600);
        board.forEach((row, y) => {
            row.forEach((type, x) => {
                if (type !== 0) drawBlock(x, y, type - 1);
            });
        });
        if (currentPiece) {
            currentPiece.shape.forEach((row, y) => {
                row.forEach((cell, x) => {
                    if (cell) drawBlock(currentPiece.x + x, currentPiece.y + y, currentPiece.type);
                });
            });
        }
        drawNextPiece();
    }

    // 碰撞检测
    function checkCollision(piece, offsetX = 0, offsetY = 0) {
        return piece.shape.some((row, y) => {
            return row.some((cell, x) => {
                if (cell) {
                    const newX = piece.x + x + offsetX;
                    const newY = piece.y + y + offsetY;
                    return newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT || (newY >= 0 && board[newY][newX]);
                }
                return false;
            });
        });
    }

    // 旋转方块
    function rotatePiece() {
        const rotated = currentPiece.shape[0].map((_, i) => currentPiece.shape.map(row => row[i]).reverse());
        const tempPiece = { ...currentPiece, shape: rotated };
        if (!checkCollision(tempPiece)) currentPiece.shape = rotated;
        drawBoard();
    }

    // 固定方块
    function lockPiece() {
        currentPiece.shape.forEach((row, y) => {
            row.forEach((cell, x) => {
                if (cell) board[currentPiece.y + y][currentPiece.x + x] = currentPiece.type + 1;
            });
        });
        currentPiece = nextPiece;
        nextPiece = createPiece();
        clearLines();
        // 游戏结束判断
        if (checkCollision(currentPiece)) {
            clearInterval(gameInterval);
            isPlaying = false;
            isGameOver = true;
            document.getElementById('start-pause-btn').textContent = '重新开始';
            alert(`游戏结束！分数: ${score} 等级: ${level}`);
        }
    }

    // 消除行
    function clearLines() {
        let cleared = 0;
        board = board.filter(row => {
            if (row.every(cell => cell !== 0)) {
                cleared++;
                return false;
            }
            return true;
        });
        while (board.length < BOARD_HEIGHT) board.unshift(Array(BOARD_WIDTH).fill(0));
        if (cleared > 0) {
            lines += cleared;
            score += cleared * 100 * level;
            level = Math.floor(lines / 10) + 1;
            updateInfo();
            if (isPlaying) {
                clearInterval(gameInterval);
                gameInterval = setInterval(gameLoop, 1000 / level);
            }
        }
    }

    // 更新信息
    function updateInfo() {
        document.getElementById('score').textContent = score;
        document.getElementById('level').textContent = level;
        document.getElementById('lines').textContent = lines;
    }

    // 游戏循环
    function gameLoop() {
        if (!checkCollision(currentPiece, 0, 1)) {
            currentPiece.y++;
        } else {
            lockPiece();
        }
        drawBoard();
    }

    // 重置游戏（重新开始时调用）
    function resetGame() {
        score = 0;
        level = 1;
        lines = 0;
        board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
        initPiecePool(); // 重置方块池
        currentPiece = createPiece();
        nextPiece = createPiece();
        isGameOver = false;
        updateInfo();
        drawBoard();
    }

    // 键盘控制
    document.addEventListener('keydown', (e) => {
        if (!currentPiece || !isPlaying) return;
        switch (e.key) {
            case 'ArrowLeft':
                if (!checkCollision(currentPiece, -1)) currentPiece.x--;
                break;
            case 'ArrowRight':
                if (!checkCollision(currentPiece, 1)) currentPiece.x++;
                break;
            case 'ArrowDown':
                if (!checkCollision(currentPiece, 0, 1)) currentPiece.y++;
                break;
            case 'ArrowUp':
                rotatePiece();
                break;
            case ' ':
                while (!checkCollision(currentPiece, 0, 1)) currentPiece.y++;
                lockPiece();
                break;
        }
        drawBoard();
    });

    // 按钮控制
    document.getElementById('left-btn').addEventListener('click', () => {
        if (!currentPiece || !isPlaying) return;
        if (!checkCollision(currentPiece, -1)) currentPiece.x--;
        drawBoard();
    });
    document.getElementById('right-btn').addEventListener('click', () => {
        if (!currentPiece || !isPlaying) return;
        if (!checkCollision(currentPiece, 1)) currentPiece.x++;
        drawBoard();
    });
    document.getElementById('down-btn').addEventListener('click', () => {
        if (!currentPiece || !isPlaying) return;
        if (!checkCollision(currentPiece, 0, 1)) currentPiece.y++;
        drawBoard();
    });
    document.getElementById('rotate-btn').addEventListener('click', () => {
        if (!currentPiece || !isPlaying) return;
        rotatePiece();
    });
    document.getElementById('drop-btn').addEventListener('click', () => {
        if (!currentPiece || !isPlaying) return;
        while (!checkCollision(currentPiece, 0, 1)) currentPiece.y++;
        lockPiece();
    });

    // 开始/暂停/重新开始按钮逻辑
    document.getElementById('start-pause-btn').addEventListener('click', () => {
        const btn = document.getElementById('start-pause-btn');
        if (!isPlaying) {
            if (isGameOver) {
                // 游戏结束状态，点击重新开始
                resetGame();
            }
            // 开始/继续游戏，不重置进度
            gameInterval = setInterval(gameLoop, 1000 / level);
            isPlaying = true;
            btn.textContent = '暂停';
        } else {
            // 暂停游戏，保留进度
            clearInterval(gameInterval);
            isPlaying = false;
            btn.textContent = '继续';
        }
    });

    // 初始化面板
    resetGame();
</script>
</body>
</html>

通过的题目
B1001

B1002

B1055

B1064

B1066

B1069

B1073

B1075

B1077

B1085

B1088

B1090

B1094

B1095

B1096

B1097

B1101

B1103

B1104

B1106

B1107

B1108

B1110

B1111

B1112

B1113

B1114

B1115

B1118

B1121

B1124

B1126

B1127

B1133

B1138
B1145

B1146

B1149

B1150

B1155

B1416

B1417

CSPJ2020A

NOIPS2015A

P516

NOIPJ2016B

NOIPJ2015A

NOIPJ2015B

P538

W1034

W1049

W1041

W1071

W1069

hm6101

hm1901

hm1001

hm2701

hm2702

hm2801

hm2901

hm3001

hm3002

hm3101

hm3201

hm3501

P229

772

781

788
789

791

P200

P202

P210

P216

P217

P218

P220

P223

P239

P263

P297

P312

P340

P35

1100

P394

P407

P409

P426

P453

P52

P66

P77

1291

hm3310

1326

1336

hm4002

1442

1446

1471

1472

1473
1503

1549

1578

1596

1621

1622

1651

1654

1657

1659

1663

1670

1672

1674

1675

1676

1677

1678

1680

1682

1709

1713

1714

1813

1814

1815

1875

1876

1877

1878

1880

B2042
最近活动

一本通编程启蒙: 23
GESP二级: 9
GESP一级: 5
搜索: 4
枚举: 4
二维数组: 4
2015: 3
NOIP 普及组: 3
循环: 2
模拟算法: 2
for循环双重嵌套: 2
多重循环: 2
阶段测评: 2
GESP三级: 2
数位分离: 2
2016: 1
2020: 1
历届试题: 1
CSP-J: 1
NOIP 提高组: 1

杨正一 (杨正一)

个人简介

通过的题目

最近活动

题目标签

状态

开发

支持

杨正一 (杨正一)

个人简介

通过的题目

最近活动

题目标签

状态

开发

支持

还没有账户？

登录