Membuat Klon Candy Crush: Tutorial HTML, CSS, dan JavaScript

By
Selamat ketemu lagi kali ini kita ngga usah basa basi deh langsung aja kita simak materi bersama-sama jangan lupa untuk berdoa yah sahabat.
Ubah impian pengembangan game Anda menjadi kenyataan! Pelajari HTML, CSS, dan JavaScript untuk membuat tiruan Candy Crush Anda.



Selamat datang, calon pengembang game dan penggemar coding! Dalam dunia pengembangan web yang dinamis, membuat game interaktif Anda sendiri adalah sebuah seni sekaligus petualangan yang mendebarkan. Dalam panduan komprehensif ini, kita akan memulai perjalanan bersama untuk membangun tiruan Candy Crush dari awal menggunakan trio HTML, CSS, dan JavaScript yang canggih.

Melepaskan Kekuatan Teknologi Web
Candy Crush, dengan gameplaynya yang adiktif dan visualnya yang dinamis, telah memikat hati jutaan orang. Sekarang giliran Anda untuk terjun ke dunia pengembangan game dan mewujudkan ide kreatif Anda. Baik Anda seorang pemula yang ingin mempelajari dasar-dasarnya atau pembuat kode berpengalaman yang sedang mencari proyek baru, tutorial ini dirancang untuk memenuhi semua tingkat keahlian.

Apa yang ada di depan
Panduan kami akan membawa Anda langkah demi langkah melalui proses, mulai dari menyiapkan struktur dasar HTML hingga menambahkan elemen interaktif dengan JavaScript dan meningkatkan daya tarik visual menggunakan CSS.

Jadi, ambil alat pengkodean Anda, bebaskan imajinasi Anda, dan mari mulai perjalanan mengasyikkan dalam membuat klon Candy Crush Anda sendiri. Di akhir tutorial ini, Anda tidak hanya akan memiliki game yang berfungsi tetapi juga dasar yang kuat dalam pengembangan game web. Mari membuat kode dan menaklukkan!


Langkah 1 (Kode HTML):

Untuk memulai, pertama-tama kita perlu membuat file HTML dasar. Dalam file ini, kami akan menyertakan struktur utama untuk game kami.

Setelah membuat file, cukup tempelkan kode berikut ke file Anda. Pastikan untuk menyimpan dokumen HTML Anda dengan ekstensi .html agar dapat dilihat dengan baik di browser web.


Mari kita uraikan kodenya:


  1. <!DOCTYPE html> : Deklarasi ini mendefinisikan jenis dokumen dan versi HTML yang digunakan. Dalam hal ini, ini menunjukkan dokumen HTML5.

  2. <html lang="en" dir="ltr"> : Ini adalah elemen akar dari dokumen HTML. Atribut lang disetel ke "en" (Bahasa Inggris), yang menunjukkan bahasa dokumen. Atribut dir disetel ke "ltr" (kiri ke kanan), yang menunjukkan arah teks.

  3. <head> : Bagian ini berisi informasi meta tentang dokumen, seperti kumpulan karakter, judul, stylesheet, dan skrip.
  • <meta charset="utf-8"> : Tag meta ini menyetel pengkodean karakter dokumen ke UTF-8, yang merupakan pengkodean karakter yang banyak digunakan untuk web.
  • <title> JS Candy Crush </title> : Ini menyetel judul halaman web menjadi "JS Candy Crush", yang biasanya ditampilkan di bilah judul atau tab browser.
  • <link rel="stylesheet" href="style.css"> : Tag tautan ini menyertakan lembar gaya eksternal bernama "style.css." Stylesheet ini digunakan untuk menentukan presentasi (gaya) dokumen HTML.
  • <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet"> : Tag tautan ini menyertakan stylesheet eksternal dari Google Fonts. Itu mengimpor font Montserrat dengan bobot 300 dan 400 untuk digunakan di halaman web.
  • <script src="script.js" charset="utf-8"> </script> : Tag skrip ini menyertakan file JavaScript eksternal bernama "script.js." File JavaScript ini berisi logika dan fungsionalitas untuk halaman web.

4. <body> : Ini adalah konten utama dokumen HTML.

