AI game creator

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

No:39658

←

Prev Next

→

テトリスぎゃ
Developer User17762｜Date and time 24/1/29 18:52:31
Build time 46.48 sec｜Game capacity 9.198KB｜

Script

了解です。では、以下にテトリスのゲームを実装したHTMLファイルを示します。

このコードは、HTMLとJavaScriptを使ってブラウザで動作するテトリスゲームを実装しています。制御はスマートフォンの場合、キーボードの代わりに画面タップやスワイプなどのイベントに変更する必要がありますが、基本的なテトリスのゲームプレイを提供します。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。では、以下にテトリスのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
        }

canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="480"></canvas>

// 游戏板
            const playField = createPlayField(12, 20);

// 方块
            const tetrominos = createTetrominos();
            const tetrominoColors = ['purple', 'cyan', 'yellow', 'green', 'red'];
            let score = 0;

// 初始化
            let currentTetromino = getRandomTetromino();
            let currentPosition = { x: 0, y: 0 };

// 游戏循环
            function gameLoop() {
                context.clearRect(0, 0, canvas.width, canvas.height);

draw();

if (checkCollision()) {
                    mergeTetromino();
                    clearLines();
                    currentTetromino = getRandomTetromino();
                    currentPosition = { x: 0, y: 0 };

if (checkCollision()) {
                        playField.forEach(row => row.fill(0));
                        score = 0;
                    }
                } else {
                    currentPosition.y++;
                }

score += dropLines();

requestAnimationFrame(gameLoop);
            }

// 方块生成
            function createTetrominos() {
                const tetrominos = [
                    [[1, 1, 1, 1]], // I
                    [[1, 1], [1, 1]], // O
                    [[0, 1, 0], [1, 1, 1]], // T
                    [[1, 1, 0], [0, 1, 1]], // S
                    [[0, 1, 1], [1, 1, 0]], // Z
                    [[1, 1, 1], [0, 1, 0]], // L
                    [[1, 1, 1], [1, 0, 0]] // J
                ];

return tetrominos.map(tetromino => {
                    return rotateTetromino(tetromino);
                });
            }

// 方块旋转
            function rotateTetromino(tetromino) {
                const rotatedTetromino = [];

for (let row = 0; row < tetromino[0].length; row++) {
                    rotatedTetromino.push([]);
                    for (let col = 0; col < tetromino.length; col++) {
                        rotatedTetromino[row][col] = tetromino[col][row];
                    }
                }

return rotatedTetromino;
            }

// 方块生成
            function getRandomTetromino() {
                const randomIndex = Math.floor(Math.random() * tetrominos.length);
                const randomTetromino = tetrominos[randomIndex];
                return {
                    tetromino: randomTetromino,
                    color: tetrominoColors[randomIndex],
                };
            }

// 方块绘制
            function drawTetromino(tetromino, offset, color) {
                tetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, cellIndex) => {
                        if (cell) {
                            drawCell(
                                offset.x + cellIndex,
                                offset.y + rowIndex,
                                color
                            );
                        }
                    });
                });
            }

// 游戏面板绘制
            function drawPlayField() {
                playField.forEach((row, rowIndex) => {
                    row.forEach((cell, cellIndex) => {
                        if (cell) {
                            context.fillStyle = tetrominoColors[cell - 1];
                            context.fillRect(cellIndex, rowIndex, 1, 1);
                        }
                    });
                });
            }

// 绘制单元格
            function drawCell(x, y, color) {
                context.fillStyle = color;
                context.fillRect(x, y, 1, 1);
                context.strokeStyle = 'black';
                context.strokeRect(x, y, 1, 1);
            }

// 游戏绘制
            function draw() {
                currentPosition.x = Math.min(
                    Math.max(currentPosition.x, 0),
                    playField[0].length - currentTetromino.tetromino[0].length
                );
                currentPosition.y = Math.min(
                    Math.max(currentPosition.y, 0),
                    playField.length - currentTetromino.tetromino.length
                );

drawPlayField();
                drawTetromino(
                    currentTetromino.tetromino,
                    currentPosition,
                    currentTetromino.color
                );
            }

// 碰撞检测
            function checkCollision() {
                const [matrix, tetrominoPosition] = [currentTetromino.tetromino, currentPosition];

for (let row = 0; row < matrix.length; row++) {
                    for (let col = 0; col < matrix[row].length; col++) {
                        if (
                            matrix[row][col] &&
                            (playField[row + tetrominoPosition.y] &&
                                playField[row + tetrominoPosition.y][col + tetrominoPosition.x]) !== 0
                        ) {
                            return true;
                        }
                    }
                }

return false;
            }

// 方块合并
            function mergeTetromino() {
                currentTetromino.tetromino.forEach((row, rowIndex) => {
                    row.forEach((cell, cellIndex) => {
                        if (cell) {
                            playField[rowIndex + currentPosition.y][cellIndex + currentPosition.x] =
                                cell + 1;
                        }
                    });
                });
            }

// 消除行
            function clearLines() {
                playField.forEach((row, rowIndex) => {
                    if (row.every(cell => cell !== 0)) {
                        playField.splice(rowIndex, 1);
                        playField.unshift(new Array(12).fill(0));
                    }
                });
            }

// 消除多行得分
            function dropLines() {
                let linesCleared = 0;

for (let row = playField.length - 1; row >= 0; row--) {
                    if (playField[row].every(cell => cell !== 0)) {
                        playField.splice(row, 1);
                        playField.unshift(new Array(12).fill(0));
                        linesCleared++;
                    }
                }

return linesCleared > 0 ? Math.pow(2, linesCleared - 1) * 100 : 0;
            }

// 游戏面板初始化
            function createPlayField(width, height) {
                return new Array(height).fill(0).map(() => new Array(width).fill(0));
            }

// 方块移动
            function moveTetromino(offset) {
                currentPosition.x += offset;

if (checkCollision()) {
                    currentPosition.x -= offset;
                }
            }

// 方块旋转
            function rotate() {
                const nextTetromino = rotateTetromino(currentTetromino.tetromino);

if (!checkCollision(nextTetromino, currentPosition)) {
                    currentTetromino.tetromino = nextTetromino;
                }
            }

// 键盘事件监听
            document.addEventListener('keydown', event => {
                if (event.keyCode === 37) {
                    moveTetromino(-1);
                } else if (event.keyCode === 39) {
                    moveTetromino(1);
                } else if (event.keyCode === 40) {
                    currentPosition.y++;
                    if (checkCollision()) {
                        currentPosition.y--;
                    }
                } else if (event.keyCode === 38) {
                    rotate();
                }
            });

gameLoop();
        });
    </script>
</body>
</html>
```