AI game creator

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

No:21708

125

←

Prev Next

→

Tetris
Developer User10002｜Date and time 23/10/17 17:56:59
Build time 246.251 sec｜Game capacity 6.046KB｜

Script

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript:

To play the game, simply open the HTML file in a web browser, and you will be able to control the falling Tetris pieces using the arrow keys on your smartphone. The goal is to fill complete lines to clear them and earn points. If the Tetris pieces stack up to the top of the screen, the game will be over, and you will have the option to restart.

←

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 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #333;
    }
    canvas {
      border: 1px solid #FFF;
      background-color: #000;
    }
  </style>
</head>
<body>
<canvas id="tetrisCanvas" width="240" height="400"></canvas>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('tetrisCanvas');
    const context = canvas.getContext('2d');

const ROWS = 20;
    const COLS = 10;
    const BLOCK_SIZE = 20;

const board = createBoard();
    let currentPiece = generatePiece();
    let score = 0;

function createBoard() {
      const board = [];
      for (let row = 0; row < ROWS; row++) {
        board[row] = Array(COLS).fill(0);
      }
      return board;
    }

function generatePiece() {
      const pieces = [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[1, 1, 1], [0, 1, 0]], // T
        [[1, 1, 0], [0, 1, 1]], // S
        [[0, 1, 1], [1, 1, 0]], // Z
        [[1, 1, 1], [0, 0, 1]], // J
        [[1, 1, 1], [1, 0, 0]], // L
      ];

const piece = pieces[Math.floor(Math.random() * pieces.length)];
      return {
        shape: piece,
        x: Math.floor(COLS / 2) - Math.floor(piece[0].length / 2),
        y: 0,
      };
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

drawBoard();
      drawPiece();

requestAnimationFrame(draw);
    }

function drawSquare(x, y, color) {
      context.fillStyle = color;
      context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
      context.strokeStyle = '#555';
      context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    }

function drawPiece() {
      const {
        shape,
        x,
        y
      } = currentPiece;

for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
          if (shape[row][col]) {
            drawSquare(x + col, y + row, '#FFA500');
          }
        }
      }
    }

function collide() {
      const {
        shape,
        x,
        y
      } = currentPiece;

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

return false;
    }

function merge() {
      const {
        shape,
        x,
        y
      } = currentPiece;

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

function rotate() {
      const {
        shape,
        x,
        y
      } = currentPiece;

const rotatedShape = shape[0].map((_, i) =>
        shape.map(row => row[i]).reverse()
      );

if (!collideWithWall(rotatedShape, x, y) && !collideWithBoard(rotatedShape, x, y)) {
        currentPiece.shape = rotatedShape;
      }
    }

function move(dir) {
      const {
        shape,
        x,
        y
      } = currentPiece;

if (!collideWithWall(shape, x + dir, y) && !collideWithBoard(shape, x + dir, y)) {
        currentPiece.x += dir;
      }
    }

return false;
    }

return false;
    }

function clearLines() {
      let linesCleared = 0;

for (let row = ROWS - 1; row >= 0; row--) {
        if (board[row].every(cell => cell !== 0)) {
          linesCleared++;
          board.splice(row, 1);
          board.unshift(Array(COLS).fill(0));
        }
      }

score += linesCleared * 10;
    }

function gameover() {
      alert("Game Over!");
      location.reload();
    }

function update() {
      if (!collide()) {
        currentPiece.y++;
      } else {
        merge();
        clearLines();
        currentPiece = generatePiece();

if (collide()) {
          gameover();
        }
      }
    }

document.addEventListener('keydown', event => {
      switch (event.keyCode) {
        case 37: // Left arrow key
          move(-1);
          break;
        case 39: // Right arrow key
          move(1);
          break;
        case 38: // Up arrow key
          rotate();
          break;
        case 40: // Down arrow key
          update();
          break;
      }
    });

draw();
    setInterval(update, 1000 / 2); // Update 2 times per second
  });
</script>
</body>
</html>
```