AI game creator

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

No:13900

107

←

Prev Next

→

Tetris
Developer User6046｜Date and time 23/8/30 10:45:31
Build time 46.074 sec｜Game capacity 8.326KB｜

Script

Score: 0

←

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>
        #game-board {
            margin: 0 auto;
            width: 300px;
            height: 600px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid #aaa;
            position: absolute;
            box-sizing: border-box;
        }
        
        #score {
            text-align: center;
            font-size: 18px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="score">Score: <span id="score-value">0</span></div>
    <script>
        const boardWidth = 10;
        const boardHeight = 20;
        const cellSize = 30;
        const tetriminos = [
            [
                [1, 1, 1, 1] // I shape
            ],
            [
                [1, 1, 1], // L shape
                [0, 0, 1]
            ],
            [
                [1, 1, 1], // J shape
                [1, 0, 0]
            ],
            [
                [1, 1, 1], // T shape
                [0, 1, 0]
            ],
            [
                [1, 1], // O shape
                [1, 1]
            ],
            [
                [1, 1, 0], // S shape
                [0, 1, 1]
            ],
            [
                [0, 1, 1], // Z shape
                [1, 1, 0]
            ]
        ];
        const tetriminoColors = [
            "#FF0000", // Red
            "#0000FF", // Blue
            "#FFA500", // Orange
            "#800080", // Purple
            "#FFFF00", // Yellow
            "#00FF00", // Green
            "#FFC0CB" // Pink
        ];

let gameBoard = [];
        let currentTetrimino = null;
        let currentTetriminoShape = [];
        let currentTetriminoColor = "";
        let currentX = 0;
        let currentY = 0;
        let score = 0;
        let gameStarted = false;

function drawGameBoard() {
            const gameBoardElement = document.getElementById('game-board');
            gameBoardElement.innerHTML = "";

for (let row = 0; row < boardHeight; row++) {
                for (let col = 0; col < boardWidth; col++) {
                    let cell = document.createElement('div');
                    cell.className = "cell";
                    cell.style.top = (row * cellSize) + "px";
                    cell.style.left = (col * cellSize) + "px";
                    cell.style.backgroundColor = gameBoard[row][col];
                    gameBoardElement.appendChild(cell);
                }
            }
        }

function createNewTetrimino() {
            const randomIndex = Math.floor(Math.random() * tetriminos.length);
            currentTetriminoShape = tetriminos[randomIndex];
            currentTetriminoColor = tetriminoColors[randomIndex];
            currentX = Math.floor((boardWidth - currentTetriminoShape[0].length) / 2);
            currentY = 0;
            currentTetrimino = rotateTetrimino(currentTetriminoShape, 0);
        }

function rotateTetrimino(tetrimino, rotation) {
            let newTetrimino = [];
            const numRows = tetrimino.length;
            const numCols = tetrimino[0].length;

for (let col = 0; col < numCols; col++) {
                newTetrimino[col] = [];
                for (let row = 0; row < numRows; row++) {
                    newTetrimino[col][numRows - row - 1] = tetrimino[row][col];
                }
            }

return newTetrimino;
        }

function validMove(dx, dy, rotation) {
            const tetrimino = rotateTetrimino(currentTetriminoShape, rotation);
            const numRows = tetrimino.length;
            const numCols = tetrimino[0].length;

for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    if (tetrimino[row][col] === 1) {
                        const newX = currentX + col + dx;
                        const newY = currentY + row + dy;

if (newX < 0 || newX >= boardWidth || newY >= boardHeight || gameBoard[newY][newX] !== "none") {
                            return false;
                        }
                    }
                }
            }

return true;
        }

function placeTetrimino() {
            const numRows = currentTetrimino.length;
            const numCols = currentTetrimino[0].length;

for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    if (currentTetrimino[row][col] === 1) {
                        const targetX = currentX + col;
                        const targetY = currentY + row;
                        gameBoard[targetY][targetX] = currentTetriminoColor;
                    }
                }
            }

clearLines();
            createNewTetrimino();

if (!validMove(0, 0, 0)) {
                gameStarted = false;
                alert("Game Over! Your score: " + score);
                score = 0;
                createGameBoard();
                drawGameBoard();
            }
        }

document.addEventListener("keydown", function (event) {
            switch (event.keyCode) {
                case 37: // left arrow
                    move("left");
                    break;
                case 39: // right arrow
                    move("right");
                    break;
                case 40: // down arrow
                    move("down");
                    break;
                case 38: // up arrow
                    move("rotate");
                    break;
            }
        });

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