テトリスのようなゲーム's game | AI game creator

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

No:15665

85

テトリスのようなゲーム
Developer User6722｜Date and time 23/9/10 15:23:28
Build time 61.352 sec｜Game capacity 9.285KB｜

了解しました。以下にテトリスのようなゲームの実装例を示します。

Score: 0

このコードは、JavaScriptを使用してブラウザ上でテトリスのようなゲームをプレイするためのHTMLファイルです。スマホで操作することも可能です。このコードでは、ドキュメント内のidが"game-board"の要素をゲームボードとし、ゲームボード上でブロックを操作します。JavaScriptでゲームのロジックを実装し、HTML要素を操作してゲームを描画します。ゲームボード上には、広さ10×20のブロックが表示されます。ブロックはキーボードの矢印キーで移動したり回転させたりすることができます。ブロックが下まで移動すると固定され、行が揃ったら消えます。ゲームオーバーになるとリロードされます。以上のコードをHTMLファイルに保存し、ブラウザで開くことでテトリスのようなゲームをプレイすることができます。

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

了解しました。以下にテトリスのようなゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        #game-board {
            width: 200px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        .block {
            width: 20px;
            height: 20px;
            background-color: #00b140;
            position: absolute;
        }
        #score {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="score">Score: <span id="score-value">0</span></div>

<script>
        const gameBoard = document.getElementById("game-board");
        const scoreValue = document.getElementById("score-value");
        const width = 10;
        const height = 20;
        let board = [];
        let score = 0;
        let currentBlock = [];

// ゲームボードの初期化
        for (let row = 0; row < height; row++) {
            for (let col = 0; col < width; col++) {
                let block = document.createElement("div");
                block.className = "block";
                block.style.left = col * 20 + "px";
                block.style.top = row * 20 + "px";
                gameBoard.appendChild(block);
                board.push(block);
            }
        }

// ブロックの作成
        function createBlock() {
            const blocks = [
                [
                    [1, 1],
                    [1, 1]
                ],
                [
                    [1, 1, 1, 1]
                ],
                [
                    [1, 1, 0],
                    [0, 1, 1]
                ],
                [
                    [0, 1, 1],
                    [1, 1, 0]
                ],
                [
                    [1, 1, 1],
                    [0, 1, 0]
                ],
                [
                    [1, 1, 1],
                    [1, 0, 0]
                ],
                [
                    [1, 1, 1],
                    [0, 0, 1]
                ]
            ];

const randomIndex = Math.floor(Math.random() * blocks.length);
            const block = blocks[randomIndex];
            const row = Math.floor((height - block.length) / 2);
            const col = Math.floor((width - block[0].length) / 2);

return {
                block: block,
                row: row,
                col: col
            };
        }

// ブロックの描画
        function drawBlock() {
            currentBlock.block.forEach((row, i) => {
                row.forEach((cell, j) => {
                    if (cell === 1) {
                        const index = (currentBlock.row + i) * width + (currentBlock.col + j);
                        board[index].style.backgroundColor = "#00b140";
                    }
                });
            });
        }

// ブロックの削除
        function clearBlock() {
            currentBlock.block.forEach((row, i) => {
                row.forEach((cell, j) => {
                    if (cell === 1) {
                        const index = (currentBlock.row + i) * width + (currentBlock.col + j);
                        board[index].style.backgroundColor = "";
                    }
                });
            });
        }

