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

No:5886

5282

←

Prev Next

→

Tetris 🟦🟦🟦🟦 Rules Blocks fall from above. When a b..ALL
Developer もちきなこ｜Date and time 23/7/1 0:59:24
Build time 49.433 sec｜Game capacity 6.825KB｜

Script

了解です。以下にテトリスのゲームを作成したプログラムを記載します。

Tetris

このプログラムは、HTMLファイル内に`
`タグを使用してJavaScriptのコードを記述しています。テトリスの操作方法は、矢印キーでブロックを左右に移動させることが可能です。また、回転ボタンをタップすると、ブロックが90度回転します。ゲームループ内でブロックが自動的に下に移動し、横一列が揃うとその行が消え、スコアが加算されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下にテトリスのゲームを作成したプログラムを記載します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
        #board {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            border: 1px solid black;
        }

.cell {
            width: 40px;
            height: 40px;
            border: 1px solid lightgray;
            background-color: white;
        }

#score {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Tetris</h1>
    <div id="board"></div>
    <button onclick="rotateBlock()">回転</button>
    <div id="score"></div>

const ROWS = 20;
        const COLS = 10;
        const CELL_SIZE = 40;
        const EMPTY = 'white';
        const BLOCKS = [
            [[1, 1], [1, 1]],  // 四角
            [[1, 1, 1, 1]],  // 横長
            [[1, 0, 0], [1, 1, 1]],  // L字
            [[0, 0, 1], [1, 1, 1]],  // 逆L字
            [[1, 1, 0], [0, 1, 1]],  // S字
            [[0, 1, 1], [1, 1, 0]],  // 逆S字
            [[1, 1, 1], [0, 1, 0]],  // T字
        ];

let boardData = [];
        let currentBlock = [];
        let currentX = 0;
        let currentY = 0;
        let score = 0;

function createBlock() {
            const randomIndex = Math.floor(Math.random() * BLOCKS.length);
            currentBlock = BLOCKS[randomIndex];
            currentX = Math.floor(COLS / 2) - Math.floor(currentBlock[0].length / 2);
            currentY = 0;
        }

function rotateBlock() {
            clearBlock();
            const rotatedBlock = currentBlock[0].map((_, i) => currentBlock.map(row => row[i])).reverse();
            if (!isCollision(0, 0, rotatedBlock)) {
                currentBlock = rotatedBlock;
            }
            drawBlock();
            drawBoard();
        }

function gameLoop() {
            moveBlock('down');
            setTimeout(gameLoop, 500);
        }

document.addEventListener('keydown', (event) => {
            switch (event.key) {
                case 'ArrowLeft':
                    moveBlock('left');
                    break;
                case 'ArrowRight':
                    moveBlock('right');
                    break;
                case 'ArrowDown':
                    moveBlock('down');
                    break;
            }
        });

initialize();
        createBlock();
        gameLoop();
    </script>
</body>
</html>
```

このプログラムは、HTMLファイル内に`<script>`タグを使用してJavaScriptのコードを記述しています。テトリスの操作方法は、矢印キーでブロックを左右に移動させることが可能です。また、回転ボタンをタップすると、ブロックが90度回転します。ゲームループ内でブロックが自動的に下に移動し、横一列が揃うとその行が消え、スコアが加算されます。