Tetris but the border shrinks every second's game

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

No:14304

←

Prev Next

→

Tetris but the border shrinks every second
Developer User6129｜Date and time 23/8/31 20:44:15
Build time 76.43 sec｜Game capacity 11.566KB｜

Script

Sure! Here's a simple implementation of Tetris with a shrinking border that you can play on a smartphone. The game uses pictograms to represent the different Tetriminos.

You can copy and paste this code into a new HTML file and open it in any web browser (including on a smartphone) to play the game. The game canvas will initially have a 320x480 size, and the border will shrink by the number of cleared rows. The Tetriminos are represented by black blocks, and you can use touch gestures (or keyboard input on a PC) to control the game. Have fun playing!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of Tetris with a shrinking border that you can play on a smartphone. The game uses pictograms to represent the different Tetriminos.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris with Shrinking Border</title>
    <style>
        /* Add some basic styling */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f1f1f1;
        }

#gameCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #000;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="480"></canvas>

// Set up Tetris board properties
        const blockSize = 20;
        const boardWidth = canvas.width / blockSize;
        const boardHeight = canvas.height / blockSize;
        const initialSpeed = 1000; // in milliseconds

// Set up the Tetriminos
        const tetriminos = [
            // I
            [[1, 1, 1, 1]],

// J
            [[1, 1, 1], [0, 0, 1]],

// L
            [[1, 1, 1], [1, 0, 0]],

// O
            [[1, 1], [1, 1]],

// S
            [[0, 1, 1], [1, 1, 0]],

// T
            [[1, 1, 1], [0, 1, 0]],

// Z
            [[1, 1, 0], [0, 1, 1]]
        ];

// Set up the initial state
        let board = createEmptyBoard();
        let currentTetrimino = getRandomTetrimino();
        let currentPosition = { x: Math.floor(boardWidth / 2), y: 0 };
        let speed = initialSpeed;
        let gameover = false;

// Create an empty Tetris board
        function createEmptyBoard() {
            const rows = [];
            for (let i = 0; i < boardHeight; i++) {
                rows.push(new Array(boardWidth).fill(0));
            }
            return rows;
        }

// Get a random Tetrimino
        function getRandomTetrimino() {
            const index = Math.floor(Math.random() * tetriminos.length);
            return JSON.parse(JSON.stringify(tetriminos[index])); // Deep copy the Tetrimino
        }

// Draw the current state of the board
        function drawBoard() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBorder();

for (let y = 0; y < boardHeight; y++) {
                for (let x = 0; x < boardWidth; x++) {
                    if (board[y][x]) {
                        drawBlock(x, y);
                    }
                }
            }

if (!gameover) {
                drawCurrentTetrimino();
            }
        }

// Draw a single block at the given position (x, y)
        function drawBlock(x, y) {
            const xOffset = x * blockSize;
            const yOffset = y * blockSize;

context.fillStyle = '#000';
            context.fillRect(xOffset, yOffset, blockSize, blockSize);
        }

// Draw the border around the game canvas
        function drawBorder() {
            const borderWidth = (boardWidth - 1) * blockSize;
            const borderHeight = (boardHeight - 1) * blockSize;

context.strokeStyle = '#000';
            context.lineWidth = 2;
            context.strokeRect(0, 0, borderWidth, borderHeight);
        }

// Draw the current Tetrimino
        function drawCurrentTetrimino() {
            const currentMatrix = currentTetrimino[0];
            const tetriminoWidth = currentMatrix[0].length;
            const tetriminoHeight = currentMatrix.length;

for (let y = 0; y < tetriminoHeight; y++) {
                for (let x = 0; x < tetriminoWidth; x++) {
                    if (currentMatrix[y][x]) {
                        const xPos = currentPosition.x + x;
                        const yPos = currentPosition.y + y;
                        drawBlock(xPos, yPos);
                    }
                }
            }
        }

// Move the current Tetrimino in the specified direction
        function moveTetrimino(direction) {
            const newPosition = { ...currentPosition };

if (direction === 'left') {
                newPosition.x--;
            } else if (direction === 'right') {
                newPosition.x++;
            } else if (direction === 'down') {
                newPosition.y++;
            }

if (!collidesWithBorder(newPosition) && !collidesWithTetrimino(newPosition)) {
                currentPosition = newPosition;
            }
        }