// ブロックが移動可能かチェック
        function isValidMove() {
            for (let i = 0; i < currentBlock.block.length; i++) {
                for (let j = 0; j < currentBlock.block[0].length; j++) {
                    if (currentBlock.block[i][j] === 1) {
                        const row = currentBlock.row + i;
                        const col = currentBlock.col + j;
                        if (row < 0 || row >= height || col < 0 || col >= width || board[row * width + col].style.backgroundColor !== "") {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

// ブロックを回転させる
        function rotateBlock() {
            const newBlock = [];
            for (let col = 0; col < currentBlock.block[0].length; col++) {
                const newRow = [];
                for (let row = currentBlock.block.length - 1; row >= 0; row--) {
                    newRow.push(currentBlock.block[row][col]);
                }
                newBlock.push(newRow);
            }
            currentBlock.block = newBlock;
        }

// ブロックを移動させる
        function moveBlock(dx, dy) {
            clearBlock();
            currentBlock.col += dx;
            currentBlock.row += dy;
            if (!isValidMove()) {
                currentBlock.col -= dx;
                currentBlock.row -= dy;
            }
            drawBlock();
        }

// ブロックを下に移動させる
        function dropBlock() {
            moveBlock(0, 1);
        }

// ブロックを固定する
        function lockBlock() {
            for (let i = 0; i < currentBlock.block.length; i++) {
                for (let j = 0; j < currentBlock.block[0].length; j++) {
                    if (currentBlock.block[i][j] === 1) {
                        const row = currentBlock.row + i;
                        const col = currentBlock.col + j;
                        const index = row * width + col;
                        board[index].style.backgroundColor = "#00b140";
                    }
                }
            }
        }

// 行が揃っているかチェック
        function checkRows() {
            for (let row = height - 1; row >= 0; row--) {
                let isRowFilled = true;
                for (let col = 0; col < width; col++) {
                    if (board[row * width + col].style.backgroundColor === "") {
                        isRowFilled = false;
                        break;
                    }
                }
                if (isRowFilled) {
                    score += 10;
                    for (let col = 0; col < width; col++) {
                        const index = row * width + col;
                        board[index].style.backgroundColor = "";
                    }
                    shiftRows(row - 1);
                }
            }
            scoreValue.textContent = score;
        }

// 行を下にシフトする
        function shiftRows(startRow) {
            for (let row = startRow; row >= 0; row--) {
                for (let col = 0; col < width; col++) {
                    const index = row * width + col;
                    const color = window.getComputedStyle(board[index + width]).backgroundColor;
                    board[index].style.backgroundColor = color;
                    board[index + width].style.backgroundColor = "";
                }
            }
        }

// 初期ブロックの生成
        currentBlock = createBlock();
        drawBlock();

// キーボード操作
        document.addEventListener("keydown", (event) => {
            switch (event.key) {
                case "ArrowLeft":
                    moveBlock(-1, 0); // 左に移動
                    break;
                case "ArrowRight":
                    moveBlock(1, 0); // 右に移動
                    break;
                case "ArrowDown":
                    dropBlock(); // 下に移動
                    break;
                case "ArrowUp":
                    rotateBlock(); // 回転
                    break;
            }
        });

// 自動でブロックを下に移動
        setInterval(() => {
            moveBlock(0, 1);
        }, 1000);

// ブロックが下まで達したら固定する
        setInterval(() => {
            if (!isValidMove()) {
                lockBlock();
                checkRows();
                currentBlock = createBlock();
                drawBlock();
                if (!isValidMove()) {
                    // ゲームオーバー
                    alert("Game Over!");
                    location.reload();
                }
            }
        }, 10);
    </script>
</body>
</html>
```

このコードは、JavaScriptを使用してブラウザ上でテトリスのようなゲームをプレイするためのHTMLファイルです。スマホで操作することも可能です。

このコードでは、ドキュメント内のidが"game-board"の要素をゲームボードとし、ゲームボード上でブロックを操作します。JavaScriptでゲームのロジックを実装し、HTML要素を操作してゲームを描画します。

ゲームボード上には、広さ10×20のブロックが表示されます。ブロックはキーボードの矢印キーで移動したり回転させたりすることができます。ブロックが下まで移動すると固定され、行が揃ったら消えます。ゲームオーバーになるとリロードされます。

以上のコードをHTMLファイルに保存し、ブラウザで開くことでテトリスのようなゲームをプレイすることができます。