สร้างเกมเสี่ยงทายด้วยจาวาสคริปต์

bysemicon -
0 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Background Box</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Itim&family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: "K2D";
            background: url("https://semicon.github.io/siamsee/bg1.PNG")no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        #box {
            width: 200px;
            height: 300px;
            background-image: url('https://semicon.github.io/siamsee/mk-ss.png');
            background-size: cover;
            background-position: center;
            margin-bottom: 20px;
        }

        #paper {
            width: 400px;
            height: 600px;
            background-image: url('https://semicon.github.io/img/web/transparent_bg.png');
            background-size: cover;
            background-position: center;
            margin-bottom: 20px;
            display: none;
        }

        #reButton {
            display: none;
        }
        
        #reButton,
        #startButton {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background: url("https://semicon.github.io/siamsee/bg.jpg");
            background-size: cover;
            background-position: center;
            border: none;
            border-radius: 50px;
            font-family: Itim;
            font-size: 1.25rem;
            color:#f0f0f0;
            width: 150px;
        }
        .credit{
            font-family: Itim;
            font-size: 0.85rem;
            color:#f0f0f0;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <div id="paper"></div>
    <button id="reButton">เริ่มใหม่</button>
    <div id="box"></div>
    <button id="startButton">เขย่า</button>
    <div class="credit">
        ที่มาภาพคำทำนายจาก: https://horoscope.trueid.net/detail/gn6pMYwmPEMB (25-12-2024)
    </div>


    <script>
        // เริ่มเล่น
        document.getElementById('startButton').addEventListener('click', function () {
            const box = document.getElementById('box'); //เซียมซี
            const paper = document.getElementById('paper'); //ใบคำทำนาย
            const button = document.getElementById('startButton');
            const rebutton = document.getElementById('reButton');
            const delay = Math.floor(Math.random() * 8) + 5; // หน่วงเวลาการเขย่า 5 ถึง 12

            button.style.display = 'none';
            box.style.backgroundImage = `url('https://semicon.github.io/siamsee/cd.gif')`;

            // ฟังก์ชั่นเปลี่ยนรูปภาพใบคำทำนาย
            function changeBackground() {
                const randomImage = Math.floor(Math.random() * 24) + 1;
                console.log(randomImage);
                paper.style.backgroundImage = `url('https://semicon.github.io/siamsee/zxcv-${randomImage}.jpg')`;
            }

            // หยุดการเขย่าและเปลี่ยนรูปภาพพื้นหลังหลัง ตามเวลาที่สุ่มได้
            setTimeout(() => {
                changeBackground();
                box.style.display = 'none';
                paper.style.display = 'block';
                rebutton.style.display = 'block';
            }, delay*1000);
        });

        // รีเซ็ตค่าเริ่มต้นใหม่
        document.getElementById('reButton').addEventListener('click', function () {
            const box = document.getElementById('box');
            const paper = document.getElementById('paper');
            const button = document.getElementById('startButton');
            const rebutton = document.getElementById('reButton');

            box.style.backgroundImage = `url('https://semicon.github.io/siamsee/mk-ss.png')`;
            box.style.display = 'block';
            paper.style.display = 'none';
            paper.style.backgroundImage = 'url("https://via.placeholder.com/200")';
            button.style.display = 'block';
            rebutton.style.display = 'none';
        });

    </script>
</body>

</html>


ปรับปรุงเแก้ไขเปลี่ยนเป็นคำทำนาย 3 ภาษา ไทย จีน อังกฤษ ของ www.liangchiang.com/

แก้ไข CSS  #paper



#paper {
   width: 400px;
   height: 732px;
   background-image: url('https://semicon.github.io/img/web/transparent_bg.png');
   background-size: cover;
   background-position: center;
    margin-bottom: 20px;
    display: none;
}


แก้ไขฟังก์ชั่นเปลี่ยนรูปภาพใบคำทำนาย function changeBackground() 


function changeBackground() {
   const randomImage = Math.floor(Math.random() * 28) + 1;
   const formattedRandomImage = randomImage > 9 ? randomImage.toString() : `0${randomImage}`;

   console.log(randomImage);
   paper.style.backgroundImage = `url('https://www.liangchiang.com/gameImages/CM${formattedRandomImage}-1.jpg')`;
}
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า