AI game creator

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

No:39657

←

Prev Next

→

異型テトリス
Developer User17762｜Date and time 24/1/29 18:49:07
Build time 43.054 sec｜Game capacity 8.267KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>異型テトリス</title>
    <style>
        #game-board {
            width: 300px;
            height: 600px;
            border: 3px solid black;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

.tetromino {
            width: 30px;
            height: 30px;
            display: inline-block;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// ゲーム状態を管理するためのクラス
        class Game {
            constructor() {
                this.board = [];
                this.currentTetromino = null;
                this.interval = null;
                this.score = 0;
            }

// ゲームを開始する処理
            start() {
                this.board = Array.from({length: 20}, () => Array(10).fill(0));

this.currentTetromino = this.createRandomTetromino();
                this.interval = setInterval(() => {
                    this.moveDown();
                }, 500);

this.draw();
            }

// テトロミノを移動する処理
            moveLeft() {
                this.currentTetromino.x--;
                if (!this.isValidMove()) {
                    this.currentTetromino.x++;
                }
            }

moveRight() {
                this.currentTetromino.x++;
                if (!this.isValidMove()) {
                    this.currentTetromino.x--;
                }
            }

moveDown() {
                this.currentTetromino.y++;
                if (!this.isValidMove()) {
                    this.currentTetromino.y--;
                    this.fixTetromino();
                    this.clearLines();
                    this.currentTetromino = this.createRandomTetromino();
                    if (!this.isValidMove()) {
                        clearInterval(this.interval);
                        alert("Game Over");
                        return;
                    }
                }
                this.draw();
            }

// テトロミノを回転する処理
            rotate() {
                let rotatedShape = [];
                for (let i = 0; i < this.currentTetromino.shape[0].length; i++) {
                    rotatedShape[i] = [];
                    for (let j = 0; j < this.currentTetromino.shape.length; j++) {
                        rotatedShape[i][j] = this.currentTetromino.shape[j][this.currentTetromino.shape[0].length - i - 1];
                    }
                }

let temp = this.currentTetromino.shape;
                this.currentTetromino.shape = rotatedShape;
                if (!this.isValidMove()) {
                    this.currentTetromino.shape = temp;
                }
            }

// テトロミノの移動が可能かどうかを判定する処理
            isValidMove() {
                let tetromino = this.currentTetromino;
                for (let i = 0; i < tetromino.shape.length; i++) {
                    for (let j = 0; j < tetromino.shape[i].length; j++) {
                        if (tetromino.shape[i][j] !== 0) {
                            if (tetromino.x + j < 0 ||
                                tetromino.x + j >= 10 ||
                                tetromino.y + i >= 20 ||
                                this.board[tetromino.y + i][tetromino.x + j] !== 0) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

// テトロミノを固定する処理
            fixTetromino() {
                let tetromino = this.currentTetromino;
                for (let i = 0; i < tetromino.shape.length; i++) {
                    for (let j = 0; j < tetromino.shape[i].length; j++) {
                        if (tetromino.shape[i][j] !== 0) {
                            this.board[tetromino.y + i][tetromino.x + j] = tetromino.color;
                        }
                    }
                }
            }

// 横一列が揃っているか判定し、揃ったら消す処理
            clearLines() {
                for (let i = this.board.length - 1; i >= 0; i--) {
                    let isLineFull = this.board[i].every(cell => cell !== 0);
                    if (isLineFull) {
                        this.score += 10;
                        this.board.splice(i, 1);
                        this.board.unshift(Array(10).fill(0));
                    }
                }
            }

// ランダムなテトロミノを生成する処理
            createRandomTetromino() {
                const tetrominos = [
                    [[1, 1, 1, 1]],
                    [[1, 1], [1, 1]],
                    [[1, 1, 1], [0, 1, 0]],
                    [[1, 1, 0], [0, 1, 1]],
                    [[0, 1, 1], [1, 1, 0]],
                    [[1, 1, 0], [0, 1, 0], [0, 1, 0]],
                    [[1, 0, 0], [1, 1, 1]]
                ];

const colors = [
                    "🔴", "🟣", "🔵", "🟡", "🟢", "🟠", "🟤"
                ];

let shape = tetrominos[Math.floor(Math.random() * tetrominos.length)];
                let color = colors[Math.floor(Math.random() * colors.length)];
                return new Tetromino(shape, color);
            }

// ゲーム状態を描画する処理
            draw() {
                let gameBoardElement = document.getElementById("game-board");
                gameBoardElement.innerHTML = "";

this.board.forEach((row, rowIndex) => {
                    row.forEach((cell, columnIndex) => {
                        if (cell !== 0) {
                            let tetrominoElement = document.createElement("div");
                            tetrominoElement.className = "tetromino";
                            tetrominoElement.innerText = cell;
                            tetrominoElement.style.left = `${columnIndex * 30}px`;
                            tetrominoElement.style.top = `${rowIndex * 30}px`;
                            gameBoardElement.appendChild(tetrominoElement);
                        }
                    });
                });

// ゲームを開始する
        let game = new Game();
        game.start();

// スマートフォンの操作によるテトロミノの移動を実装する
        document.addEventListener("keydown", (event) => {
            switch (event.key) {
                case "ArrowLeft":
                    game.moveLeft();
                    break;
                case "ArrowRight":
                    game.moveRight();
                    break;
                case "ArrowDown":
                    game.moveDown();
                    break;
                case "ArrowUp":
                    game.rotate();
                    break;
            }
        });
    </script>
</body>
</html>