5. <div class="scoreBoard"> : Elemen div ini mewakili wadah dengan kelas "scoreBoard." Di dalamnya terdapat unsur-unsur yang berkaitan dengan penilaian dalam suatu permainan.
  • <h3> skor </h3> : Elemen judul ini (h3) berisi teks "skor".
  • <h1 id="score"> </h1> : Elemen judul (h1) dengan id "score" ini adalah pengganti untuk menampilkan skor sebenarnya. Konten elemen ini akan diperbarui secara dinamis menggunakan JavaScript.
6. <div class="grid"> </div> : Elemen div ini mewakili sebuah container dengan kelas "grid". Ini digunakan untuk membuat tata letak kotak untuk game, mungkin untuk menampilkan permen di game mirip Candy Crush.

Ini adalah struktur dasar klon Candy Crush kita menggunakan HTML, dan sekarang kita dapat melanjutkan ke penataannya menggunakan CSS.

 
<html dir="ltr" lang="en">  
 <head>
    <meta charset="utf-8"></meta>
    <title>JS Candy Crush</title>
    <link href="style.css" rel="stylesheet"></link>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&amp;display=swap" rel="stylesheet"></link>
    <script charset="utf-8" src="script.js"></script>
  </head>
  <body>
    <div class="scoreBoard">
      <h3>score</h3>
      <h1 id="score"></h1>
    </div>
    <div class="grid"></div>
  </body>
</html>


Langkah 2 (Kode CSS):

Setelah struktur HTML dasar game kloning sudah ada, langkah selanjutnya adalah menambahkan gaya ke game kloning menggunakan CSS.


Selanjutnya, kita akan membuat file CSS kita. Dalam file ini, kita akan menggunakan beberapa aturan dasar CSS untuk menata gaya permainan kloning kita. Mari kita uraikan kode bagian demi bagian:


1. .grid:

  • tampilan: fleksibel; : Properti ini mengubah container menjadi container fleksibel, memungkinkan penggunaan properti flex untuk turunannya.
  • bungkus fleksibel: bungkus; : Ini memungkinkan item fleksibel (turunan) untuk digabungkan menjadi beberapa baris jika melebihi lebar wadah.
  • tinggi: 560 piksel; : Menyetel tinggi wadah menjadi 560 piksel.
  • lebar minimum: 560 piksel; : Menentukan lebar minimum penampung menjadi 560 piksel.
  • margin-kiri: 80px; : Menambahkan margin kiri 80 piksel ke penampung.
  • margin-atas: 50 piksel; : Menambahkan margin atas sebesar 50 piksel ke penampung.
  • warna latar belakang: rgba(109, 127, 151, 0.5); : Menyetel warna latar belakang wadah dengan nilai RGBA (biru semi transparan).
  • bantalan: 5 piksel; : Menambahkan 5 piksel padding ke wadah.
  • warna: #85796b; : Menyetel warna teks di dalam wadah ke warna coklat tertentu.
  • radius batas: 10px; : Membulatkan sudut wadah sebesar 10 piksel.
  • bayangan kotak: ...; : Menambahkan bayangan kotak ke wadah untuk efek visual. Ini mencakup bayangan sisipan dan bayangan dengan warna putih.

2. .grid div:

Pemilih ini menargetkan elemen div di dalam wadah dengan kelas .grid.
tinggi: 70 piksel; : Menyetel tinggi elemen div ini menjadi 70 piksel.
lebar: 70 piksel; : Menyetel lebar elemen div ini menjadi 70 piksel.


3. h3 dan h1:

Elemen judul HTML h3 dan h1 bergaya penyeleksi ini.
keluarga font: "Montserrat", sans-serif; : Menentukan jenis font untuk elemen ini.
transformasi teks: huruf besar; : Mengubah teks menjadi huruf besar.


4. .invisible

Kelas ini ditentukan tetapi tidak digunakan dalam kode yang disediakan. Jika diterapkan pada suatu elemen, itu akan mengatur warna latar belakang menjadi putih.


5.  body:

gambar latar belakang: url('...'); : Menyetel gambar latar belakang seluruh halaman web ke URL yang ditentukan.
lebar maksimal: 100vh; : Menyetel lebar maksimum badan menjadi 100 tinggi area pandang.
tampilan: fleksibel; : Mengubah tubuh menjadi wadah fleksibel.

