AI game creator

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

No:17350

110

←

Prev Next

→

Tetris in space
Developer User7638｜Date and time 23/9/23 5:57:31
Build time 83.98 sec｜Game capacity 8.373KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris in Space</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="400" height="800"></canvas>

// Canvas Setup
        const canvas = document.getElementById('tetrisCanvas');
        const context = canvas.getContext('2d');
        const scale = 40; // Each block size

// Game Variables
        const ROWS = 20;
        const COLS = 10;
        const VACANT = "white";
        let board = [];

// Tetromino Shapes (Pictograms)
        const pieces = [
            [ 
                [0, 1, 0],  // I
                [0, 1, 0],
                [0, 1, 0],
                [0, 1, 0]
            ],
            [
                [0, 1, 0],  // J
                [0, 1, 0],
                [1, 1, 0]
            ],
            [
                [1, 0, 0],  // L
                [1, 0, 0],
                [1, 1, 0]
            ],
            [
                [1, 1],     // O
                [1, 1]
            ],
            [
                [0, 1, 1],  // S
                [1, 1, 0],
                [0, 0, 0]
            ],
            [
                [1, 0, 0],  // T
                [1, 1, 1],
                [0, 0, 0]
            ],
            [
                [0, 1, 1],  // Z
                [0, 0, 1],
                [0, 0, 0]
            ]
        ];

// Create the Board
        function createBoard() {
            for (let row = 0; row < ROWS; row++) {
                board[row] = [];
                for (let col = 0; col < COLS; col++) {
                    board[row][col] = VACANT;
                }
            }
        }

// Draw a Single Block
        function drawBlock(x, y, color) {
            context.fillStyle = color;
            context.fillRect(x * scale, y * scale, scale, scale);
            context.strokeStyle = "#000";
            context.strokeRect(x * scale, y * scale, scale, scale);
        }

// Draw the Board and Tetromino
        function draw() {
            for (let row = 0; row < ROWS; row++) {
                for (let col = 0; col < COLS; col++) {
                    drawBlock(col, row, board[row][col]);
                }
            }

for (let row = 0; row < currentTetromino.shape.length; row++) {
                for (let col = 0; col < currentTetromino.shape[row].length; col++) {
                    if (currentTetromino.shape[row][col])
                        drawBlock(currentTetromino.x + col, currentTetromino.y + row, currentTetromino.color);
                }
            }
        }

// Control the Tetromino - Move Left
        function moveLeft() {
            if (canMoveLeft()) {
                currentTetromino.x--;
                draw();
            }
        }

// Control the Tetromino - Move Right
        function moveRight() {
            if (canMoveRight()) {
                currentTetromino.x++;
                draw();
            }
        }

// Control the Tetromino - Move Down
        function moveDown() {
            if (canMoveDown()) {
                currentTetromino.y++;
                draw();
            }
            else {
                lockTetromino();
                clearFullRows();
                createRandomTetromino();
            }
        }

// Control the Tetromino - Rotate
        function rotate() {
            const nextTetrominoShape = currentTetromino.shape[0].map((_, index) =>
                currentTetromino.shape.map(row => row[index])
            );

if (isValidMove(0, 0, nextTetrominoShape)) {
                currentTetromino.shape = nextTetrominoShape;
                draw();
            }
        }

// Check if Tetromino can Move Left
        function canMoveLeft() {
            for (let row = 0; row < currentTetromino.shape.length; row++) {
                for (let col = 0; col < currentTetromino.shape[row].length; col++) {
                    if (currentTetromino.shape[row][col]) {
                        if (currentTetromino.x + col <= 0 || board[currentTetromino.y + row][currentTetromino.x + col - 1] !== VACANT) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Check if Tetromino can Move Right
        function canMoveRight() {
            for (let row = 0; row < currentTetromino.shape.length; row++) {
                for (let col = 0; col < currentTetromino.shape[row].length; col++) {
                    if (currentTetromino.shape[row][col]) {
                        if (currentTetromino.x + col >= COLS - 1 || board[currentTetromino.y + row][currentTetromino.x + col + 1] !== VACANT) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Check if Tetromino can Move Down
        function canMoveDown() {
            for (let row = 0; row < currentTetromino.shape.length; row++) {
                for (let col = 0; col < currentTetromino.shape[row].length; col++) {
                    if (currentTetromino.shape[row][col]) {
                        if (currentTetromino.y + row >= ROWS - 1 || board[currentTetromino.y + row + 1][currentTetromino.x + col] !== VACANT) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Check if Tetromino can be Rotated
        function isValidMove(offsetX, offsetY, nextTetrominoShape) {
            for (let row = 0; row < nextTetrominoShape.length; row++) {
                for (let col = 0; col < nextTetrominoShape[row].length; col++) {
                    if (nextTetrominoShape[row][col]) {
                        const newX = currentTetromino.x + offsetX + col;
                        const newY = currentTetromino.y + offsetY + row;
                        if (newX < 0 || newX >= COLS || newY >= ROWS || board[newY][newX] !== VACANT) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// Lock the Tetromino in Place
        function lockTetromino() {
            for (let row = 0; row < currentTetromino.shape.length; row++) {
                for (let col = 0; col < currentTetromino.shape[row].length; col++) {
                    if (currentTetromino.shape[row][col]) {
                        board[currentTetromino.y + row][currentTetromino.x + col] = currentTetromino.color;
                    }
                }
            }
        }

// Clear Full Rows
        function clearFullRows() {
            for (let row = 0; row < ROWS; row++) {
                if (board[row].every(cell => cell !== VACANT)) {
                    board.splice(row, 1);
                    board.unshift(Array(COLS).fill(VACANT));
                }
            }
        }

// Tetromino Object
        function Tetromino() {
            this.shape = pieces[Math.floor(Math.random() * pieces.length)];
            this.color = '#' + Math.floor(Math.random()*16777215).toString(16); // Random color
            this.x = 3;
            this.y = -2;
        }

// Create a Random Tetromino
        function createRandomTetromino() {
            currentTetromino = new Tetromino();
        }

// Initialize the Game
        function init() {
            createBoard();
            createRandomTetromino();
            draw();
            setInterval(moveDown, 1000); // Move down every second
        }

// Keyboard Event Listener
        document.addEventListener("keydown", function(event) {
            if (event.keyCode === 37) {
                moveLeft(); // Left Arrow Key
            } else if (event.keyCode === 39) {
                moveRight(); // Right Arrow Key
            } else if (event.keyCode === 40) {
                moveDown(); // Down Arrow Key
            } else if (event.keyCode === 38) {
                rotate(); // Up Arrow Key
            }
        });

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