AI game creator

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

No:46164

105

←

Prev Next

→

Tetris
Developer User19956｜Date and time 24/2/23 20:41:05
Build time 30.441 sec｜Game capacity 7.729KB｜

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>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');

const ROW = 20;
        const COL = COLUMN = 10;
        const SQ = squareSize = 20;
        const VACANT = "WHITE"; // color of an empty square

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

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

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

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

drawBoard();

// the tetris pieces
        const pieces = [
            [Z, "red"],
            [S, "green"],
            [T, "yellow"],
            [O, "blue"],
            [L, "purple"],
            [I, "cyan"],
            [J, "orange"]
        ];

// generate random pieces
        function randomPiece() {
            let r = randomN = Math.floor(Math.random() * pieces.length) // 0 -> 6
            return new Piece(pieces[r][0], pieces[r][1]);
        }

let p = randomPiece();

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

this.tetrominoN = 0;
            this.activeTetromino = this.tetromino[this.tetrominoN];

this.x = 3;
            this.y = -2;
        }

// draw a piece to the board
        Piece.prototype.fill = function (color) {
            for (r = 0; r < this.activeTetromino.length; r++) {
                for (c = 0; c < this.activeTetromino.length; c++) {
                    // draw only occupied squares
                    if (this.activeTetromino[r][c]) {
                        drawSquare(this.x + c, this.y + r, color);
                    }
                }
            }
        }

// draw a piece to the board
        Piece.prototype.unfill = function () {
            this.fill(VACANT);
        }

Piece.prototype.moveDown = function () {
            if (!this.collides(0, 1, this.activeTetromino)) {
                this.unfill();
                this.y++;
                this.fill(this.color);
            } else {
                // lock down the piece and generate a new one
                this.lock();
                p = randomPiece();
            }
        }

Piece.prototype.moveRight = function () {
            if (!this.collides(1, 0, this.activeTetromino)) {
                this.unfill();
                this.x++;
                this.fill(this.color);
            }
        }

Piece.prototype.moveLeft = function () {
            if (!this.collides(-1, 0, this.activeTetromino)) {
                this.unfill();
                this.x--;
                this.fill(this.color);
            }
        }

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

if (this.collides(0, 0, nextPattern)) {
                if (this.x > COL / 2) {
                    kick = -1;
                } else {
                    kick = 1;
                }
            }

if (!this.collides(kick, 0, nextPattern)) {
                this.unfill();
                this.x += kick;
                this.tetrominoN = (this.tetrominoN + 1) % this.tetromino.length;
                this.activeTetromino = this.tetromino[this.tetrominoN];
                this.fill(this.color);
            }
        }

Piece.prototype.lock = function () {
            for (r = 0; r < this.activeTetromino.length; r++) {
                for (c = 0; c < this.activeTetromino.length; c++) {
                    if (!this.activeTetromino[r][c]) {
                        continue;
                    }

// pieces to lock on top = game over
                    if (this.y + r < 0) {
                        alert("Game Over");
                        // stop request animation frame
                        gameOver = true;
                        break;
                    }

// we lock the piece
                    board[this.y + r][this.x + c] = this.color;
                }
            }

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

if (isRowFull) {
                    for (y = r; y > 1; y--) {
                        for (c = 0; c < COL; c++) {
                            board[y][c] = board[y - 1][c];
                        }
                    }

for (c = 0; c < COL; c++) {
                        board[0][c] = VACANT;
                    }
                }
            }

drawBoard();
        }

// collision fucntion
        Piece.prototype.collides = function (x, y, piece) {
            for (r = 0; r < piece.length; r++) {
                for (c = 0; c < piece.length; c++) {
                    // if squares is empty, we skip it
                    if (!piece[r][c]) {
                        continue;
                    }

// coordinates of the piece after movement
                    let newX = this.x + c + x;
                    let newY = this.y + r + y;

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

// skip newY < 0; board[-1] will crush our game
                    if (newY < 0) {
                        continue;
                    }

// check if there is a locked piece already in place
                    if (board[newY][newX] != VACANT) {
                        return true;
                    }
                }
            }

return false;
        }

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

let dropStart = Date.now();
        let gameOver = false;

// drop every 1 sec
        function drop() {
            let now = Date.now();
            let delta = now - dropStart;

if (delta > 1000) {
                p.moveDown();
                dropStart = Date.now();
            }

if (!gameOver) {
                requestAnimationFrame(drop);
            }
        }

drop();
    </script>
</body>
</html>