Click here for free DL of the app version that can save data.

No:12561

114

←

Prev Next

→

一款关于俄罗斯方块的游戏
Developer User3760｜Date and time 23/8/19 22:40:33
Build time 18.888 sec｜Game capacity 5.504KB｜

Script

俄罗斯方块游戏

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>俄罗斯方块游戏</title>
    <style>
        * {
            box-sizing: border-box;
        }

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

#game-board {
            display: flex;
            flex-wrap: wrap;
            width: 250px;
            height: 500px;
        }

.cell {
            width: 25px;
            height: 25px;
            border: 1px solid #ccc;
        }

.tetromino {
            width: 25px;
            height: 25px;
            border: 1px solid #ccc;
            background-color: #f00;
        }
    </style>
</head>
<body>
<h1>俄罗斯方块游戏</h1>
<div id="game-board"></div>

// 游戏网格
    const grid = [];
    const gridWidth = 10;
    const gridHeight = 20;

// 当前俄罗斯方块的位置和形状
    let currentTetromino = {};
    let currentRotation = 0;

// 初始化游戏网格
    function initGrid() {
        for (let row = 0; row < gridHeight; row++) {
            grid[row] = [];
            for (let col = 0; col < gridWidth; col++) {
                grid[row][col] = 0;
            }
        }
    }

// 绘制游戏网格
    function drawGrid() {
        const gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';
        for (let row = 0; row < gridHeight; row++) {
            for (let col = 0; col < gridWidth; col++) {
                if (grid[row][col]) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    gameBoard.appendChild(cell);
                }
            }
        }
    }

// 随机选择一个俄罗斯方块出现
    function spawnTetromino() {
        const randomTetromino = tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
        currentTetromino = {
            shape: randomTetromino,
            x: Math.floor(gridWidth / 2) - Math.floor(randomTetromino[0].length / 2),
            y: 0
        };
    }

// 绘制当前俄罗斯方块
    function drawTetromino() {
        const gameBoard = document.getElementById('game-board');
        for (let row = 0; row < currentTetromino.shape.length; row++) {
            for (let col = 0; col < currentTetromino.shape[row].length; col++) {
                if (currentTetromino.shape[row][col]) {
                    const tetromino = document.createElement('div');
                    tetromino.className = 'tetromino';
                    tetromino.style.top = (currentTetromino.y + row) * 25 + 'px';
                    tetromino.style.left = (currentTetromino.x + col) * 25 + 'px';
                    gameBoard.appendChild(tetromino);
                }
            }
        }
    }

// 移动当前俄罗斯方块
    function moveTetromino(dx, dy) {
        if (isCollision(currentTetromino.shape, currentTetromino.x + dx, currentTetromino.y + dy)) {
            return;
        }

currentTetromino.x += dx;
        currentTetromino.y += dy;

updateGame();
    }

// 旋转当前俄罗斯方块
    function rotateTetromino() {
        const nextRotation = (currentRotation + 1) % currentTetromino.shape.length;
        const nextShape = currentTetromino.shape[nextRotation];
        if (isCollision(nextShape, currentTetromino.x, currentTetromino.y)) {
            return;
        }

currentRotation = nextRotation;
        currentTetromino.shape = nextShape;

updateGame();
    }

// 判断是否会碰撞
    function isCollision(shape, x, y) {
        for (let row = 0; row < shape.length; row++) {
            for (let col = 0; col < shape[row].length; col++) {
                if (shape[row][col] && (x + col < 0 || x + col >= gridWidth || y + row >= gridHeight || grid[y + row][x + col])) {
                    return true;
                }
            }
        }
        return false;
    }

// 更新游戏状态
    function updateGame() {
        drawGrid();
        drawTetromino();
    }

// 执行初始化操作
    function init() {
        initGrid();
        spawnTetromino();
        updateGame();

// 注册键盘事件监听器
        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowLeft':
                    moveTetromino(-1, 0);
                    break;
                case 'ArrowRight':
                    moveTetromino(1, 0);
                    break;
                case 'ArrowDown':
                    moveTetromino(0, 1);
                    break;
                case 'ArrowUp':
                    rotateTetromino();
                    break;
            }
        });

// 定时下落俄罗斯方块
        setInterval(function() {
            moveTetromino(0, 1);
        }, 1000);
    }

// 开始游戏
    init();
</script>
</body>
</html>