Tetris but the border shrinks every move's game

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

No:14303

←

Prev Next

→

Tetris but the border shrinks every move
Developer User6129｜Date and time 23/8/31 20:42:47
Build time 56.105 sec｜Game capacity 7.988KB｜

Script

Sure! I've created a simple implementation of Tetris with a shrinking border using JavaScript. You can copy the following code and save it as an HTML file to run the game:

Score: 0

Border Size: 1

This code creates a simple Tetris game where the player controls the shapes using arrow keys on their smartphone. The game starts with a border size of 1, and every 10 seconds, the border size increases by 1. If the player's shape collides with the border or the existing blocks, the game is over. The player earns points by completing lines, and the border size is displayed on the screen. You can run the game by opening the HTML file in a web browser on your smartphone. Enjoy playing Tetris with a shrinking border!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! I've created a simple implementation of Tetris with a shrinking border using JavaScript. You can copy the following code and save it as an HTML file to run the game:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tetris: Shrinking Border</title>
    <style>
      canvas {
        border: 1px solid #000;
        background: #f8f8f8;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');

// Set up the initial game state
        const grid = createGrid(10, 20);
        const player = createPlayer();
        let score = 0;
        let borderSize = 1;

// Set the shrinking border interval (every 10 seconds)
        setInterval(() => {
          borderSize += 1;
        }, 10000);

// Create the game grid
        function createGrid(width, height) {
          const grid = [];
          for (let row = 0; row < height; row++) {
            grid.push(new Array(width).fill(0));
          }
          return grid;
        }

// Create the player's Tetris shape
        function createPlayer() {
          return {
            pos: { x: 0, y: 0 },
            matrix: createRandomShape(),
          };
        }

// Create a random Tetris shape
        function createRandomShape() {
          const shapes = [
            [[1]], // I
            [[1, 1]], // O
            [[1, 1, 1]], // L
            [[1, 0], [1, 1]], // Z
            [[0, 1], [1, 1]], // S
            [[1, 1, 1, 1]], // T
          ];
          return shapes[Math.floor(Math.random() * shapes.length)];
        }

// Draw the Tetris shape on the grid
        function drawMatrix(matrix, offset) {
          matrix.forEach((row, y) => {
            row.forEach((value, x) => {
              if (value !== 0) {
                context.fillStyle = 'blue';
                context.fillRect(x + offset.x, y + offset.y, 1, 1);
              }
            });
          });
        }

// Draw the game grid and the player's shape
        function draw() {
          context.fillStyle = '#f8f8f8';
          context.fillRect(0, 0, canvas.width, canvas.height);

drawMatrix(grid, { x: 0, y: 0 });
          drawMatrix(player.matrix, player.pos);
        }

// Merge the player's shape into the grid
        function merge() {
          player.matrix.forEach((row, y) => {
            row.forEach((value, x) => {
              if (value !== 0) {
                grid[y + player.pos.y][x + player.pos.x] = value;
              }
            });
          });
          checkCollision();
          clearLines();
          playerReset();
        }

// Check for collision with the borders or existing blocks
        function checkCollision() {
          const [matrix, offset] = [player.matrix, player.pos];

for (let y = 0; y < matrix.length; y++) {
            for (let x = 0; x < matrix[y].length; x++) {
              if (
                matrix[y][x] !== 0 &&
                (grid[y + offset.y] && grid[y + offset.y][x + offset.x]) !== 0
              ) {
                // Game over condition
                alert('Game Over!');
                // Reset the game
                grid.forEach(row => row.fill(0));
                score = 0;
                borderSize = 1;
              }
            }
          }
        }

// Clear completed lines and calculate score
        function clearLines() {
          outer: for (let y = grid.length - 1; y >= 0; y--) {
            for (let x = 0; x < grid[y].length; x++) {
              if (grid[y][x] === 0) {
                continue outer;
              }
            }
            const row = grid.splice(y, 1)[0].fill(0);
            grid.unshift(row);
            score += 10;
          }
        }

// Move player shape down by one block
        function playerDrop() {
          player.pos.y++;
          if (collide()) {
            player.pos.y--;
            merge();
          }
        }

// Move player shape horizontally
        function playerMove(dir) {
          player.pos.x += dir;
          if (collide()) {
            player.pos.x -= dir;
          }
        }

// Rotate player shape
        function playerRotate() {
          rotate(player.matrix);
          if (collide()) {
            rotate(player.matrix, -1);
          }
        }

// Rotate the matrix
        function rotate(matrix, dir = 1) {
          for (let y = 0; y < matrix.length; y++) {
            for (let x = 0; x < y; x++) {
              [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
            }
          }

if (dir > 0) {
            matrix.forEach(row => row.reverse());
          } else {
            matrix.reverse();
          }
        }

// Check for collision with walls or other blocks
        function collide() {
          const [matrix, offset] = [player.matrix, player.pos];
          for (let y = 0; y < matrix.length; y++) {
            for (let x = 0; x < matrix[y].length; x++) {
              if (
                matrix[y][x] !== 0 &&
                (grid[y + offset.y] && grid[y + offset.y][x + offset.x]) !== 0
              ) {
                return true;
              }
            }
          }
          return false;
        }

// Reset player's shape and generate a new one
        function playerReset() {
          const shapes = [
            [[1]], // I
            [[1, 1]], // O
            [[1, 1, 1]], // L
            [[1, 0], [1, 1]], // Z
            [[0, 1], [1, 1]], // S
            [[1, 1, 1, 1]], // T
          ];
          player.matrix = shapes[Math.floor(Math.random() * shapes.length)];
          player.pos.y = 0;
          player.pos.x = Math.floor(Math.random() * (grid[0].length - 2)) + 1;
          if (collide()) {
            // Game over condition
            alert('Game Over!');
            // Reset the game
            grid.forEach(row => row.fill(0));
            score = 0;
            borderSize = 1;
          }
        }

// Update the game
        function update() {
          draw();
          playerDrop();
          document.getElementById('score').innerText = score;
          document.getElementById('border-size').innerText = borderSize;
        }

// Handle keyboard controls
        function handleKeyDown(event) {
          switch (event.keyCode) {
            case 37: // LEFT
              playerMove(-1);
              break;
            case 39: // RIGHT
              playerMove(1);
              break;
            case 40: // DOWN
              playerDrop();
              break;
            case 38: // UP
              playerRotate();
              break;
          }
        }

// Start the game
        function startGame() {
          score = 0;
          grid.forEach(row => row.fill(0));
          borderSize = 1;
          playerReset();
          setInterval(update, 1000 / 3); // 3 frames per second
        }

// Handle arrow key press
        document.addEventListener('keydown', handleKeyDown);
        startGame();
      });
    </script>
    <p>Score: <span id="score">0</span></p>
    <p>Border Size: <span id="border-size">1</span></p>
  </body>
</html>
```

You can run the game by opening the HTML file in a web browser on your smartphone. Enjoy playing Tetris with a shrinking border!