Cara Membuat Game Tetris dengan JavaScript

Posted on

Cara Membuat Game Tetris dengan JavaScript – Sobat Java, bagi kalian generasi 90-an, pasti tak asing lagi dengan permainan Tetris yang sangat populer ini. Biasanya permainan ini ditemukan di game bot atau konsol Nintendo, berikut kelasjava akan memberikan panduan membuat game tetris dengan JS.

Apa Itu Game Tetris?

Tetris adalah permainan menyusun balok, di mana setiap balok terdiri dari 4 kotak dengan bentuk berbeda dan muncul secara acak. Tugas Anda adalah menyusun setiap balok yang muncul dari atas ke bawah sehingga simetris (tidak ada celah).

Jika baris paling bawah memiliki setidaknya satu balok yang sejajar, maka Anda akan mendapatkan satu skor. Namun, jika tumpukan balok mencapai ujung atas, maka permainan dianggap selesai (game over). Selanjutnya, mari kita bersama-sama melangkah dalam tutorial ini untuk membuat game Tetris menggunakan JavaScript.

JavaScript merupakan salah satu bahasa pemrograman yang banyak digunakan oleh para pengembang game untuk membuat berbagai jenis permainan, mulai dari yang sederhana hingga yang kompleks. Di sini, kita akan menggunakan JavaScript untuk menciptakan permainan legendaris, yaitu Tetris.

Alat yang Dibutuhkan untuk Membuat Game Tetris dengan JavaScript

Sebelum memulai, pastikan Anda telah menyiapkan beberapa alat berikut:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Cara Membuat Game Tetris Sederhana dengan JavaScript

1. Siapkan Folder dan File

Buka editor teks pilihanmu dan buatlah folder khusus untuk proyek Game Tetris. Di dalam folder proyek tersebut, buat tiga file: index.html, style.css, dan script.js.

Baca Juga:   Cara Membuat Program Luas Segitiga dengan JavaScript

2. Coding HTML (index.html)

Buatlah file index.html dan tambahkan struktur dasar HTML untuk membuat permainan Tetris, untuk kodenya bisa salin dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game-container">
        <canvas id="gameCanvas" width="300" height="600"></canvas>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding CSS (style.css)

Buatlah file style.css untuk menambahkan tampilan yang menarik pada permainan Tetris, untuk kodenya bisa salin dibawah ini.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f7f7f7;
}

#game-container {
    width: 300px;
    height: 600px;
    border: 2px solid #333;
}

canvas {
    display: block;
    margin: 0 auto;
    border: 1px solid #333;
}

4. Coding JavaScript (script.js)

Buatlah file script.js dan tambahkan kode JavaScript untuk mengatur logika permainan Tetris, untuk kodenya bisa salin dibawah ini.

// Variabel global
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const blockWidth = 30;
const blockHeight = 30;
const boardWidth = 10;
const boardHeight = 20;
const gameSpeed = 500; // Milliseconds

// Array untuk menyimpan data papan permainan
let board = [];

// Inisialisasi papan permainan
function initBoard() {
    for (let row = 0; row < boardHeight; row++) {
        board[row] = [];
        for (let col = 0; col < boardWidth; col++) {
            board[row][col] = '';
        }
    }
}

// Fungsi untuk menggambar kotak
function drawBlock(x, y, color) {
    context.fillStyle = color;
    context.fillRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
    context.strokeStyle = '#333';
    context.strokeRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
}

// Fungsi untuk menggambar papan permainan
function drawBoard() {
    for (let row = 0; row < boardHeight; row++) {
        for (let col = 0; col < boardWidth; col++) {
            if (board[row][col] !== '') {
                drawBlock(col, row, board[row][col]);
            }
        }
    }
}

// Fungsi untuk menggambar bentuk yang sedang jatuh
function drawCurrentShape() {
    currentShape.forEach((block) => {
        drawBlock(block.x, block.y, block.color);
    });
}

// Fungsi untuk membuat bentuk baru secara acak
function generateRandomShape() {
    const shapes = [
        [[0, 0], [1, 0], [2, 0], [3, 0]], // I-shape
        [[0, 0], [0, 1], [1, 0], [1, 1]], // O-shape
        [[0, 0], [1, 0], [2, 0], [2, 1]], // L-shape
        [[0, 1], [1, 1], [2, 1], [2, 0]], // J-shape
        [[0, 1], [1, 1], [1, 0], [2, 0]], // S-shape
        [[0, 0], [1, 0], [1, 1], [2, 1]], // Z-shape
        [[0, 0], [1, 0], [2, 0], [1, 1]]  // T-shape
    ];
    const randomIndex = Math.floor(Math.random() * shapes.length);
    const randomShape = shapes[randomIndex];
    const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
    return randomShape.map(([x, y]) => ({ x, y, color: randomColor }));
}

// Fungsi untuk menurunkan bentuk yang sedang jatuh
function moveDown() {
    if (isValidMove(0, 1)) {
        currentShape.forEach((block) => block.y++);
    } else {
        currentShape.forEach((block) => {
            board[block.y][block.x] = block.color;
        });
        clearLines();
        currentShape = generateRandomShape();
        if (!isValidMove(0, 0)) {
            // Game Over
            clearInterval(gameLoop);
            alert('Game Over');
        }
    }
}

// Fungsi untuk menghapus baris yang sudah penuh
function clearLines() {
    let linesCleared = 0;
    for (let row = boardHeight - 1; row >= 0; row--) {
        if (board[row].every((cell) => cell !== '')) {
            board.splice(row, 1);
            board.unshift(Array(boardWidth).fill(''));
            linesCleared++;
            row++;
        }
    }
    if (linesCleared > 0) {
        // Update skor, jika diperlukan
    }
}

// Fungsi untuk memeriksa apakah gerakan valid
function isValidMove(dx, dy) {
    return currentShape.every((block) => {
        const nextX = block.x + dx;
        const nextY = block.y + dy;
        return (
            nextX >= 0 &&
            nextX < boardWidth &&
            nextY < boardHeight &&
            (nextY < 0 || board[nextY][nextX] === '')
        );
    });
}

// Fungsi untuk menggambar seluruh elemen game
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawBoard();
    drawCurrentShape();
}

// Fungsi utama
function main() {
    initBoard();
    currentShape = generateRandomShape();
    gameLoop = setInterval(() => {
        draw();
        moveDown();
    }, gameSpeed);
}

// Panggil fungsi main untuk memulai permainan
main();

5. Menjalankan Kode

Setelah semua kode ditulis jalankan kode tersebut dengan membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan klik kanan file index.html dan pilih “Open in Browser”.

Baca Juga:   Cara Membuat Objek JavaScript

6. Menampilkan Hasil

Selamat! Kamu telah berhasil membuat Game Tetris dengan JavaScript dan memudahkan tampilannya suapaya menarik menggunakan CSS, adapun tampilan ketika Game Over seperti dibawah ini.

Penutup

Jadi itulah panduan yang bisa kami berikan untuk cara membuat game Tetris dengan JavaScript dengan mudah. Semoga artikel ini dapat memberikan manfaat bagi kalian yang ingin memulai pembelajaran dalam pembuatan game menggunakan JavaScript.