Jumat, 11 April 2025

Penggunaan Logika dan Algoritma dalam Game Berbasis Web

1. Pengertian Logika dan Algoritma

  • Logika adalah dasar pengambilan keputusan dalam game. Misalnya: jika karakter menyentuh musuh, maka nyawa berkurang.

  • Algoritma adalah langkah-langkah sistematis yang dijalankan untuk mencapai suatu tujuan, seperti perhitungan skor, pengaturan gerak, dan deteksi tabrakan.

💻 STRUKTUR PEMBUATAN GAME

Kita akan menggunakan tiga file terpisah:

  1. index.html → struktur halaman

  2. style.css → tampilan visual

  3. script.js → logika dan algoritma game

🧱 1. File HTML (index.html)

html
<!DOCTYPE html>
<html>
<head>
    <title>Game Lompat</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Game Lompat</h1>
    <div id="gameArea">
        <div id="character"></div>
        <div id="obstacle"></div>
    </div>
    <p id="scoreDisplay">Skor: 0</p>

    <script src="script.js"></script>
</body>
</html>

🎨 2. File CSS (style.css)

css
#gameArea {
    width: 500px;
    height: 300px;
    border: 2px solid black;
    position: relative;
    overflow: hidden;
}

#character {
    width: 30px;
    height: 30px;
    background: blue;
    position: absolute;
    bottom: 10px;
    left: 50px;
}

#obstacle {
    width: 30px;
    height: 30px;
    background: red;
    position: absolute;
    bottom: 10px;
    right: 0;
    animation: moveObstacle 2s linear infinite;
}

@keyframes moveObstacle {
    from { right: 0; }
    to { right: 500px; }
}

⚙️ 3. File JavaScript (script.js)

javascript
let score = 0;

document.addEventListener("keydown", function(event) {
    const char = document.getElementById("character");
    if(event.code === "Space") {
        char.style.bottom = "100px";
        setTimeout(() => {
            char.style.bottom = "10px";
        }, 500);
    }
});

💾 Cara Menyimpan dan Menjalankan di Notepad

Langkah-langkah:

  1. Buka Notepad (atau Notepad++)

  2. Salin masing-masing kode ke Notepad

    • Simpan file HTML sebagai: index.html

    • Simpan file CSS sebagai: style.css

    • Simpan file JavaScript sebagai: script.js

  3. Pastikan ketiga file berada dalam folder yang sama

  4. Klik dua kali file index.html → akan terbuka di browser

🔗 Cara Menghubungkan File

  • CSS dihubungkan menggunakan:

    html
    <link rel="stylesheet" href="style.css">

  • JavaScript dihubungkan menggunakan:

    html
    <script src="script.js"></script>

 

Diposkan oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)