AI game creator

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

No:11392

115

←

Prev Next

→

Tetris
Developer User4871｜Date and time 23/8/9 13:36:56
Build time 53.031 sec｜Game capacity 7.09KB｜

Script

Sure! Here's a simple implementation of Tetris game in a single HTML file, using JavaScript and enclosed in script tags. You can play the game on a smartphone using touch controls. Please note that this implementation may not include advanced features or visual aesthetics, but it should provide a basic playable game experience.

To play the game, simply copy the above code and save it as a single HTML file (e.g., "tetris.html"). Then, open the HTML file in a web browser (preferably on a smartphone) to start playing Tetris. The game can be controlled using keyboard arrow keys or touch controls on mobile devices.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tetris</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #000;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="tetris" width="300" height="600"></canvas>

const canvas = document.getElementById("tetris");
      const context = canvas.getContext("2d");
      const scale = 30;

const rows = canvas.height / scale;
      const columns = canvas.width / scale;

let score = 0;

const colors = [
        "#000000", // Empty cell
        "#FF0000", // Red
        "#00FF00", // Green
        "#0000FF", // Blue
        "#FFFF00", // Yellow
        "#FF00FF", // Purple
        "#00FFFF", // Cyan
        "#FFA500", // Orange
      ];

const pieces = [
        // L shape
        [[1, 0], [1, 0], [1, 1]],

// Reverse L shape
        [[0, 1], [0, 1], [1, 1]],

// Square shape
        [[1, 1], [1, 1]],

// Stick shape
        [[1], [1], [1], [1]],

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

// Z shape
        [[1, 1, 0], [0, 1, 1]],

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

let grid = Array.from({ length: rows }, () =>
        Array(columns).fill(0)
      ); // Create an empty grid

function drawCell(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * scale, y * scale, scale, scale);
      }

// Check if a piece can be placed at the given coordinates
      function canPlace(piece, x, y) {
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (
              piece[row][col] &&
              (x + col >= columns || x + col < 0 || y + row >= rows || grid[y + row][x + col])
            ) {
              return false;
            }
          }
        }
        return true;
      }

// Place a piece on the grid at the given coordinates
      function placePiece(piece, x, y) {
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (piece[row][col]) {
              grid[y + row][x + col] = piece[row][col];
            }
          }
        }

clearLines();
      }

// Clear any complete lines
      function clearLines() {
        let lineCleared = false;

for (let row = rows - 1; row >= 0; row--) {
          if (grid[row].every((cell) => cell)) {
            grid.splice(row, 1);
            grid.unshift(Array(columns).fill(0));
            score += 10;
            lineCleared = true;
          }
        }

if (lineCleared) {
          updateScore();
        }
      }

// Update the score display
      function updateScore() {
        document.getElementById("score").innerText = score;
      }

let piece = pieces[Math.floor(Math.random() * pieces.length)];
      let x = Math.floor(columns / 2) - Math.floor(piece[0].length / 2);
      let y = 0;
      let gameOver = false;

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

if (!gameOver) {
          drawGrid();
          drawPiece();
        } else {
          context.fillStyle = "#FFF";
          context.font = "40px Arial";
          context.fillText("Game Over", 70, canvas.height / 2);
        }

requestAnimationFrame(draw);
      }

function moveDown() {
        if (!canPlace(piece, x, y + 1)) {
          placePiece(piece, x, y);
          piece = pieces[Math.floor(Math.random() * pieces.length)];
          x = Math.floor(columns / 2) - Math.floor(piece[0].length / 2);
          y = 0;
          gameOver = !canPlace(piece, x, y);
          return;
        }

y++;
      }

function moveLeft() {
        if (canPlace(piece, x - 1, y)) {
          x--;
        }
      }

function moveRight() {
        if (canPlace(piece, x + 1, y)) {
          x++;
        }
      }

function rotatePiece() {
        const rotatedPiece = piece[0].map((_, i) => piece.map((row) => row[i])).reverse();

if (canPlace(rotatedPiece, x, y)) {
          piece = rotatedPiece;
        }
      }

document.addEventListener("keydown", (event) => {
        if (gameOver) {
          return;
        }

switch (event.keyCode) {
          case 37: // Left arrow
            moveLeft();
            break;
          case 38: // Up arrow
            rotatePiece();
            break;
          case 39: // Right arrow
            moveRight();
            break;
          case 40: // Down arrow
            moveDown();
            break;
        }
      });

// Touch controls for mobile devices
      let touchStartX = 0;
      let touchStartY = 0;
      const touchSensitivity = 30;

document.addEventListener("touchstart", (event) => {
        if (gameOver) {
          return;
        }

const touch = event.touches[0];
        touchStartX = touch.clientX;
        touchStartY = touch.clientY;
      });

document.addEventListener("touchmove", (event) => {
        if (gameOver) {
          return;
        }

if (event.cancelable) {
          event.preventDefault();
        }

const touch = event.touches[0];
        const deltaX = touch.clientX - touchStartX;
        const deltaY = touch.clientY - touchStartY;

if (Math.abs(deltaX) > touchSensitivity) {
          touchStartX = touch.clientX;
          deltaX > 0 ? moveRight() : moveLeft();
        }

if (Math.abs(deltaY) > touchSensitivity) {
          touchStartY = touch.clientY;
          deltaY > 0 ? moveDown() : rotatePiece();
        }
      });

updateScore();
      draw();
      setInterval(moveDown, 1000); // Automatic downward movement every 1 second
    </script>
  </body>
</html>
```