テトリスのようなゲーム。枠の隣に次降ってくるものを表示してください。降ってくるものを枠内に表示してください。's game

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

No:15668

←

Prev Next

→

テトリスのようなゲーム。枠の隣に次降ってくるものを表示してください。降ってくるものを枠内に表示してく..ALL
Developer User6722｜Date and time 23/9/10 15:29:20
Build time 55.973 sec｜Game capacity 8.984KB｜

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 {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    #tetris {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    #board {
        width: 300px;
        height: 600px;
        border: 2px solid #000;
        background-color: #f5f5f5;
        position: relative;
    }
    #next {
        width: 100px;
        height: 100px;
        position:absolute;
        top: 10px;
        left: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #000;
        background-color: #f5f5f5;
    }
    .cell {
        width: 29.5px;
        height: 29.5px;
        border: 0.5px solid #ccc;
        position: absolute;
        background-color: #fff;
    }
    .block {
        width: 30px;
        height: 30px;
        position: absolute;
        border: 0.5px solid #ccc;
        background-color: #000;
    }
</style>
</head>
<body>
<div id="tetris">
    <div id="board"></div>
    <div id="next"></div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const board = document.getElementById("board");
        const next = document.getElementById("next");
        const width = 10;
        let cells = [];
        let currentShape = [];
        let currentShapeIndex = 0;
        let currentX = 4;
        let currentY = 0;
        let timerId;
        
        function createBoard() {
            for (let y = 0; y < 20; y++) {
                for (let x = 0; x < width; x++) {
                    const cell = document.createElement("div");
                    cell.className = "cell";
                    cell.style.top = y * 30 + "px";
                    cell.style.left = x * 30 + "px";
                    board.appendChild(cell);
                }
            }
            cells = Array.from(document.getElementsByClassName("cell"));
        }
        
        function createShape() {
            const shapes = [
                ["0000", "1111", "0000", "0000"],
                ["011", "011", "000"],
                ["110", "011", "000"],
                ["011", "110", "000"],
                ["010", "111", "000"],
                ["100", "111", "000"],
                ["001", "111", "000"]
            ];
            const shape = shapes[Math.floor(Math.random() * shapes.length)];
            currentShape = shape;
            currentShapeIndex = 0;
            drawShape();
            drawNextShape(shape);
        }
        
        function drawShape() {
            for (let y = 0; y < currentShape.length; y++) {
                for (let x = 0; x < currentShape[y].length; x++) {
                    if (currentShape[y][x] === "1") {
                        const block = document.createElement("div");
                        block.className = "block";
                        block.style.top = (currentY + y) * 30 + "px";
                        block.style.left = (currentX + x) * 30 + "px";
                        board.appendChild(block);
                    }
                }
            }
        }
        
        function drawNextShape(shape) {
            const nextShape = document.getElementById("next");
            nextShape.innerHTML = "";
            for (let y = 0; y < shape.length; y++) {
                for (let x = 0; x < shape[y].length; x++) {
                    if (shape[y][x] === "1") {
                        const block = document.createElement("div");
                        block.className = "block";
                        block.style.top = y * 30 + "px";
                        block.style.left = x * 30 + "px";
                        nextShape.appendChild(block);
                    }
                }
            }
        }
        
        function removeShape() {
            const blocks = Array.from(document.getElementsByClassName("block"));
            for (let i = 0; i < blocks.length; i++) {
                blocks[i].remove();
            }
        }
        
        function moveDown() {
            if (checkCollision(0, 1, currentShape)) {
                removeShape();
                currentY++;
                drawShape();
            } else {
                lockShape();
                removeFullRows();
                createShape();
                if (checkCollision(0, 0, currentShape)) {
                    gameOver();
                }
            }
        }
        
        function lockShape() {
            for (let y = 0; y < currentShape.length; y++) {
                for (let x = 0; x < currentShape[y].length; x++) {
                    if (currentShape[y][x] === "1") {
                        const index = (currentY + y) * width + (currentX + x);
                        cells[index].classList.add("locked");
                    }
                }
            }
        }
        
        function removeFullRows() {
            let fullRows = [];
            for (let y = 0; y < 20; y++) {
                let rowFilled = true;
                for (let x = 0; x < width; x++) {
                    if (!cells[y * width + x].classList.contains("locked")) {
                        rowFilled = false;
                        break;
                    }
                }
                if (rowFilled) {
                    fullRows.push(y);
                }
            }
            for (let i = 0; i < fullRows.length; i++) {
                for (let x = 0; x < width; x++) {
                    cells.splice(fullRows[i] * width + x, 1);
                }
            }
            for (let i = fullRows.length - 1; i >= 0; i--) {
                for (let j = 0; j < width; j++) {
                    cells[j].classList.remove("locked");
                }
                for (let j = 0; j < fullRows[i]; j++) {
                    for (let k = 0; k < width; k++) {
                        const cell = cells[j * width + k];
                        const nextCell = cells[(j + 1) * width + k];
                        if (cell.classList.contains("locked") && !nextCell.classList.contains("locked")) {
                            nextCell.classList.add("locked");
                            cell.classList.remove("locked");
                        }
                    }
                }
            }
        }
        
        function checkCollision(dx, dy, shape) {
            for (let y = 0; y < shape.length; y++) {
                for (let x = 0; x < shape[y].length; x++) {
                    if (shape[y][x] === "1") {
                        const nextX = currentX + x + dx;
                        const nextY = currentY + y + dy;
                        if (nextX < 0 || nextX >= width || nextY >= 20) {
                            return false;
                        }
                        if (nextY >= 0 && cells[nextY * width + nextX].classList.contains("locked")) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }
        
        function gameOver() {
            clearInterval(timerId);
            cells.forEach(cell => cell.classList.remove("locked"));
            alert("Game Over!");
        }
        
        createBoard();
        createShape();
        timerId = setInterval(moveDown, 1000);
        
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                if (checkCollision(-1, 0, currentShape)) {
                    removeShape();
                    currentX--;
                    drawShape();
                }
            } else if (event.key === "ArrowRight") {
                if (checkCollision(1, 0, currentShape)) {
                    removeShape();
                    currentX++;
                    drawShape();
                }
            } else if (event.key === "ArrowDown") {
                if (checkCollision(0, 1, currentShape)) {
                    removeShape();
                    currentY++;
                    drawShape();
                }
            } else if (event.key === "ArrowUp") {
                rotateShape();
            }
        });
        
        function rotateShape() {
            const rotatedShape = [];
            for (let x = 0; x < currentShape[0].length; x++) {
                let row = "";
                for (let y = currentShape.length - 1; y >= 0; y--) {
                    row += currentShape[y][x];
                }
                rotatedShape.push(row);
            }
            if (!checkCollision(0, 0, rotatedShape)) {
                return;
            }
            removeShape();
            currentShape = rotatedShape;
            if (currentShapeIndex >= currentShape.length) {
                currentShapeIndex = 0;
            }
            drawShape();
        }
    });
</script>
</body>
</html>