AI game creator

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

No:10652

107

←

Prev Next

→

Tetris
Developer User4590｜Date and time 23/8/1 14:39:59
Build time 62.762 sec｜Game capacity 9.284KB｜

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 {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

canvas {
            display: block;
            margin: 0 auto;
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="240" height="400"></canvas>

const ROW = 20;
            const COL = COLUMN = 10;
            const SQ = squareSize = 20;
            const VACANT = "#000";

// Draw a square on the canvas
            function drawSquare(x, y, color) {
                context.fillStyle = color;
                context.fillRect(x * SQ, y * SQ, SQ, SQ);

context.strokeStyle = "#333";
                context.strokeRect(x * SQ, y * SQ, SQ, SQ);
            }

// Create the game board
            let board = [];
            for (r = 0; r < ROW; r++) {
                board[r] = [];
                for (c = 0; c < COL; c++) {
                    board[r][c] = VACANT;
                }
            }

// Draw the game board
            function drawBoard() {
                for (r = 0; r < ROW; r++) {
                    for (c = 0; c < COL; c++) {
                        drawSquare(c, r, board[r][c]);
                    }
                }
            }

drawBoard();

// Tetrominoes and their colors
            const PIECES = [
                [Z, "#f44336"],
                [S, "#4caf50"],
                [T, "#9c27b0"],
                [O, "#ff9800"],
                [L, "#3f51b5"],
                [I, "#2196f3"],
                [J, "#ff5722"]
            ];

// Generate random tetromino
            function randomPiece() {
                let r = randomN = Math.floor(Math.random() * PIECES.length);
                return new Piece(PIECES[r][0], PIECES[r][1]);
            }

// The Piece object
            function Piece(tetromino, color) {
                this.tetromino = tetromino;
                this.color = color;

this.tetrominoN = 0; // We start from the first pattern
                this.activeTetromino = this.tetromino[this.tetrominoN];

// Set the initial position of the piece
                this.x = 3;
                this.y = -2;
            }

// Fill the board with the tetromino shape
            Piece.prototype.fill = function(color) {
                for (r = 0; r < this.activeTetromino.length; r++) {
                    for (c = 0; c < this.activeTetromino.length; c++) {
                        // Only draw occupied squares
                        if (this.activeTetromino[r][c]) {
                            drawSquare(this.x + c, this.y + r, color);
                        }
                    }
                }
            };

// Draw a tetromino on the board
            Piece.prototype.draw = function() {
                this.fill(this.color);
            };

// Undraw the tetromino
            Piece.prototype.unDraw = function() {
                this.fill(VACANT);
            };

// Move the piece down
            Piece.prototype.moveDown = function() {
                if (!this.collision(0, 1, this.activeTetromino)) {
                    this.unDraw();
                    this.y++;
                    this.draw();
                } else {
                    // Lock the piece in place
                    this.lock();
                    piece = randomPiece();
                }
            };

// Move the piece right
            Piece.prototype.moveRight = function() {
                if (!this.collision(1, 0, this.activeTetromino)) {
                    this.unDraw();
                    this.x++;
                    this.draw();
                }
            };

// Move the piece left
            Piece.prototype.moveLeft = function() {
                if (!this.collision(-1, 0, this.activeTetromino)) {
                    this.unDraw();
                    this.x--;
                    this.draw();
                }
            };

// Rotate the piece
            Piece.prototype.rotate = function() {
                let nextPattern = this.tetromino[(this.tetrominoN + 1) % this.tetromino.length];
                let kick = 0;

if (this.collision(0, 0, nextPattern)) {
                    // Check for wall kick
                    if (this.x > COL / 2) {
                        // Right wall
                        kick = -1;
                    } else {
                        // Left wall
                        kick = 1;
                    }
                }

if (!this.collision(kick, 0, nextPattern)) {
                    this.unDraw();
                    this.x += kick;
                    this.tetrominoN = (this.tetrominoN + 1) % this.tetromino.length;
                    this.activeTetromino = this.tetromino[this.tetrominoN];
                    this.draw();
                }
            };

// Lock the piece on the board
            Piece.prototype.lock = function() {
                for (r = 0; r < this.activeTetromino.length; r++) {
                    for (c = 0; c < this.activeTetromino.length; c++) {
                        // Skip vacant squares
                        if (!this.activeTetromino[r][c]) {
                            continue;
                        }

// Lock the piece
                        if (this.y + r < 0) {
                            // Game over
                            alert("Game Over!");
                            break;
                        }

board[this.y + r][this.x + c] = this.color;
                    }
                }

// Remove filled rows
                for (r = 0; r < ROW; r++) {
                    let isRowFull = true;
                    for (c = 0; c < COL; c++) {
                        isRowFull = isRowFull && (board[r][c] != VACANT);
                    }

if (isRowFull) {
                        // Move down all rows above it
                        for (y = r; y > 1; y--) {
                            for (c = 0; c < COL; c++) {
                                board[y][c] = board[y - 1][c];
                            }
                        }

// Set the top row to vacant
                        for (c = 0; c < COL; c++) {
                            board[0][c] = VACANT;
                        }

// Increment the score
                        score += 10;
                    }
                }

// Update the board
                drawBoard();

// Update the score
                scoreElement.innerHTML = score;
            };

// Detect collision between the piece and the walls/blocks
            Piece.prototype.collision = function(x, y, piece) {
                for (r = 0; r < piece.length; r++) {
                    for (c = 0; c < piece.length; c++) {
                        // Skip empty squares
                        if (!piece[r][c]) {
                            continue;
                        }

// Coordinates after movement
                        let newX = this.x + c + x;
                        let newY = this.y + r + y;

// Check for collisions
                        if (newX < 0 || newX >= COL || newY >= ROW) {
                            return true;
                        }

// Skip the newY < 0 condition as this will keep the pieces locked at the top of the board
                        if (newY < 0) {
                            continue;
                        }

// Check if there is already a locked piece at that position
                        if (board[newY][newX] != VACANT) {
                            return true;
                        }
                    }
                }

return false;
            };

// Initialize the game
            let piece = randomPiece();
            let score = 0;

// Control the piece
            document.addEventListener("keydown", control);

// Game loop
            function update() {
                piece.moveDown();
                drawBoard();
                requestAnimationFrame(update);
            }

update();

});
    </script>
</body>
</html>