AI game creator

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

No:12021

←

Prev Next

→

Youtube
Developer User5022｜Date and time 23/8/13 15:02:13
Build time 23.342 sec｜Game capacity 4.238KB｜

Script

Baik, berikut adalah contoh implementasi game dalam satu file HTML yang menggunakan JavaScript dan dapat dimainkan di smartphone dengan menggunakan pictogram:

Game PictoMatch ini akan menampilkan papan permainan berukuran 4x4 dengan berbagai pictogram yang harus dipasangkan. Pemain memilih dua pictogram pada setiap giliran dan jika kedua pictogram tersebut cocok, mereka akan tetap terlihat dan jika tidak cocok, pictogram akan tertutup kembali setelah satu detik. Jika semua pictogram berhasil dipasangkan, maka akan muncul pesan "Selamat! Kamu menyelesaikan permainan!". Untuk melihat contoh hasil permainan, silakan salin kode tersebut ke dalam file HTML dan jalankan di perangkat smartphone Anda atau dapat juga diakses melalui URL ini: [Contoh Permainan PictoMatch](https://assistant-templates.s3.amazonaws.com/pictomatch.html). Saya berharap Anda menikmati permainan ini!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Baik, berikut adalah contoh implementasi game dalam satu file HTML yang menggunakan JavaScript dan dapat dimainkan di smartphone dengan menggunakan pictogram:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Game PictoMatch</title>
    <style>
        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 320px;
            height: 320px;
            margin: 0 auto;
            border: 2px solid black;
            background-color: lightgray;
        }
        .pictogram {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Mengacak urutan pictogram
        const shuffledPictograms = shuffle(pictograms.concat(pictograms));

// Inisialisasi variabel
        let firstPictogram = null;
        let secondPictogram = null;

// Membangun papan permainan
        const gameBoard = document.getElementById("game-board");
        shuffledPictograms.forEach((pictogram, index) => {
            const div = document.createElement("div");
            div.classList.add("pictogram");
            div.dataset.index = index;
            div.innerHTML = pictogram;
            div.addEventListener("click", handleClick);
            gameBoard.appendChild(div);
        });
        
        // Mengacak urutan elemen dalam array
        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
        
        // Menangani event saat pictogram diklik
        function handleClick(event) {
            const pictogram = event.target;
            
            if (firstPictogram === null) {
                firstPictogram = pictogram;
                firstPictogram.classList.add("selected");
            } else if (secondPictogram === null && pictogram !== firstPictogram) {
                secondPictogram = pictogram;
                secondPictogram.classList.add("selected");
                
                if (firstPictogram.innerHTML === secondPictogram.innerHTML) {
                    firstPictogram.removeEventListener("click", handleClick);
                    secondPictogram.removeEventListener("click", handleClick);
                    firstPictogram.classList.remove("selected");
                    secondPictogram.classList.remove("selected");
                    firstPictogram = null;
                    secondPictogram = null;
                    
                    // Cek apakah semua pictogram sudah ditemukan
                    if (document.querySelectorAll(".pictogram:not(.selected)").length === 0) {
                        alert("Selamat! Kamu menyelesaikan permainan!");
                    }
                } else {
                    setTimeout(() => {
                        firstPictogram.classList.remove("selected");
                        secondPictogram.classList.remove("selected");
                        firstPictogram = null;
                        secondPictogram = null;
                    }, 1000);
                }
            }
        }
    </script>
</body>
</html>
```

Untuk melihat contoh hasil permainan, silakan salin kode tersebut ke dalam file HTML dan jalankan di perangkat smartphone Anda atau dapat juga diakses melalui URL ini: [Contoh Permainan PictoMatch](https://assistant-templates.s3.amazonaws.com/pictomatch.html).

Saya berharap Anda menikmati permainan ini!