AI game creator

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

No:25233

←

Prev Next

→

テトリス
Developer User12318｜Date and time 23/11/19 16:41:55
Build time 329.376 sec｜Game capacity 6.643KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #222;
        }
        
        canvas {
            display: block;
            margin: 20px auto;
            background-color: #111;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
        // テトリスのブロックを表す配列
        const tetrominoes = [
            [[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]]
        ];

// ブロックの色
        const colors = [
            "#FF0000", // 赤
            "#00FF00", // 緑
            "#0000FF", // 青
            "#FFFF00", // 黄
            "#FF00FF", // ピンク
            "#00FFFF"  // シアン
        ];

// ゲームフィールドのサイズ
        const fieldWidth = 10;
        const fieldHeight = 20;

// ブロックのサイズ
        const blockSize = 20;

// ゲームフィールド
        let field = [];
        for (let i = 0; i < fieldHeight; i++) {
            field.push(new Array(fieldWidth).fill(0));
        }

// アクティブなブロック
        let activeTetromino = null;
        let activeX = 0;
        let activeY = 0;

// ブロックの回転
        function rotateTetromino() {
            const tetrominoCopy = [...activeTetromino];

// 行列を反転する
            for (let i = 0; i < tetrominoCopy.length; i++) {
                for (let j = 0; j < i; j++) {
                    [tetrominoCopy[i][j], tetrominoCopy[j][i]] = [tetrominoCopy[j][i], tetrominoCopy[i][j]];
                }
            }

// 行を反転する
            tetrominoCopy.forEach(row => row.reverse());

return tetrominoCopy;
        }

// ブロックをフィールドに固定する
        function lockTetromino() {
            activeTetromino.forEach((row, rowIndex) => {
                row.forEach((value, colIndex) => {
                    if (value !== 0) {
                        field[activeY + rowIndex][activeX + colIndex] = value;
                    }
                });
            });
        }

// ブロックの衝突判定
        function isCollision() {
            for (let i = 0; i < activeTetromino.length; i++) {
                for (let j = 0; j < activeTetromino[i].length; j++) {
                    if (activeTetromino[i][j] !== 0 && (field[activeY + i] && field[activeY + i][activeX + j]) !== 0) {
                        return true;
                    }
                }
            }
            return false;
        }

// ランダムなテトロミノを生成
        function generateRandomTetromino() {
            const randomIndex = Math.floor(Math.random() * tetrominoes.length);
            return tetrominoes[randomIndex];
        }

// ブロックを表示する
        function drawTetromino() {
            activeTetromino.forEach((row, rowIndex) => {
                row.forEach((value, colIndex) => {
                    if (value !== 0) {
                        drawBlock(activeX + colIndex, activeY + rowIndex, colors[value - 1]);
                    }
                });
            });
        }

// ゲームフィールドを表示する
        function drawField() {
            field.forEach((row, rowIndex) => {
                row.forEach((value, colIndex) => {
                    if (value !== 0) {
                        drawBlock(colIndex, rowIndex, colors[value - 1]);
                    }
                });
            });
        }

// ブロックを描画する
        function drawBlock(x, y, color) {
            const canvas = document.getElementById("tetris");
            const context = canvas.getContext("2d");

context.fillStyle = color;
            context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }

// ゲームを更新する
        function update() {
            activeY++;

if (isCollision()) {
                activeY--;
                lockTetromino();
                activeTetromino = generateRandomTetromino();
                activeX = Math.floor(fieldWidth / 2) - Math.floor(activeTetromino[0].length / 2);
                activeY = 0;
            }

clearField();
            drawTetromino();
            drawField();
        }

// ゲームフィールドをクリアする
        function clearField() {
            const canvas = document.getElementById("tetris");
            const context = canvas.getContext("2d");

context.clearRect(0, 0, canvas.width, canvas.height);
        }

// キーボードの入力を受け取る
        function handleKeyDown(event) {
            switch (event.key) {
                case "ArrowLeft":
                    activeX--;
                    if (isCollision()) {
                        activeX++;
                    }
                    break;
                case "ArrowRight":
                    activeX++;
                    if (isCollision()) {
                        activeX--;
                    }
                    break;
                case "ArrowDown":
                    activeY++;
                    if (isCollision()) {
                        activeY--;
                    }
                    break;
                case "ArrowUp":
                    const rotatedTetromino = rotateTetromino();
                    if (!isCollision(rotatedTetromino)) {
                        activeTetromino = rotatedTetromino;
                    }
                    break;
                default:
                    break;
            }
        }

// ゲームを開始する
        function startGame() {
            activeTetromino = generateRandomTetromino();
            activeX = Math.floor(fieldWidth / 2) - Math.floor(activeTetromino[0].length / 2);
            activeY = 0;

setInterval(update, 1000);

document.addEventListener("keydown", handleKeyDown);
        }

// ゲームを初期化する
        function initGame() {
            const canvas = document.getElementById("tetris");

canvas.width = fieldWidth * blockSize;
            canvas.height = fieldHeight * blockSize;

startGame();
        }

initGame();
    </script>
</body>
</html>