用cursor生成一个俄罗斯方块游戏

最新推荐文章于 2025-04-06 22:10:42 发布
天一生水water
最新推荐文章于 2025-04-06 22:10:42 发布
阅读量310
点赞数 1
文章标签：游戏 javascript 前端
本文链接：https://blog.youkuaiyun.com/Metal1/article/details/145174181
版权
cursor是一个智能编程框架
生成代码如下
<!DOCTYPE html>
<html>
<head>
    <title>俄罗斯方块</title>
    <style>
        #gameCanvas {
            border: 2px solid black;
        }
        .container {
            text-align: center;
            margin-top: 20px;
        }
        .score {
            font-size: 24px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="score">分数: <span id="score">0</span></div>
        <canvas id="gameCanvas" width="300" height="600"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        
        const BLOCK_SIZE = 30;
        const COLS = 10;
        const ROWS = 20;
        let score = 0;
        
        // 方块形状
        const SHAPES = [
            [[1, 1, 1, 1]],  // I
            [[1, 1], [1, 1]], // O
            [[1, 1, 1], [0, 1, 0]], // T
            [[1, 1, 1], [1, 0, 0]], // L
            [[1, 1, 1], [0, 0, 1]], // J
            [[1, 1, 0], [0, 1, 1]], // S
            [[0, 1, 1], [1, 1, 0]]  // Z
        ];
        
        // 颜色
        const COLORS = ['cyan', 'yellow', 'purple', 'orange', 'blue', 'green', 'red'];
        
        let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
        let currentPiece = null;
        let currentPieceX = 0;
        let currentPieceY = 0;
        let currentColor = '';
        
        function createPiece() {
            const shapeIndex = Math.floor(Math.random() * SHAPES.length);
            currentPiece = SHAPES[shapeIndex];
            currentColor = COLORS[shapeIndex];
            currentPieceX = Math.floor(COLS / 2) - Math.floor(currentPiece[0].length / 2);
            currentPieceY = 0;
        }
        
        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            ctx.strokeStyle = 'black';
            ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制已固定的方块
            for (let y = 0; y < ROWS; y++) {
                for (let x = 0; x < COLS; x++) {
                    if (board[y][x]) {
                        drawBlock(x, y, board[y][x]);
                    }
                }
            }
            
            // 绘制当前方块
            if (currentPiece) {
                for (let y = 0; y < currentPiece.length; y++) {
                    for (let x = 0; x < currentPiece[y].length; x++) {
                        if (currentPiece[y][x]) {
                            drawBlock(currentPieceX + x, currentPieceY + y, currentColor);
                        }
                    }
                }
            }
        }
        
        function collision() {
            for (let y = 0; y < currentPiece.length; y++) {
                for (let x = 0; x < currentPiece[y].length; x++) {
                    if (currentPiece[y][x]) {
                        const newX = currentPieceX + x;
                        const newY = currentPieceY + y;
                        
                        if (newX < 0 || newX >= COLS || newY >= ROWS) return true;
                        if (newY >= 0 && board[newY][newX]) return true;
                    }
                }
            }
            return false;
        }
        
        function mergePiece() {
            for (let y = 0; y < currentPiece.length; y++) {
                for (let x = 0; x < currentPiece[y].length; x++) {
                    if (currentPiece[y][x]) {
                        board[currentPieceY + y][currentPieceX + x] = currentColor;
                    }
                }
            }
        }
        
        function clearLines() {
            let linesCleared = 0;
            
            for (let y = ROWS - 1; y >= 0; y--) {
                if (board[y].every(cell => cell !== 0)) {
                    board.splice(y, 1);
                    board.unshift(Array(COLS).fill(0));
                    linesCleared++;
                    y++;
                }
            }
            
            if (linesCleared > 0) {
                score += linesCleared * 100;
                scoreElement.textContent = score;
            }
        }
        
        function gameOver() {
            alert('游戏结束！得分：' + score);
            board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
            score = 0;
            scoreElement.textContent = score;
        }
        
        function update() {
            currentPieceY++;
            
            if (collision()) {
                currentPieceY--;
                mergePiece();
                clearLines();
                
                if (currentPieceY <= 0) {
                    gameOver();
                }
                
                createPiece();
            }
        }
        
        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowLeft':
                    currentPieceX--;
                    if (collision()) currentPieceX++;
                    break;
                case 'ArrowRight':
                    currentPieceX++;
                    if (collision()) currentPieceX--;
                    break;
                case 'ArrowDown':
                    currentPieceY++;
                    if (collision()) currentPieceY--;
                    break;
                case 'ArrowUp':
                    const rotated = currentPiece[0].map((_, i) => 
                        currentPiece.map(row => row[i]).reverse()
                    );
                    const previousPiece = currentPiece;
                    currentPiece = rotated;
                    if (collision()) currentPiece = previousPiece;
                    break;
            }
            draw();
        });
        
        createPiece();
        setInterval(() => {
            update();
            draw();
        }, 500);
    </script>
</body>
</html>