AI game creator

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

No:16214

←

Prev Next

→

Tetris
Developer User7186｜Date and time 23/9/16 18:33:13
Build time 44.82 sec｜Game capacity 6.117KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris</title>
    <style>
      body {
        background-color: #000;
        margin: 0;
        overflow: hidden;
      }
  
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="tetris" width="300" height="600"></canvas>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const canvas = document.getElementById("tetris");
        const context = canvas.getContext("2d");

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

let score = 0;
        let gameOver = false;

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

function rotateMatrix(matrix) {
          const rotatedMatrix = matrix.map((_, i) => matrix.map(column => column[i]));
          return rotatedMatrix.map(row => row.reverse());
        }

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

drawMatrix(gameGrid, { x: 0, y: 0 });
          drawMatrix(player.matrix, player.position);
        }

function update() {
          if (!gameOver) {
            if (playerDropCounter > playerDropInterval) {
              playerMoveDown();
            }
            playerDropCounter += 1;
          }
        }

function playerMoveLeft() {
          player.position.x -= 1;
          if (detectCollision(player.matrix, player.position)) {
            player.position.x += 1;
          }
        }

function playerMoveRight() {
          player.position.x += 1;
          if (detectCollision(player.matrix, player.position)) {
            player.position.x -= 1;
          }
        }

function resetPlayer() {
          const tetrominos = [
            [[1], [1], [1], [1]],
            [[1, 1], [1, 1]],
            [[1, 0], [1, 0], [1, 1]],
            [[0, 1], [0, 1], [1, 1]],
            [[0, 1], [0, 1], [0, 1], [0, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
          ];

player.matrix = tetrominos[Math.floor(Math.random() * tetrominos.length)];
          player.position.y = 0;
          player.position.x = Math.floor(columns / 2) - Math.floor(player.matrix[0].length / 2);

if (detectCollision(player.matrix, player.position)) {
            gameOver = true;
          }
        }

function updateScore() {
          const scoreElement = document.getElementById("score");
          scoreElement.innerText = score;
        }

const gameGrid = createMatrix(columns, rows);
        const player = {
          matrix: null,
          position: { x: 0, y: 0 },
        };

let playerDropCounter = 0;
        const playerDropInterval = 30;

resetPlayer();
        updateScore();
        setInterval(() => {
          draw();
          update();
        }, 1000 / 20);
      });
    </script>
  </body>
</html>