Make a rich Tetris. High quality effects when you erase blocks.'s game

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

No:10837

113

←

Prev Next

→

Make a rich Tetris. High quality effects when you ..ALL
Developer User3352｜Date and time 23/8/4 12:21:21
Build time 62.094 sec｜Game capacity 8.924KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>リッチなテトリス</title>
    <style>
        body {
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 6em;
        }
        .block {
            width: 1em;
            height: 1em;
            border: 2px solid #fff;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #tetris-container {
            width: 20em;
            height: 40em;
            border: 2px solid #fff;
            display: flex;
            flex-wrap: wrap;
            background-color: #000;
            position: relative;
        }
        .effect {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            animation: effectFadeOut 1s;
        }
        @keyframes effectFadeOut {
            from { opacity: 1 }
            to { opacity: 0 }
        }
    </style>
</head>
<body>
    <div id="tetris-container">
    
    </div>
    
    <script>
        // テトリスのフィールドの幅と高さ
        const FIELD_WIDTH = 10;
        const FIELD_HEIGHT = 20;
        
        // テトリスのブロックの形状
        const BLOCKS = [
            [[1, 1, 1, 1]],                      // I
            [[1, 1], [1, 1]],                    // O
            [[1, 1, 0], [0, 1, 1]],              // S
            [[0, 1, 1], [1, 1, 0]],              // Z
            [[1, 1, 1], [0, 1, 0]],              // T
            [[1, 1, 1], [1, 0, 0]],              // L
            [[1, 1, 1], [0, 0, 1]]               // J
        ];
        
        // テトリスのブロックの色
        const COLORS = ["red", "yellow", "green", "blue", "purple", "orange", "cyan"];
        
        // テトリスのフィールド描画
        function drawField() {
            let html = "";
            for (let y = 0; y < FIELD_HEIGHT; y++) {
                for (let x = 0; x < FIELD_WIDTH; x++) {
                    let classes = "block";
                    html += `<div class="${classes}"></div>`;
                }
            }
            document.getElementById("tetris-container").innerHTML = html;
        }
        
        // テトリスのブロックを描画
        function drawBlock() {
            for (let y = 0; y < 4; y++) {
                for (let x = 0; x < 4; x++) {
                    if (block[y] && block[y][x]) {
                        const blockElement = document.createElement("div");
                        blockElement.classList.add("block");
                        blockElement.style.backgroundColor = currentColor;
                        blockElement.style.left = (currentX + x) + "em";
                        blockElement.style.top = (currentY + y) + "em";
                        document.getElementById("tetris-container").appendChild(blockElement);
                    }
                }
            }
        }
        
        // ブロックの衝突判定
        function isCollision() {
            for (let y = 0; y < 4; y++) {
                for (let x = 0; x < 4; x++) {
                    if (block[y] && block[y][x]) {
                        if (currentY + y >= FIELD_HEIGHT) {
                            return true;
                        }
                        if (currentX + x < 0 || currentX + x >= FIELD_WIDTH) {
                            return true;
                        }
                        if (field[currentY + y][currentX + x]) {
                            return true;
                        }
                    }
                }
            }
            return false;
        }
        
        // ブロックをフィールドに固定
        function fixBlock() {
            for (let y = 0; y < 4; y++) {
                for (let x = 0; x < 4; x++) {
                    if (block[y] && block[y][x]) {
                        field[currentY + y][currentX + x] = 1;
                    }
                }
            }
        }
        
        // 行が揃ったかチェック
        function checkLine() {
            let fullLines = [];
            for (let y = 0; y < FIELD_HEIGHT; y++) {
                if (field[y].every(block => block === 1)) {
                    fullLines.push(y);
                }
            }
            return fullLines;
        }
        
        // 行を消去
        function deleteLine(line) {
            field.splice(line, 1);
            field.unshift(Array(FIELD_WIDTH).fill(0));
        }
        
        // ブロックを左に移動
        function moveLeft() {
            currentX--;
            if (isCollision()) {
                currentX++;
            }
        }
        
        // ブロックを右に移動
        function moveRight() {
            currentX++;
            if (isCollision()) {
                currentX--;
            }
        }
        
        // ブロックを下に移動
        function moveDown() {
            currentY++;
            if (isCollision()) {
                currentY--;
                
                fixBlock();
                
                const linesToDelete = checkLine();
                if (linesToDelete.length > 0) {
                    linesToDelete.forEach(line => deleteLine(line));
                    showEffect();
                }
                
                createNewBlock();
                
                if (isCollision()) {
                    alert("Game Over!");
                    reset();
                }
            }
        }
        
        // ブロックを回転
        function rotate() {
            const temp = block;
            block = block[0].map((_, i) => block.map(row => row[i])).reverse();
            if (isCollision()) {
                block = temp;
            }
        }
        
        // ブロックが下まで降りてくる
        function drop() {
            while (!isCollision()) {
                moveDown();
            }
        }
        
        // 新しいブロックを作成
        function createNewBlock() {
            currentX = Math.floor(FIELD_WIDTH / 2) - 1;
            currentY = -1;
            currentColor = COLORS[Math.floor(Math.random() * COLORS.length)];
            block = BLOCKS[Math.floor(Math.random() * BLOCKS.length)];
        }
        
        // エフェクトを表示
        function showEffect() {
            const effectElement = document.createElement("div");
            effectElement.classList.add("effect");
            document.getElementById("tetris-container").appendChild(effectElement);
            setTimeout(() => {
                effectElement.remove();
            }, 1000);
        }
        
        // リセット
        function reset() {
            field = Array.from(Array(FIELD_HEIGHT), () => Array(FIELD_WIDTH).fill(0));
            createNewBlock();
        }
        
        // ゲーム開始
        function startGame() {
            drawField();
            createNewBlock();
            setInterval(() => {
                moveDown();
                drawField();
                drawBlock();
            }, 500);
        }
        
        // ゲーム開始
        startGame();
        
        // スマホ操作
        document.addEventListener("touchstart", touchStart, false);
        document.addEventListener("touchend", touchEnd, false);
        
        let touchPosition = null;
        let touchStartTime = null;
        const TAP_THRESHOLD = 200; // タップ判定の時間閾値
        
        // タッチ開始
        function touchStart(event) {
            touchPosition = event.changedTouches[0].clientX;
            touchStartTime = new Date().getTime();
        }
        
        // タッチ終了
        function touchEnd(event) {
            const touchEndPosition = event.changedTouches[0].clientX;
            const touchDuration = new Date().getTime() - touchStartTime;
            
            const touchDistance = touchEndPosition - touchPosition;
            
            // 左にスワイプ
            if (touchDistance < 0) {
                if (touchDuration < TAP_THRESHOLD) {
                    moveLeft();
                }
            }
            
            // 右にスワイプ
            if (touchDistance > 0) {
                if (touchDuration < TAP_THRESHOLD) {
                    moveRight();
                }
            }
            
            // 下にスワイプ
            if (touchDistance === 0) {
                if (touchDuration < TAP_THRESHOLD) {
                    rotate();
                }
                else {
                    drop();
                }
            }
        }
    </script>
</body>
</html>