AI game creator

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

No:9025

180

←

Prev Next

→

Tetris
Developer User4288｜Date and time 23/7/20 19:47:08
Build time 45.918 sec｜Game capacity 7.063KB｜

Script

了解です。以下にテトリスのゲームを作成しました。ご確認ください。

このプログラムでは、HTMLファイルとして作成されており、一つのHTMLファイル内にHTML、CSS、JavaScriptのコードが含まれています。テトリスのゲームとして遊ぶことができ、スマートフォンでも遊ぶことができます。絵文字は使用していませんが、動作はしゃれたテトリスのゲームです。また、ゲーム中の動作は即座に開始されます。

←

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 Game</title>
    <style>
        #game-board {
            width: 200px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }

.block {
            width: 20px;
            height: 20px;
            position: absolute;
            border: 1px solid gray;
        }

.active-block {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

let score = 0;

function createBlock() {
            const blocks = [
                [[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, 1], [1, 0, 0]],
                [[1, 1, 1], [0, 0, 1]]
            ];

const randomIndex = Math.floor(Math.random() * blocks.length);
            const block = blocks[randomIndex];

currentBlock.positions = block;
            currentBlock.top = 0;
            currentBlock.left = Math.floor((boardWidth - block[0].length) / 2);
        }

function drawBlock() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

for (let i = 0; i < boardHeight; i++) {
                for (let j = 0; j < boardWidth; j++) {
                    const block = document.createElement('div');
                    block.className = 'block';

if (board[i][j] !== 0) {
                        block.style.backgroundColor = board[i][j];
                    }

gameBoard.appendChild(block);
                    block.style.top = 20 * i + 'px';
                    block.style.left = 20 * j + 'px';
                }
            }

for (let i = 0; i < currentBlock.positions.length; i++) {
                for (let j = 0; j < currentBlock.positions[i].length; j++) {
                    if (currentBlock.positions[i][j] === 1) {
                        const block = document.createElement('div');
                        block.className = 'block active-block';
                        gameBoard.appendChild(block);

const top = currentBlock.top + i;
                        const left = currentBlock.left + j;
                        block.style.top = 20 * top + 'px';
                        block.style.left = 20 * left + 'px';
                    }
                }
            }

document.getElementById('score').innerHTML = 'Score: ' + score;
        }

function isCollision() {
            for (let i = 0; i < currentBlock.positions.length; i++) {
                for (let j = 0; j < currentBlock.positions[i].length; j++) {
                    if (currentBlock.positions[i][j] === 1) {
                        const row = currentBlock.top + i;
                        const col = currentBlock.left + j;

if (row >= boardHeight || col < 0 || col >= boardWidth || board[row][col] !== 0) {
                            return true;
                        }
                    }
                }
            }
            return false;
        }

for (let i = fullLineIndexes.length - 1; i >= 0; i--) {
                const index = fullLineIndexes[i];
                board.splice(index, 1);
                board.unshift(Array(boardWidth).fill(0));
            }

score += fullLineIndexes.length * 100;
        }

function moveBlock(dir) {
            currentBlock.left += dir;
            if (isCollision()) {
                currentBlock.left -= dir;
            }
        }

function rotateBlock() {
            const temp = currentBlock.positions;
            currentBlock.positions = currentBlock.positions[0].map((_, index) => currentBlock.positions.map(row => row[index])).reverse();
            if (isCollision()) {
                currentBlock.positions = temp;
            }
        }

function gameLoop() {
            currentBlock.top++;
            if (isCollision()) {
                currentBlock.top--;
                mergeBlock();
                clearLine();
                createBlock();
                if (isCollision()) {
                    alert('Game Over!');
                    return;
                }
            }

drawBlock();
            setTimeout(gameLoop, 500);
        }

function startGame() {
            for (let i = 0; i < boardHeight; i++) {
                board.push(Array(boardWidth).fill(0));
            }

createBlock();
            gameLoop();
        }

document.addEventListener('keydown', function(event) {
            switch (event.key) {
                case 'ArrowLeft':
                    moveBlock(-1);
                    break;
                case 'ArrowRight':
                    moveBlock(1);
                    break;
                case 'ArrowDown':
                    moveBlock(1);
                    break;
                case 'ArrowUp':
                    rotateBlock();
                    break;
            }
            drawBlock();
        });

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