テトリス's game | AI game creator

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

No:40140

109

テトリス
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:22:18
Build time 22.55 sec｜Game capacity 7.34KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋ゲームアプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
        }

#game-board {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 600px;
            margin: 10px auto;
            border: 1px solid #ccc;
            background-color: #fff;
        }

.block {
            width: 29.5px;
            height: 29.5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

<script>
        document.addEventListener("DOMContentLoaded", function () {
            const gameBoard = document.getElementById("game-board");
            let board = createBoard();
            let score = 0;
            let timerId = null;
            let currentPiece = null;
            let currentPosition = {
                x: 0,
                y: 0
            };

const pieces = [
                [0x4460, 0x0e80, 0xc440, 0x2e00], // Tetrimino I
                [0x4620, 0x6c00, 0x8e00, 0x6440], // Tetrimino T
                [0x6600, 0x6600, 0x6600, 0x6600], // Tetrimino O
                [0x0622, 0x0644, 0x00c6, 0x0262], // Tetrimino J
                [0x6220, 0x17c0, 0x2230, 0x0740], // Tetrimino L
                [0x0630, 0x26c0, 0x0360, 0x4620], // Tetrimino S
                [0x0360, 0x4620, 0x0630, 0x26c0]  // Tetrimino Z
            ];

const colors = [
                "#00bfff", // Tetrimino I - Cyan
                "#800080", // Tetrimino T - Purple
                "#ffff00", // Tetrimino O - Yellow
                "#0000ff", // Tetrimino J - Blue
                "#ffa500", // Tetrimino L - Orange
                "#00ff00", // Tetrimino S - Green
                "#ff0000"  // Tetrimino Z - Red
            ];

function createBoard() {
                let board = [];
                for (let row = 0; row < 20; row++) {
                    let rowArr = [];
                    for (let col = 0; col < 10; col++) {
                        rowArr.push(0);
                    }
                    board.push(rowArr);
                }
                return board;
            }

function drawBoard() {
                gameBoard.innerHTML = '';
                board.forEach(function (row) {
                    row.forEach(function (col) {
                        let block = document.createElement("div");
                        block.className = "block";
                        block.style.backgroundColor = col !== 0 ? colors[col - 1] : '';
                        gameBoard.appendChild(block);
                    });
                });
            }

function drawPiece() {
                currentPiece.forEach(function (row, i) {
                    row.forEach(function (col, j) {
                        if (col) {
                            let x = currentPosition.x + j;
                            let y = currentPosition.y + i;
                            if (x >= 0 && x < 10 && y < 20) {
                                board[y][x] = col;
                            }
                        }
                    });
                });
            }

function clearLines() {
                let linesCleared = 0;
                for (let row = 19; row >= 0; row--) {
                    if (board[row].every(col => col !== 0)) {
                        board.splice(row, 1);
                        board.unshift(new Array(10).fill(0));
                        linesCleared++;
                    }
                }
                score += linesCleared * 10;
                if (linesCleared > 0) {
                    document.getElementById("score").textContent = score;
                }
            }

function rotatePiece() {
                let rotatedPiece = [];
                currentPiece[0].forEach((col, i) => {
                    let newRow = [];
                    currentPiece.forEach(row => {
                        newRow.unshift(row[i]);
                    });
                    rotatedPiece.push(newRow);
                });
                return rotatedPiece;
            }

function checkCollision(x, y, piece) {
                for (let i = 0; i < piece.length; i++) {
                    for (let j = 0; j < piece[i].length; j++) {
                        if (piece[i][j] && (board[y + i] && (board[y + i][x + j] !== 0))) {
                            return true;
                        }
                    }
                }
                return false;
            }

function movePiece(direction) {
                let newX = currentPosition.x + direction;
                if (!checkCollision(newX, currentPosition.y, currentPiece)) {
                    currentPosition.x = newX;
                }
            }

function dropPiece() {
                let newY = currentPosition.y + 1;
                if (!checkCollision(currentPosition.x, newY, currentPiece)) {
                    currentPosition.y = newY;
                } else {
                    drawPiece();
                    clearLines();
                    if (currentPosition.y <= 1) {
                        gameOver();
                    } else {
                        currentPosition = {
                            x: 0,
                            y: 0
                        };
                        currentPiece = getRandomPiece();
                    }
                }
            }

function getRandomPiece() {
                let pieceIndex = Math.floor(Math.random() * pieces.length);
                return JSON.parse(JSON.stringify(pieces[pieceIndex])); // Clone the piece to avoid modifying the original
            }

function gameOver() {
                clearInterval(timerId);
                alert("Game Over! Your score is: " + score);
            }

function handleKeyPress(event) {
                switch (event.keyCode) {
                    case 37: // Left arrow key
                        movePiece(-1);
                        break;
                    case 39: // Right arrow key
                        movePiece(1);
                        break;
                    case 40: // Down arrow key
                        dropPiece();
                        break;
                    case 38: // Up arrow key
                        let rotatedPiece = rotatePiece();
                        if (!checkCollision(currentPosition.x, currentPosition.y, rotatedPiece)) {
                            currentPiece = rotatedPiece;
                        }
                        break;
                }
                drawBoard();
            }

function startGame() {
                board = createBoard();
                score = 0;
                currentPiece = getRandomPiece();
                currentPosition = {
                    x: 0,
                    y: 0
                };
                document.getElementById("score").textContent = score;
                timerId = setInterval(dropPiece, 1000);
                document.addEventListener("keydown", handleKeyPress);
            }

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