AI game creator

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

No:10994

←

Prev Next

→

Tetris
Developer User4715｜Date and time 23/8/6 12:27:25
Build time 39.855 sec｜Game capacity 5.934KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        #tetris {
            width: 200px;
            height: 400px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas id="tetris"></canvas>
    <script>
        // Mendapatkan elemen canvas dari halaman HTML
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');

// Mengatur ukuran blok dan kotak matrix
        const blockSize = 40;
        const matrixWidth = 10;
        const matrixHeight = 20;

// Membuat matrix tetris dengan ukuran matrixHeight x matrixWidth yang terdiri dari nilai 0 (kosong)
        const matrix = [];
        for (let row = 0; row < matrixHeight; row++) {
            matrix[row] = [];
            for (let col = 0; col < matrixWidth; col++) {
                matrix[row][col] = 0;
            }
        }

// Posisi awal dan bentuk blok
        let currentX = 3;
        let currentY = 0;
        let currentPiece = [[1, 1, 1, 1]];

// Menggambar blok pada posisi x, y
        function drawBlock(x, y) {
            context.fillStyle = 'blue';
            context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
            context.strokeStyle = 'black';
            context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }

// Menggambar seluruh matrix tetris
        function drawMatrix() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (let row = 0; row < matrixHeight; row++) {
                for (let col = 0; col < matrixWidth; col++) {
                    if (matrix[row][col]) {
                        drawBlock(col, row);
                    }
                }
            }
        }

// Menggabungkan blok dengan matrix tetris
        function mergeMatrix() {
            for (let row = 0; row < currentPiece.length; row++) {
                for (let col = 0; col < currentPiece[row].length; col++) {
                    if (currentPiece[row][col]) {
                        matrix[currentY + row][currentX + col] = currentPiece[row][col];
                    }
                }
            }
            checkLines();
            generatePiece();
        }

// Mengecek apakah ada baris yang terisi penuh
        function checkLines() {
            for (let row = matrixHeight - 1; row >= 0; row--) {
                if (matrix[row].every(block => block === 1)) {
                    matrix.splice(row, 1);
                    matrix.unshift(Array(matrixWidth).fill(0));
                }
            }
        }

// Mengecek apakah blok sudah mencapai batas bawah atau bertabrakan dengan blok lain
        function checkCollision() {
            for (let row = 0; row < currentPiece.length; row++) {
                for (let col = 0; col < currentPiece[row].length; col++) {
                    if (
                        currentPiece[row][col] &&
                        (matrix[currentY + row] && matrix[currentY + row][currentX + col] !== 0)
                    ) {
                        return true;
                    }
                }
            }
            return false;
        }

// Menggerakkan blok ke bawah setiap beberapa detik
        function moveDown() {
            currentY++;
            if (checkCollision()) {
                currentY--;
                mergeMatrix();
            }
        }

// Menggerakkan blok ke kiri
        function moveLeft() {
            currentX--;
            if (checkCollision()) {
                currentX++;
            }
        }

// Menggerakkan blok ke kanan
        function moveRight() {
            currentX++;
            if (checkCollision()) {
                currentX--;
            }
        }

// Memutar blok
        function rotatePiece() {
            const prevPiece = currentPiece;
            currentPiece = currentPiece[0].map((_, i) => currentPiece.map(row => row[i])).reverse();
            if (checkCollision()) {
                currentPiece = prevPiece;
            }
        }

// Mengambil piece baru secara acak
        function generatePiece() {
            const pieces = [
                [[1]],
                [[1, 1, 1, 1]],
                [[1, 0], [1, 1], [1, 0]],
                [[1, 1], [1, 1]],
                [[1, 1, 0], [0, 1, 1]],
                [[0, 1, 1], [1, 1, 0]],
                [[1, 1, 1], [0, 1, 0]],
            ];
            currentPiece = pieces[Math.floor(Math.random() * pieces.length)];
            currentX = Math.floor(matrixWidth / 2) - Math.floor(currentPiece[0].length / 2);
            currentY = 0;
            if (checkCollision()) {
                alert('Game Over');
                clearInterval(gameInterval);
            }
        }

// Menggerakkan blok berdasarkan input pengguna (dalam hal ini tombol)
        function handleKeyPress(event) {
            if (event.code === 'ArrowUp') {
                rotatePiece();
            }
            if (event.code === 'ArrowLeft') {
                moveLeft();
            }
            if (event.code === 'ArrowRight') {
                moveRight();
            }
            if (event.code === 'ArrowDown') {
                moveDown();
            }
            drawMatrix();
        }

function initializeGame() {
            document.addEventListener('keydown', handleKeyPress);
            generatePiece();
            gameInterval = setInterval(() => {
                moveDown();
                drawMatrix();
            }, 700);
        }

// Menggambar kotak matrix
        context.fillStyle = 'white';
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.strokeStyle = 'black';
        context.strokeRect(0, 0, canvas.width, canvas.height);

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