AI game creator

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

No:40241

←

Prev Next

→

Tetris
Developer User18042｜Date and time 24/2/2 2:10:08
Build time 30.573 sec｜Game capacity 5.732KB｜

Script

Sure, here's a simple implementation of Tetris as a single HTML file using JavaScript:

This implementation creates a canvas element and draws the Tetris game on it. Users can control the Tetrimino shapes using the arrow keys (left, right, down) and rotate them using the up arrow key. The game includes basic collision detection, scoring, and game over logic. Note that this is just a basic implementation and can be further enhanced with additional functionalities and aesthetic improvements.

←

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>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="240" height="400"></canvas>

const scale = 20;

const arenaWidth = canvas.width / scale;
      const arenaHeight = canvas.height / scale;

const arena = createArena();

function createArena() {
        const matrix = [];
        for (let y = 0; y < arenaHeight; y++) {
          matrix.push(new Array(arenaWidth).fill(0));
        }
        return matrix;
      }

function rotate(matrix) {
        const rotated = matrix.map((_, index) =>
          matrix.map(col => col[index])
        );

return rotated.reverse();
      }

function createPlayer() {
        const pieces = [
          [[1]],
          [[1, 1, 1, 1]],
          [[1, 1], [1, 1]],
          [[1, 1, 0], [0, 1, 1]],
          [[0, 1, 1], [1, 1, 0]],
          [[1, 1, 1], [0, 1, 0]],
          [[0, 1, 0], [1, 1, 1]]
        ];

const piece = pieces[Math.floor(Math.random() * pieces.length)];

return {
          matrix: piece,
          pos: { x: Math.floor(arenaWidth / 2) - Math.floor(piece[0].length / 2), y: 0 }
        };
      }

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

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

function arenaSweep() {
        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++;

// Increase the score here if you want to keep track of it
        }
      }

function playerReset() {
        const pieces = [
          [[1]],
          [[1, 1, 1, 1]],
          [[1, 1], [1, 1]],
          [[1, 1, 0], [0, 1, 1]],
          [[0, 1, 1], [1, 1, 0]],
          [[1, 1, 1], [0, 1, 0]],
          [[0, 1, 0], [1, 1, 1]]
        ];

player.matrix = pieces[Math.floor(Math.random() * pieces.length)];
        player.pos.y = 0;
        player.pos.x = Math.floor(arenaWidth / 2) - Math.floor(player.matrix[0].length / 2);

if (collide(arena, player)) {
          // Game over logic here
        }
      }

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 draw() {
        context.fillStyle = '#000';
        context.fillRect(0, 0, canvas.width, canvas.height);

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

const player = createPlayer();

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