6. .scoreBoard:


  • Mendefinisikan gaya untuk elemen dengan kelas .scoreBoard .
  • warna latar belakang: cyan; : Menyetel warna latar belakang elemen menjadi cyan.
  • radius batas: 20px; : Membulatkan sudut elemen sebesar 20 piksel.
  • margin-atas: 200 piksel; : Menambahkan margin atas 200 piksel ke elemen.
  • margin-kiri: 200px; : Menambahkan margin kiri 200 piksel ke elemen.
  • lebar: otomatis; : Memungkinkan elemen memiliki lebar yang ditentukan oleh kontennya.
  • tinggi: 120 piksel; : Menyetel tinggi elemen menjadi 120 piksel.
  • bantalan: 20 piksel; : Menambahkan 20 piksel padding ke elemen.
  • tampilan: fleksibel; : Mengubah elemen menjadi wadah fleksibel.
  • arah fleksibel: kolom; : Menyusun turunan dari wadah fleksibel dalam sebuah kolom.
  • justify-content: spasi-antara; : Mendistribusikan anak-anak dengan spasi di antara mereka sepanjang sumbu kolom.
  • menyelaraskan-item: tengah; : Memusatkan anak-anak di sepanjang sumbu silang.
  • perataan teks: tengah; : Memusatkan teks di dalam elemen.
  • warna: #85796b; : Menyetel warna teks di dalam elemen ke warna coklat tertentu.

Ini akan memberikan presentasi yang ditingkatkan pada game klon Candy Crush kami. Buat file CSS dengan nama style.css dan tempelkan kode yang diberikan ke file CSS Anda. Ingatlah bahwa Anda harus membuat file dengan ekstensi .css.

 

.grid {
  display: flex;
  flex-wrap: wrap;
  height: 560px;
  min-width: 560px;
  margin-left: 80px;
  margin-top: 50px;
  background-color: rgba(109, 127, 151, 0.5);
  padding: 5px;
  color: #85796b;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
}

.grid div {
  height: 70px;
  width: 70px;
}

