AI game creator

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

No:50771

208

←

Prev Next

→

Tetris
Developer User21399｜Date and time 24/3/9 14:32:21
Build time 9.908 sec｜Game capacity 2.39KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="600"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

const blockWidth = 30;
    const blockHeight = 30;

let board = [];
    let shape;
    let posX = 3;
    let posY = 0;

function createBoard() {
      for (let i = 0; i < 20; i++) {
        board[i] = new Array(10).fill(0);
      }
    }

function drawSquare(x, y, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
      ctx.strokeStyle = "black";
      ctx.strokeRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
    }

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

for (let i = 0; i < board.length; i++) {
        for (let j = 0; j < board[i].length; j++) {
          if (board[i][j]) {
            drawSquare(j, i, board[i][j]);
          }
        }
      }

for (let i = 0; i < shape.length; i++) {
        for (let j = 0; j < shape[i].length; j++) {
          if (shape[i][j]) {
            drawSquare(posX + j, posY + i, "blue");
          }
        }
      }
    }

createBoard();
    shape = [[1, 1], [1, 1]];

setInterval(function() {
      posY++;

if (isColliding()) {
        for (let i = 0; i < shape.length; i++) {
          for (let j = 0; j < shape[i].length; j++) {
            if (shape[i][j]) {
              board[posY - 1 + i][posX + j] = "blue";
            }
          }
        }

posY = 0;
      }

draw();
    }, 500);