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

No:15669

テトリスのようなゲーム。枠の隣に次降ってくるものを表示してください。降ってくるものを枠内に表示してく..ALL
Developer User6722｜Date and time 23/9/10 15:34:04
Build time 38.604 sec｜Game capacity 6.173KB｜

Script

Tetris

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
        body {
            background-color: #333;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #gameboard {
            margin: 0 auto;
            background-color: #000;
            width: 200px;
        }
        .block {
            background-color: #fff;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>Tetris</h1>
    <div id="gameboard">
        
    </div>
    <script>
        // Tetris settings
        const BOARD_WIDTH = 10;
        const BOARD_HEIGHT = 20;
        const BLOCK_SIZE = 20;
        const GAME_SPEED = 500; // in milliseconds

// Tetris piece shapes
        const shapes = [
            [
                [1, 1, 1, 1]
            ],
            [
                [1, 1],
                [1, 1]
            ],
            [
                [0, 1, 1],
                [1, 1, 0]
            ],
            [
                [1, 1, 0],
                [0, 1, 1]
            ],
            [
                [1, 0, 0],
                [1, 1, 1]
            ],
            [
                [0, 0, 1],
                [1, 1, 1]
            ],
            [
                [1, 0, 1],
                [1, 1, 1]
            ]
        ];

// Game variables
        let board = [];
        let currentPiece = [];
        let currentPieceX = 0;
        let currentPieceY = 0;
        let intervalId = null;

// Initialize game board
        function initBoard() {
            for (let i = 0; i < BOARD_HEIGHT; i++) {
                board[i] = [];
                for (let j = 0; j < BOARD_WIDTH; j++) {
                    board[i][j] = 0;
                }
            }
        }

// Generate a random piece
        function generatePiece() {
            const random = Math.floor(Math.random() * shapes.length);
            currentPiece = shapes[random];
            currentPieceX = Math.floor((BOARD_WIDTH - currentPiece[0].length) / 2);
            currentPieceY = 0;
        }

// Draw the game board
        function drawBoard() {
            let html = '';
            for (let i = 0; i < BOARD_HEIGHT; i++) {
                for (let j = 0; j < BOARD_WIDTH; j++) {
                    html += '<div class="block"' + (board[i][j] === 1 ? ' style="background-color: #fff;"' : '') + '></div>';
                }
            }
            document.getElementById('gameboard').innerHTML = html;
        }

// Draw the current piece on the board
        function drawPiece() {
            for (let i = 0; i < currentPiece.length; i++) {
                for (let j = 0; j < currentPiece[i].length; j++) {
                    if (currentPiece[i][j] === 1) {
                        const x = currentPieceX + j;
                        const y = currentPieceY + i;
                        board[y][x] = 1;
                    }
                }
            }
        }

// Clear the current piece from the board
        function clearPiece() {
            for (let i = 0; i < currentPiece.length; i++) {
                for (let j = 0; j < currentPiece[i].length; j++) {
                    if (currentPiece[i][j] === 1) {
                        const x = currentPieceX + j;
                        const y = currentPieceY + i;
                        board[y][x] = 0;
                    }
                }
            }
        }

// Move the current piece down
        function moveDown() {
            clearPiece();
            currentPieceY++;
            if (isCollision()) {
                currentPieceY--;
                drawPiece();
                generatePiece();
                drawPiece();
                if (isCollision()) {
                    gameOver();
                    return;
                }
            }
            drawPiece();
            drawBoard();
        }

// Move the current piece left
        function moveLeft() {
            clearPiece();
            currentPieceX--;
            if (isCollision()) {
                currentPieceX++;
            }
            drawPiece();
            drawBoard();
        }

// Move the current piece right
        function moveRight() {
            clearPiece();
            currentPieceX++;
            if (isCollision()) {
                currentPieceX--;
            }
            drawPiece();
            drawBoard();
        }

// Check if there is a collision
        function isCollision() {
            for (let i = 0; i < currentPiece.length; i++) {
                for (let j = 0; j < currentPiece[i].length; j++) {
                    if (currentPiece[i][j] === 1) {
                        const x = currentPieceX + j;
                        const y = currentPieceY + i;
                        if (x < 0 || x >= BOARD_WIDTH || y >= BOARD_HEIGHT || board[y][x] === 1) {
                            return true;
                        }
                    }
                }
            }
            return false;
        }

// Game over
        function gameOver() {
            clearInterval(intervalId);
            alert('Game Over');
        }

// Initialize game
        function init() {
            initBoard();
            generatePiece();
            drawPiece();
            drawBoard();
            intervalId = setInterval(moveDown, GAME_SPEED);
        }

// Event listeners for keydown events
        document.addEventListener('keydown', function(event) {
            switch (event.keyCode) {
                case 37: // Left arrow
                    moveLeft();
                    break;
                case 39: // Right arrow
                    moveRight();
                    break;
                case 40: // Down arrow
                    moveDown();
                    break;
            }
        });

// Start the game
        init();
    </script>
</body>
</html>