Saturday, January 4, 2025

Archive for January 2025

Cara membuat Game tebak angka dengan HTML sederhana.

Syamsul Yadi 1/04/2025 08:58:00 PM Leave a Reply

Baca Juga

 Kelas saya lebih seru karena siswa main tebak tebakan angka dengan komputer, yang menang dapat poin dan yang kalah harus menyebutkan nama nama perangkat komputer beserta fungsinya.


Yuk buat juga, simpan file dengan nama tebak_angka.html

berikut kodenya :

<div class="container-fluid">

            <div class="row">

              <div class="col-sm-12">

                <div class="card">

                <a href="index.php?act=<?php echo base64_encode("games"); ?>" class="btn btn-danger btn-block">Tutup Game</a>

<style>

        body {

            font-family: Arial, sans-serif;

            text-align: center;

            

        }

        input {

            padding: 10px;

            margin: 10px;

            font-size: 1.2em;

        }

        button {

            padding: 10px 15px;

            font-size: 1.2em;

            background-color: #61dafb;

            border: none;

            cursor: pointer;

            transition: background 0.3s;

        }

        button:hover {

            background-color: #21a1f1;

        }

        #message {

            margin-top: 20px;

            font-size: 1.5em;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <audio id="correctSound" src="pages/media/correct.mp3"></audio>

    <audio id="wrongSound" src="pages/media/wrong.mp3"></audio>

    <audio id="bgMusic" src="pages/media/background.mp3" loop autoplay></audio>

    <br>

    <br>

    <h1>Tebak Angka (1-100)</h1>

    <p>Coba tebak angka yang saya pikirkan!</p>

    <input type="number" id="guess" min="1" max="100" placeholder="Masukkan angka">

    <button onclick="checkGuess()">Tebak</button>

    <p id="message"></p>


    <script>

        let randomNumber = Math.floor(Math.random() * 100) + 1;

        function checkGuess() {

            let userGuess = document.getElementById("guess").value;

            let message = document.getElementById("message");

            

            if (userGuess == randomNumber) {

                message.innerHTML = "🎉 Selamat! Kamu menebak dengan benar!";

                message.style.color = "green";

                document.getElementById("correctSound").play();

            } else if (userGuess > randomNumber) {

                message.innerHTML = "🔻 Terlalu tinggi! Coba lagi.";

                message.style.color = "red";

                document.getElementById("wrongSound").play();

            } else {

                message.innerHTML = "🔺 Terlalu rendah! Coba lagi.";

                message.style.color = "red";

                document.getElementById("wrongSound").play();

            }

        }

    </script>

</body>

</div>

</div>

</div>

</div>


Note : jika menyertakan media seperti sound, gambar dan lainnya kamu wajib menyimpannya dalam 1 folder dan panggil sesuai dengan nama file.

Selamat Mencoba

Friday, January 3, 2025

Archive for January 2025

Buat peserta didik lebih semangat belajar dengan Game buatanmu sendiri. Game Math sederhana.

Syamsul Yadi 1/03/2025 08:51:00 PM Leave a Reply

Baca Juga

Untuk menarik minat belajar siswa di kelas maka kamu harus memiliki skill mengajar yang inovatif. salah satunya dengan game sederhana ini cukup membuat peserta didik lebih bersemangat dalam belajar.

Game math ini dibuat dengan HTML sederhana. 



Simpan file ini dengan nama math.html

