AI game creator

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

No:39256

←

Prev Next

→

Tetris
Developer User17559｜Date and time 24/1/27 11:17:28
Build time 28.699 sec｜Game capacity 6.664KB｜

Script

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript and enclosed within script tags:

To play the game, you can copy this code into an HTML file and open it in a web browser (preferably on a smartphone for better experience). The game will start automatically, and you can use the left and right arrow keys to move the tetromino, the down arrow key to make it drop faster, and the Q and W keys to rotate the tetromino. The goal is to clear as many rows as possible by placing tetrominoes and achieving high scores. Please note that this is a basic implementation of Tetris and there is scope for further improvements and enhancements.

←

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 and enclosed within script tags:
  
```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    canvas {
      display: block;
      background: #000;
      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");
      const scale = 20;
      context.scale(scale, scale);

function arenaSweep() {
        let rowCount = 1;
        outer: for (let y = arena.length - 1; y > 0; --y) {
          for (let x = 0; x < arena[y].length; ++x) {
            if (arena[y][x] === 0) {
              continue outer;
            }
          }
          const row = arena.splice(y, 1)[0].fill(0);
          arena.unshift(row);
          ++y;

player.score += rowCount * 10;
          rowCount *= 2;
        }
      }

function createMatrix(width, height) {
        const matrix = [];
        while (height--) {
          matrix.push(new Array(width).fill(0));
        }
        return matrix;
      }

function draw() {
        context.fillStyle = "#000";
        context.fillRect(0, 0, canvas.width, canvas.height);

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

function playerDrop() {
        player.pos.y++;
        if (collide(arena, player)) {
          player.pos.y--;
          merge(arena, player);
          playerReset();
          arenaSweep();
          updateScore();
        }
        dropCounter = 0;
      }

function playerMove(dir) {
        player.pos.x += dir;
        if (collide(arena, player)) {
          player.pos.x -= dir;
        }
      }

function playerReset() {
        const pieces = "ILJOTSZ";
        player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
        player.pos.y = 0;
        player.pos.x =
          ((arena[0].length / 2) | 0) -
          ((player.matrix[0].length / 2) | 0);
        if (collide(arena, player)) {
          arena.forEach(row => row.fill(0));
          player.score = 0;
          updateScore();
        }
      }

let dropCounter = 0;
      let dropInterval = 1000;

let lastTime = 0;
      function update(time = 0) {
        const deltaTime = time - lastTime;
        lastTime = time;

dropCounter += deltaTime;
        if (dropCounter > dropInterval) {
          playerDrop();
        }

draw();
        requestAnimationFrame(update);
      }

function updateScore() {
        document.getElementById("score").innerText = `Score: ${player.score}`;
      }

const colors = [
        null,
        "#FF0D72",
        "#0DC2FF",
        "#0DFF72",
        "#F538FF",
        "#FF8E0D",
        "#FFE138",
        "#3877FF"
      ];

const arena = createMatrix(12, 20);

const player = {
        pos: { x: 0, y: 0 },
        matrix: null,
        score: 0,
      };

playerReset();
      updateScore();
      update();
    });
  </script>
</body>
</html>
```

Please note that this is a basic implementation of Tetris and there is scope for further improvements and enhancements.