h3 {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

h1 {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-top: -10px;
}

.invisible {
  background-color: white;
}

body {
  background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png');
  max-width: 100vh;
  display: flex;
}

.scoreBoard {
  background-color: cyan;
  border-radius: 20px;
  margin-top: 200px;
  margin-left: 200px;
  width: auto;
  height: 120px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: #85796b;
}


Langkah 3 (Kode JavaScript):

Terakhir, kita perlu membuat fungsi di JavaScript. Mari kita bagi kode menjadi beberapa bagian:


1. Inisialisasi:
  • Kode dimulai dengan event pendengar yang menunggu DOM dimuat sepenuhnya sebelum memanggil fungsi candyCrushGame .


2. Fungsi CandyCrushGame:
  • Fungsi ini menyiapkan game Candy Crush dengan membuat papan permainan, menentukan variabel awal, dan menangani event drag-and-drop untuk permen.
  • Ini menciptakan kotak 8x8 dan mengisinya dengan permen dengan warna berbeda. Permen diwakili oleh elemen div dengan gambar latar belakang.
  • Pemroses acara ditambahkan ke setiap div permen untuk fungsionalitas drag-and-drop. Peristiwa drag-and-drop termasuk dragstart , dragend , dragover , dragenter , dragleave , dan drop.
  • Fungsi ini juga mendefinisikan variabel untuk menyimpan informasi tentang permen yang diseret, diganti, dan ID persegi terkait.
  • Fungsi dragDrop menukar gambar latar belakang permen yang diseret dan dijatuhkan.
  • Fungsi dragEnd menentukan validitas perpindahan dan memperbarui gambar latar belakang.
  • Fungsi moveIntoSquareBelow bertanggung jawab untuk menjatuhkan permen ke kotak kosong di bawah saat permen sudah dibersihkan.


3. Memeriksa Kecocokan:
  • Kode tersebut mencakup fungsi untuk memeriksa kecocokan di papan permainan. Kecocokannya bisa dalam baris atau kolom yang terdiri dari tiga atau empat permen.
  • Fungsi seperti checkRowForFour , checkColumnForFour , checkRowForThree , dan checkColumnForThree melakukan iterasi melalui grid, mengidentifikasi permen yang cocok, dan menghapusnya.
  • Skor diperbarui berdasarkan jumlah permen yang dibersihkan.


4. Fungsi Interval:
  • Fungsi setInterval digunakan untuk berulang kali memeriksa kecocokan dan memindahkan permen ke bawah setiap 100 milidetik.

Buat file JavaScript dengan nama script.js dan tempelkan kode yang diberikan ke file JavaScript Anda dan pastikan kode tersebut tertaut dengan benar ke dokumen HTML Anda sehingga skrip dapat dieksekusi di halaman tersebut. Ingat, Anda harus membuat file dengan ekstensi .js.

 

document.addEventListener("DOMContentLoaded", () => {
    candyCrushGame();
});

function candyCrushGame() {
    const grid = document.querySelector(".grid");
    const scoreDisplay = document.getElementById("score");
    const width = 8;
    const squares = [];
    let score = 0;

    const candyColors = [
        "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/red-candy.png)",
        "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/blue-candy.png)",
        "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/green-candy.png)",
        "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/yellow-candy.png)",
        "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/orange-candy.png)",
        "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/purple-candy.png)",
    ];

    // Creating Game Board
    function createBoard() {
        for (let i = 0; i < width * width; i++) {
            const square = document.createElement("div");
            square.setAttribute("draggable", true);
            square.setAttribute("id", i);
            let randomColor = Math.floor(Math.random() * candyColors.length);
            square.style.backgroundImage = candyColors[randomColor];
            grid.appendChild(square);
            squares.push(square);
        }
    }
    createBoard();

    // Dragging the Candy
    let colorBeingDragged;
    let colorBeingReplaced;
    let squareIdBeingDragged;
    let squareIdBeingReplaced;

    squares.forEach((square) =>
        square.addEventListener("dragstart", dragStart)
    );
    squares.forEach((square) => square.addEventListener("dragend", dragEnd));
    squares.forEach((square) => square.addEventListener("dragover", dragOver));
    squares.forEach((square) =>
        square.addEventListener("dragenter", dragEnter)
    );
    squares.forEach((square) =>
        square.addEventListener("drageleave", dragLeave)
    );
    squares.forEach((square) => square.addEventListener("drop", dragDrop));

    function dragStart() {
        colorBeingDragged = this.style.backgroundImage;
        squareIdBeingDragged = parseInt(this.id);
        // this.style.backgroundImage = ''
    }

    function dragOver(e) {
        e.preventDefault();
    }

    function dragEnter(e) {
        e.preventDefault();
    }

    function dragLeave() {
        this.style.backgroundImage = "";
    }

    function dragDrop() {
        colorBeingReplaced = this.style.backgroundImage;
        squareIdBeingReplaced = parseInt(this.id);
        this.style.backgroundImage = colorBeingDragged;
        squares[
            squareIdBeingDragged
        ].style.backgroundImage = colorBeingReplaced;
    }

    function dragEnd() {
        //Defining, What is a valid move?
        let validMoves = [
            squareIdBeingDragged - 1,
            squareIdBeingDragged - width,
            squareIdBeingDragged + 1,
            squareIdBeingDragged + width
        ];
        let validMove = validMoves.includes(squareIdBeingReplaced);

        if (squareIdBeingReplaced && validMove) {
            squareIdBeingReplaced = null;
        } else if (squareIdBeingReplaced && !validMove) {
            squares[
                squareIdBeingReplaced
            ].style.backgroundImage = colorBeingReplaced;
            squares[
                squareIdBeingDragged
            ].style.backgroundImage = colorBeingDragged;
        } else
            squares[
                squareIdBeingDragged
            ].style.backgroundImage = colorBeingDragged;
    }

    //Dropping candies once some have been cleared
    function moveIntoSquareBelow() {
        for (i = 0; i < 55; i++) {
            if (squares[i + width].style.backgroundImage === "") {
                squares[i + width].style.backgroundImage =
                    squares[i].style.backgroundImage;
                squares[i].style.backgroundImage = "";
                const firstRow = [0, 1, 2, 3, 4, 5, 6, 7];
                const isFirstRow = firstRow.includes(i);
                if (isFirstRow && squares[i].style.backgroundImage === "") {
                    let randomColor = Math.floor(
                        Math.random() * candyColors.length
                    );
                    squares[i].style.backgroundImage = candyColors[randomColor];
                }
            }
        }
    }

    ///-> Checking for Matches <-///

    //For Row of Four
    function checkRowForFour() {
        for (i = 0; i < 60; i++) {
            let rowOfFour = [i, i + 1, i + 2, i + 3];
            let decidedColor = squares[i].style.backgroundImage;
            const isBlank = squares[i].style.backgroundImage === "";

            const notValid = [
                5,
                6,
                7,
                13,
                14,
                15,
                21,
                22,
                23,
                29,
                30,
                31,
                37,
                38,
                39,
                45,
                46,
                47,
                53,
                54,
                55
            ];
            if (notValid.includes(i)) continue;

            if (
                rowOfFour.every(
                    (index) =>
                        squares[index].style.backgroundImage === decidedColor &&
                        !isBlank
                )
            ) {
                score += 4;
                scoreDisplay.innerHTML = score;
                rowOfFour.forEach((index) => {
                    squares[index].style.backgroundImage = "";
                });
            }
        }
    }
    checkRowForFour();

    //For Column of Four
    function checkColumnForFour() {
        for (i = 0; i < 39; i++) {
            let columnOfFour = [i, i + width, i + width * 2, i + width * 3];
            let decidedColor = squares[i].style.backgroundImage;
            const isBlank = squares[i].style.backgroundImage === "";

            if (
                columnOfFour.every(
                    (index) =>
                        squares[index].style.backgroundImage === decidedColor &&
                        !isBlank
                )
            ) {
                score += 4;
                scoreDisplay.innerHTML = score;
                columnOfFour.forEach((index) => {
                    squares[index].style.backgroundImage = "";
                });
            }
        }
    }
    checkColumnForFour();

    //For Row of Three
    function checkRowForThree() {
        for (i = 0; i < 61; i++) {
            let rowOfThree = [i, i + 1, i + 2];
            let decidedColor = squares[i].style.backgroundImage;
            const isBlank = squares[i].style.backgroundImage === "";

            const notValid = [
                6,
                7,
                14,
                15,
                22,
                23,
                30,
                31,
                38,
                39,
                46,
                47,
                54,
                55
            ];
            if (notValid.includes(i)) continue;

            if (
                rowOfThree.every(
                    (index) =>
                        squares[index].style.backgroundImage === decidedColor &&
                        !isBlank
                )
            ) {
                score += 3;
                scoreDisplay.innerHTML = score;
                rowOfThree.forEach((index) => {
                    squares[index].style.backgroundImage = "";
                });
            }
        }
    }
    checkRowForThree();

    //For Column of Three
    function checkColumnForThree() {
        for (i = 0; i < 47; i++) {
            let columnOfThree = [i, i + width, i + width * 2];
            let decidedColor = squares[i].style.backgroundImage;
            const isBlank = squares[i].style.backgroundImage === "";

            if (
                columnOfThree.every(
                    (index) =>
                        squares[index].style.backgroundImage === decidedColor &&
                        !isBlank
                )
            ) {
                score += 3;
                scoreDisplay.innerHTML = score;
                columnOfThree.forEach((index) => {
                    squares[index].style.backgroundImage = "";
                });
            }
        }
    }
    checkColumnForThree();


    window.setInterval(function () {
        checkRowForFour();
        checkColumnForFour();
        checkRowForThree();
        checkColumnForThree();
        moveIntoSquareBelow();
    }, 100);
}

Hasil Akhir:



Kesimpulan:
Selamat telah menyelesaikan perjalanan menggembirakan ini menuju dunia pengembangan game! Kami telah membahas langkah-langkah penting dalam membuat tiruan Candy Crush menggunakan HTML, CSS, dan JavaScript.

Saat Anda menyelesaikan tutorial ini, ingatlah bahwa perjalanan Anda dalam pengembangan game tidak berakhir di sini. Gunakan pengetahuan dan keterampilan yang Anda peroleh untuk menjelajah lebih jauh, bereksperimen dengan fitur-fitur baru, dan mengeluarkan kreativitas Anda. Pengembangan game adalah bidang yang dinamis, dan selalu ada lebih banyak hal untuk dipelajari dan ditemukan.

Sumber: https://www.codewithfaraz.com/content/294/creating-a-candy-crush-clone-html-css-and-javascript-tutorial-source-code

Tidak ada komentar:

Posting Komentar

Thank you for visiting Edu High School. This comment is an Auto Answer from our system please wait if your comment needs to be replied to urgently.
Greetings from us Edu High School.