<div class="container-fluid">
            <div class="row">
              <div class="col-sm-12">
                <div class="card">
               
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
        }
        .game-container {
            margin-top: 50px;
        }
        .question {
            font-size: 5em;
            margin-bottom: 20px;
        }
        .answer {
            font-size: 1.5em;
            padding: 10px;
            width: 100px;
            text-align: center;
            border-radius: 5px;
            border: 2px solid #2980b9;
        }
        button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 1em;
            background-color: #e67e22;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #d35400;
        }
        .message {
            font-size: 1.5em;
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <audio id="bgMusic" loop autoplay>
        <source src="background.mp3" type="audio/mpeg">
    </audio>
    <audio id="correctSound" src="correct.mp3"></audio>
    <audio id="wrongSound" src="wrong.mp3"></audio>
    
    <div class="game-container">
        <h1>Game Matematika</h1>
        <p>Jawablah pertanyaan dengan benar!</p>
        <div class="question" id="question"></div>
        <input type="number" id="answer" class="answer" placeholder="Jawab" autofocus />
        <br>
        <button onclick="checkAnswer()">Kirim Jawaban</button>
        <p id="message" class="message"></p>
    </div>
    
    <script>
        let num1, num2, operator, correctAnswer;
        const operators = ['+', '-', '*', '/'];
        
        function generateQuestion() {
            num1 = Math.floor(Math.random() * 10) + 1; 
            num2 = Math.floor(Math.random() * 10) + 1;
            operator = operators[Math.floor(Math.random() * operators.length)];
            
            if (operator === '/' && num1 % num2 !== 0) {
                generateQuestion();
                return;
            }
            
            correctAnswer = eval(`${num1} ${operator} ${num2}`);
            document.getElementById("question").innerText = `${num1} ${operator} ${num2} = ?`;
        }
        
        function checkAnswer() {
            let userAnswer = parseFloat(document.getElementById("answer").value);
            if (userAnswer === correctAnswer) {
                document.getElementById("message").innerText = "✅ Jawaban Benar!";
                document.getElementById("correctSound").play();
            } else {
                document.getElementById("message").innerText = "❌ Jawaban Salah! Coba Lagi.";
                document.getElementById("wrongSound").play();
            }
            setTimeout(() => {
                document.getElementById("message").innerText = "";
                document.getElementById("answer").value = "";
                generateQuestion();
            }, 2000);
        }
        
        generateQuestion();
    </script>
</body>
</div>
</div>
</div>
</div>


Note : jika menyertakan media seperti sound, gambar dan lainnya kamu wajib menyimpannya dalam 1 folder dan panggil sesuai dengan nama file.

Selamat Mencoba


Thursday, January 2, 2025

Archive for January 2025

Membuat Game Scrabble Junior dengan HTML, Mudah

Syamsul Yadi 1/02/2025 08:45:00 PM Leave a Reply

Baca Juga

 Game Scrabble bisa kamu buat mandiri, cukup dengan HTML dan Javascript.


Berikut kode game scrabble dengan HTML, kamu cukup menyimpannya dengan nama scrabble.html
<div class="container-fluid">
            <div class="row">
              <div class="col-sm-12">
                <div class="card">
                
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
        }
        .game-container {
            margin-top: 50px;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(5, 60px);
            grid-gap: 5px;
            justify-content: center;
            margin: 20px auto;
        }
        .tile {
            width: 60px;
            height: 60px;
            background-color: white;
            border: 2px solid #2980b9;
            font-size: 1.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .tile.placed {
            background-color: #2ecc71;
            border-color: #27ae60;
        }
        .letter-bank {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        .letter {
            width: 50px;
            height: 50px;
            background-color: #e67e22;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            cursor: grab;
            border-radius: 5px;
        }
        .message {
            font-size: 1.5em;
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <audio id="bgMusic" loop autoplay>
        <source src="background.mp3" type="audio/mpeg">
    </audio>
    <audio id="correctSound" src="correct.mp3"></audio>
    <audio id="wrongSound" src="wrong.mp3"></audio>
    
    <div class="game-container">
        <h1>Scrabble Junior</h1>
        <p>Tempatkan huruf di papan untuk membentuk kata yang benar!</p>
        <div class="board" id="board"></div>
        <div class="letter-bank" id="letterBank"></div>
        <p id="message" class="message"></p>
    </div>
    
    <script>
        const words = ["KATA", "BUKU", "MEJA", "PENA", "BOLA"];
        let currentWordIndex = 0;
        let board = document.getElementById("board");
        let letterBank = document.getElementById("letterBank");

        function loadNewWord() {
            if (currentWordIndex >= words.length) {
                document.getElementById("message").innerText = "🎉 Selamat! Anda telah menyelesaikan semua kata!";
                return;
            }
            
            selectedWord = words[currentWordIndex];
            createBoard();
            createLetterBank();
            document.getElementById("message").innerText = "";
        }

        function createBoard() {
            board.innerHTML = "";
            for (let i = 0; i < selectedWord.length; i++) {
                let tile = document.createElement("div");
                tile.classList.add("tile");
                tile.dataset.index = i;
                tile.ondrop = drop;
                tile.ondragover = allowDrop;
                board.appendChild(tile);
            }
        }

        function createLetterBank() {
            letterBank.innerHTML = "";
            let shuffledLetters = selectedWord.split("").sort(() => Math.random() - 0.5);
            shuffledLetters.forEach(letter => {
                let letterDiv = document.createElement("div");
                letterDiv.classList.add("letter");
                letterDiv.innerText = letter;
                letterDiv.draggable = true;
                letterDiv.ondragstart = drag;
                letterBank.appendChild(letterDiv);
            });
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drag(event) {
            event.dataTransfer.setData("text", event.target.innerText);
        }

        function drop(event) {
            event.preventDefault();
            let letter = event.dataTransfer.getData("text");
            event.target.innerText = letter;
            event.target.classList.add("placed");
            checkWin();
        }

        function checkWin() {
            let placedWord = Array.from(board.children).map(tile => tile.innerText).join("");
            if (placedWord === selectedWord) {
                document.getElementById("message").innerText = "🎉 Selamat! Kata yang benar!";
                document.getElementById("correctSound").play();
                setTimeout(() => {
                    currentWordIndex++;
                    loadNewWord();
                }, 2000);
            } else if (placedWord.length === selectedWord.length) {
                document.getElementById("message").innerText = "❌ Salah! Coba lagi.";
                document.getElementById("wrongSound").play();
            }
        }

        loadNewWord();
    </script>
</body>
</div>
</div>
</div>
</div>

Note : jika menyertakan media seperti sound, gambar dan lainnya kamu wajib menyimpannya dalam 1 folder dan panggil sesuai dengan nama file.

Selamat Mencoba


Wednesday, January 1, 2025

Archive for January 2025

Membuat Game Puzzle sederhana dengan HTML

Syamsul Yadi 1/01/2025 08:41:00 PM Leave a Reply

Baca Juga

Game Puzzle sedrhana untuk pembelajaran di kelas lebih menarik. 



Tulis kode berikut dan simpan dengan nama puzzle.html

<div class="container-fluid">
            <div class="row">
              <div class="col-sm-12">
                <div class="card">
                
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
        }
        .game-container {
            margin-top: 50px;
        }
        .puzzle {
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-gap: 5px;
            justify-content: center;
            margin: 20px auto;
        }
        .tile {
            width: 100px;
            height: 100px;
            background-color: white;
            border: 2px solid #2980b9;
            font-size: 2em;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .empty {
            background-color: #f4f4f4;
            border: none;
        }
        .message {
            font-size: 1.5em;
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <audio id="bgMusic" loop autoplay>
        <source src="background.mp3" type="audio/mpeg"> 
    </audio>
    <audio id="correctSound" src="correct.mp3"></audio>
    
    <div class="game-container">
        <h1>Game Puzzle</h1>
        <p>Susun angka sesuai urutan yang benar!</p>
        <div class="puzzle" id="puzzle"></div>
        <p id="message" class="message"></p>
    </div>
    
    <script>
        let tiles = [...Array(15).keys()].map(x => x + 1).concat([""]);
        let puzzle = document.getElementById("puzzle");

        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        function renderPuzzle() {
            puzzle.innerHTML = "";
            tiles.forEach((num, index) => {
                let tile = document.createElement("div");
                tile.classList.add("tile");
                if (num === "") {
                    tile.classList.add("empty");
                } else {
                    tile.innerText = num;
                    tile.onclick = () => moveTile(index);
                }
                puzzle.appendChild(tile);
            });
        }

        function moveTile(index) {
            let emptyIndex = tiles.indexOf("");
            let validMoves = [emptyIndex - 1, emptyIndex + 1, emptyIndex - 4, emptyIndex + 4];
            if (validMoves.includes(index)) {
                [tiles[index], tiles[emptyIndex]] = [tiles[emptyIndex], tiles[index]];
                renderPuzzle();
                checkWin();
            }
        }

        function checkWin() {
            if (tiles.join() === [...Array(15).keys()].map(x => x + 1).concat([""]).join()) {
                document.getElementById("message").innerText = "🎉 Selamat! Anda berhasil menyelesaikan puzzle!";
                document.getElementById("correctSound").play();
            }
        }

        shuffle(tiles);
        renderPuzzle();
    </script>
</body>
</div>
</div>
</div>
</div>

Selamat mencoba