// Rotate the current Tetrimino clockwise
        function rotateTetrimino() {
            const currentMatrix = currentTetrimino[0];
            const rotatedMatrix = [];

for (let x = 0; x < currentMatrix[0].length; x++) {
                const newRow = [];
                for (let y = currentMatrix.length - 1; y >= 0; y--) {
                    newRow.push(currentMatrix[y][x]);
                }
                rotatedMatrix.push(newRow);
            }

const newPosition = { ...currentPosition };
            const xOffset = Math.floor(currentMatrix[0].length / 2);
            const yOffset = Math.floor(currentMatrix.length / 2);
            newPosition.x -= xOffset;
            newPosition.y -= yOffset;

if (!collidesWithBorder(newPosition) && !collidesWithTetrimino(newPosition, rotatedMatrix)) {
                currentTetrimino[0] = rotatedMatrix;
                currentPosition = newPosition;
            }
        }

// Check if the current position collides with the border
        function collidesWithBorder(position) {
            const currentMatrix = currentTetrimino[0];
            const tetriminoWidth = currentMatrix[0].length;
            const tetriminoHeight = currentMatrix.length;

for (let y = 0; y < tetriminoHeight; y++) {
                for (let x = 0; x < tetriminoWidth; x++) {
                    if (currentMatrix[y][x] && ((position.x + x) < 0 || (position.x + x) >= boardWidth || (position.y + y) >= boardHeight)) {
                        return true;
                    }
                }
            }

return false;
        }

// Check if the current position collides with another Tetrimino
        function collidesWithTetrimino(position, matrix = currentTetrimino[0]) {
            const tetriminoWidth = matrix[0].length;
            const tetriminoHeight = matrix.length;

for (let y = 0; y < tetriminoHeight; y++) {
                for (let x = 0; x < tetriminoWidth; x++) {
                    if (matrix[y][x] && board[position.y + y] && board[position.y + y][position.x + x]) {
                        return true;
                    }
                }
            }

return false;
        }

// Lock the current Tetrimino in place and generate a new one
        function lockTetrimino() {
            const currentMatrix = currentTetrimino[0];

for (let y = 0; y < currentMatrix.length; y++) {
                for (let x = 0; x < currentMatrix[y].length; x++) {
                    if (currentMatrix[y][x]) {
                        board[currentPosition.y + y][currentPosition.x + x] = 1;
                    }
                }
            }

checkFullRows();

currentTetrimino = getRandomTetrimino();
            currentPosition = { x: Math.floor(boardWidth / 2), y: 0 };

if (collidesWithTetrimino(currentPosition)) {
                gameover = true;
                alert('Game Over!');
                return;
            }

// Increase speed (decrease interval) every 10 locked pieces
            if (getLockedPiecesCount() % 10 === 0) {
                speed *= 0.9;
                clearInterval(gameInterval);
                gameInterval = setInterval(updateGame, speed);
            }
        }

// Check if any rows are filled, and clear them
        function checkFullRows() {
            let fullRowsCount = 0;

for (let y = boardHeight - 1; y >= 0; y--) {
                if (board[y].every(cell => cell === 1)) {
                    board.splice(y, 1);
                    board.unshift(new Array(boardWidth).fill(0));
                    fullRowsCount++;
                }
            }

if (fullRowsCount > 0) {
                // Shrink the border by the number of cleared rows
                const borderShrinkAmount = fullRowsCount * blockSize;
                canvas.width -= borderShrinkAmount;
                canvas.height -= borderShrinkAmount;
                context.translate(-borderShrinkAmount / 2, -borderShrinkAmount / 2);
            }
        }

// Get the count of locked pieces on the board
        function getLockedPiecesCount() {
            let count = 0;

for (let y = 0; y < boardHeight; y++) {
                count += board[y].filter(cell => cell === 1).length;
            }

return count;
        }

// Update the game state
        function updateGame() {
            moveTetrimino('down');

if (collidesWithTetrimino({ x: currentPosition.x, y: currentPosition.y + 1 })) {
                lockTetrimino();
            }

drawBoard();
        }

// Initialize the game
        function initGame() {
            gameInterval = setInterval(updateGame, speed);

// Map touch events to game actions
            document.addEventListener('touchstart', function (event) {
                if (event.targetTouches.length > 0) {
                    const touch = event.targetTouches[0];
                    const x = touch.pageX;
                    const y = touch.pageY;

if (x < canvas.offsetLeft + canvas.width / 3) {
                        moveTetrimino('left');
                    } else if (x > canvas.offsetLeft + (canvas.width * 2) / 3) {
                        moveTetrimino('right');
                    } else if (y > canvas.offsetTop + canvas.height / 2) {
                        rotateTetrimino();
                    }
                }
            });

// Handle keyboard input for PC testing (left, right, down, and space)
            document.addEventListener('keydown', function (event) {
                switch (event.code) {
                    case 'ArrowLeft':
                        moveTetrimino('left');
                        break;
                    case 'ArrowRight':
                        moveTetrimino('right');
                        break;
                    case 'ArrowDown':
                        moveTetrimino('down');
                        break;
                    case 'Space':
                        rotateTetrimino();
                        break;
                }
            });
        }

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