AI game creator

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

No:27719

←

Prev Next

→

テトリス2
Developer User13711｜Date and time 23/12/8 15:34:26
Build time 62.138 sec｜Game capacity 7.507KB｜

Script

了解しました。以下にテトリスのゲームを実装したHTMLファイルを示します。

このHTMLファイルをブラウザで開くと、テトリスのゲームがプレイできます。スマートフォンでも操作可能です。なお、ゲームの進行は矢印キーで行われます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下にテトリスのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        #board {
            width: 200px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .block {
            width: 19.8px;
            height: 19.8px;
            position: absolute;
        }
        
    </style>
</head>
<body>
    <div id="board"></div>
    
    <script>
        const board = document.getElementById("board");
        const boardWidth = 10;
        const boardHeight = 20;
        const blockSize = 20;
        const colors = ["🟥", "🟨", "🟩", "🟦", "🟪", "🟧", "🟫"];
        
        let boardState = Array.from({length: boardHeight}, () => Array(boardWidth).fill(""));
        let currentPiece = null;
        let currentPieceX = 0;
        let currentPieceY = 0;
        let intervalId = null;
        
        function createPiece() {
            const pieces = [
                [[1, 1, 1, 1]],
                [[1, 1], [1, 1]],
                [[1, 1, 1], [0, 1, 0]],
                [[0, 1, 1], [1, 1, 0]],
                [[1, 1, 0], [0, 1, 1]],
                [[1, 1, 1], [1, 0, 0]],
                [[1, 1, 1], [0, 0, 1]]
            ];
            
            const randomIndex = Math.floor(Math.random() * pieces.length);
            const piece = pieces[randomIndex];
            
            return piece;
        }
        
        function drawBlocks() {
            board.innerHTML = "";
            
            for (let y = 0; y < boardHeight; y++) {
                for (let x = 0; x < boardWidth; x++) {
                    if (boardState[y][x] !== "") {
                        const block = document.createElement("div");
                        block.className = "block";
                        block.style.top = (y * blockSize) + "px";
                        block.style.left = (x * blockSize) + "px";
                        block.innerHTML = boardState[y][x];
                        board.appendChild(block);
                    }
                }
            }
        }
        
        function drawCurrentPiece() {
            const piece = currentPiece;
            
            for (let y = 0; y < piece.length; y++) {
                for (let x = 0; x < piece[y].length; x++) {
                    if (piece[y][x] === 1) {
                        const block = document.createElement("div");
                        block.className = "block";
                        block.style.top = ((currentPieceY + y) * blockSize) + "px";
                        block.style.left = ((currentPieceX + x) * blockSize) + "px";
                        block.innerHTML = colors[Math.floor(Math.random() * colors.length)];
                        board.appendChild(block);
                    }
                }
            }
        }
        
        function checkCollision() {
            const piece = currentPiece;
            
            for (let y = 0; y < piece.length; y++) {
                for (let x = 0; x < piece[y].length; x++) {
                    if (piece[y][x] === 1) {
                        const newX = currentPieceX + x;
                        const newY = currentPieceY + y;
                        
                        if (
                            newY >= boardHeight || 
                            boardState[newY][newX] !== ""
                        ) {
                            return true;
                        }
                    }
                }
            }
            
            return false;
        }
        
        function mergePiece() {
            const piece = currentPiece;
            
            for (let y = 0; y < piece.length; y++) {
                for (let x = 0; x < piece[y].length; x++) {
                    if (piece[y][x] === 1) {
                        const boardX = currentPieceX + x;
                        const boardY = currentPieceY + y;
                        
                        boardState[boardY][boardX] = colors[Math.floor(Math.random() * colors.length)];
                    }
                }
            }
        }
        
        function removeCompletedRows() {
            for (let y = boardHeight - 1; y >= 0; y--) {
                if (boardState[y].every(cell => cell !== "")) {
                    boardState.splice(y, 1);
                    boardState.unshift(Array(boardWidth).fill(""));
                }
            }
        }
        
        function update() {
            currentPieceY++;
            
            if (checkCollision()) {
                currentPieceY--;
                
                mergePiece();
                removeCompletedRows();
                
                if (boardState[0].some(cell => cell !== "")) {
                    alert("Game Over");
                    clearInterval(intervalId);
                    return;
                }
                
                currentPiece = createPiece();
                currentPieceX = Math.floor(boardWidth / 2) - Math.floor(currentPiece[0].length / 2);
                currentPieceY = 0;
            }
        }
        
        function moveLeft() {
            currentPieceX--;
            
            if (checkCollision()) {
                currentPieceX++;
            }
        }
        
        function moveRight() {
            currentPieceX++;
            
            if (checkCollision()) {
                currentPieceX--;
            }
        }
        
        function rotate() {
            const piece = currentPiece;
            const newPiece = piece[0].map((_, i) => piece.map(row => row[i])).reverse();
            const newPieceWidth = newPiece[0].length;
            const newPieceHeight = newPiece.length;
            const newX = currentPieceX + Math.floor((currentPiece[0].length - newPieceWidth) / 2);
            
            if (newX < 0 || newX + newPieceWidth > boardWidth) {
                return;
            }
            
            currentPiece = newPiece;
            currentPieceX = newX;
            
            if (checkCollision()) {
                currentPiece = piece;
                currentPieceX = currentPieceX + 1;
            }
        }
        
        function handleKeyDown(event) {
            switch(event.key) {
                case "ArrowLeft":
                    moveLeft();
                    break;
                case "ArrowRight":
                    moveRight();
                    break;
                case "ArrowDown":
                    update();
                    break;
                case "ArrowUp":
                    rotate();
                    break;
            }
        }
        
        function startGame() {
            document.addEventListener("keydown", handleKeyDown);
            
            currentPiece = createPiece();
            currentPieceX = Math.floor(boardWidth / 2) - Math.floor(currentPiece[0].length / 2);
            
            intervalId = setInterval(() => {
                update();
                drawBlocks();
                drawCurrentPiece();
            }, 1000);
        }
        
        startGame();
    </script>
</body>
</html>
```