HTML+CSS+JS俄罗斯方块小游戏

最新推荐文章于 2024-08-19 17:16:10 发布

睿智的海鸥

最新推荐文章于 2024-08-19 17:16:10 发布

阅读量494

点赞数 14

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140561059

版权

源码在效果图后面五个按钮控制

效果图

源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
        }
        canvas {
            border: 2px solid #333;
            border-radius: 10px;
            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
            background-color: #fff;
        }
        #controls {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        button {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <canvas id="board" width="300" height="600"></canvas>
    <div id="controls">
        <button id="left">左</button>
        <button id="right">右</button>
        <button id="down">下</button>
        <button id="rotate">旋转</button>
        <button id="start">开始</button>
    </div>

    <script>
        const canvas = document.getElementById('board');
        const ctx = canvas.getContext('2d');
        const cols = 10;
        const rows = 20;
        const blockSize = 30;

        const colors = [
            null,
            'cyan',
            'blue',
            'orange',
            'yellow',
            'green',
            'purple',
            'red',
        ];

        const pieces = [
            [[1, 1, 1, 1]], // I
            [[1, 1, 1], [0, 1, 0]], // T
            [[1, 1, 0], [0, 1, 1]], // Z
            [[0, 1, 1], [1, 1, 0]], // S
            [[1, 1], [1, 1]], // O
            [[1, 1, 1], [1, 0, 0]], // L
            [[1, 1, 1], [0, 0, 1]], // J
        ];

        let board = Array.from({ length: rows }, () => Array(cols).fill(0));
        let currentPiece;
        let currentPosition;
        let dropInterval;
        let gameOver = false;

        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let r = 0; r < rows; r++) {
                for (let c = 0; c < cols; c++) {
                    if (board[r][c]) {
                        ctx.fillStyle = colors[board[r][c]];
                        ctx.fillRect(c * blockSize, r * blockSize, blockSize, blockSize);
                        ctx.strokeStyle = '#333';
                        ctx.strokeRect(c * blockSize, r * blockSize, blockSize, blockSize);
                    }
                }
            }
            drawPiece();
        }

        function drawPiece() {
            ctx.fillStyle = colors[currentPiece.color];
            currentPiece.shape.forEach((row, r) => {
                row.forEach((value, c) => {
                    if (value) {
                        ctx.fillRect((currentPosition.x + c) * blockSize, (currentPosition.y + r) * blockSize, blockSize, blockSize);
                        ctx.strokeRect((currentPosition.x + c) * blockSize, (currentPosition.y + r) * blockSize, blockSize, blockSize);
                    }
                });
            });
        }

        function rotate(piece) {
            return piece[0].map((_, index) => piece.map(row => row[index])).reverse();
        }

        function collision(offsetX = 0, offsetY = 0, piece = currentPiece) {
            return piece.shape.some((row, r) => {
                return row.some((value, c) => {
                    if (value) {
                        const newX = currentPosition.x + c + offsetX;
                        const newY = currentPosition.y + r + offsetY;
                        return (
                            newX < 0 ||
                            newX >= cols ||
                            newY >= rows ||
                            (newY >= 0 && board[newY][newX] !== 0)
                        );
                    }
                    return false;
                });
            });
        }

        function merge() {
            currentPiece.shape.forEach((row, r) => {
                row.forEach((value, c) => {
                    if (value) {
                        board[currentPosition.y + r][currentPosition.x + c] = currentPiece.color;
                    }
                });
            });

            clearRows();
        }

        function clearRows() {
            for (let r = rows - 1; r >= 0; r--) {
                if (board[r].every(cell => cell !== 0)) {
                    board.splice(r, 1);
                    board.unshift(Array(cols).fill(0));
                }
            }
        }

        function spawnPiece() {
            const index = Math.floor(Math.random() * pieces.length);
            currentPiece = {
                shape: pieces[index],
                color: index + 1,
            };
            currentPosition = { x: Math.floor(cols / 2) - 1, y: 0 };
            if (collision(0, 0)) {
                gameOver = true;
            }
        }

        function drop() {
            if (!gameOver) {
                if (!collision(0, 1)) {
                    currentPosition.y++;
                } else {
                    merge();
                    spawnPiece();
                }
                drawBoard();
            } else {
                clearInterval(dropInterval);
                alert('游戏结束！');
            }
        }

        function startGame() {
            board = Array.from({ length: rows }, () => Array(cols).fill(0));
            currentPiece = null;
            currentPosition = null;
            gameOver = false;
            spawnPiece();
            drawBoard();
            dropInterval = setInterval(drop, 1000);
        }

        document.getElementById('left').addEventListener('click', () => {
            if (!collision(-1, 0)) currentPosition.x--;
            drawBoard();
        });

        document.getElementById('right').addEventListener('click', () => {
            if (!collision(1, 0)) currentPosition.x++;
            drawBoard();
        });

        document.getElementById('down').addEventListener('click', () => {
            drop();
        });

        document.getElementById('rotate').addEventListener('click', () => {
            const rotated = rotate(currentPiece.shape);
            if (!collision(0, 0, { shape: rotated, color: currentPiece.color })) {
                currentPiece.shape = rotated;
            }
            drawBoard();
        });

        document.getElementById('start').addEventListener('click', startGame);

        drawBoard();
    </script>
</body>
</html>