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

No:34600

麻雀開始ボタンを押すと13個の牌をランダムに並べて出すツモボタンを押すとランダムに牌を1個出す ..ALL
Developer 豆腐｜Date and time 24/1/11 4:41:51
Build time 13.399 sec｜Game capacity 2.966KB｜

Script

麻雀

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>麻雀</title>
<style>
    .hai {
        width: 100px;
        height: 150px;
        border: 1px solid black;
        padding: 10px;
        margin: 5px;
        text-align: center;
        font-size: 30px;
        display: inline-block;
        cursor: pointer;
    }
    .container {
        text-align: center;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>麻雀</h1>
        <button id="startButton">開始</button>
        <button id="drawButton">ツモ</button>
        <button id="discardButton">捨てる</button>
        <div id="haipai"></div>
    </div>
    
    <script>
        // 牌の種類を配列で定義
        var haiList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "東", "南", "西", "北", "白", "発", "中"];

// 開始ボタンが押されたら牌を表示する
        document.getElementById("startButton").addEventListener("click", function() {
            var haipaiDiv = document.getElementById("haipai");
            haipaiDiv.innerHTML = "";
            for (var i = 0; i < 13; i++) {
                var randomIndex = Math.floor(Math.random() * haiList.length);
                var hai = haiList[randomIndex];
                haipaiDiv.innerHTML += '<div class="hai">' + hai + '</div>';
            }
        });

// ツモボタンが押されたらランダムに1枚の牌を表示する
        document.getElementById("drawButton").addEventListener("click", function() {
            var haipaiDiv = document.getElementById("haipai");
            var randomIndex = Math.floor(Math.random() * haiList.length);
            var hai = haiList[randomIndex];
            haipaiDiv.innerHTML += '<div class="hai">' + hai + '</div>';
        });

// 牌をクリックしたら場所を入れ替える
        document.getElementById("haipai").addEventListener("click", function(event) {
            var clickedHai = event.target;
            if (clickedHai.classList.contains("hai")) {
                var haipaiDiv = document.getElementById("haipai");
                var movedHai = haipaiDiv.querySelector(".move");
                if (movedHai) {
                    var temp = clickedHai.innerHTML;
                    clickedHai.innerHTML = movedHai.innerHTML;
                    movedHai.innerHTML = temp;
                    movedHai.classList.remove("move");
                } else {
                    clickedHai.classList.add("move");
                }
            }
        });

// 捨てるボタンが押されたら選択された牌を削除する
        document.getElementById("discardButton").addEventListener("click", function() {
            var haipaiDiv = document.getElementById("haipai");
            var movedHai = haipaiDiv.querySelector(".move");
            if (movedHai) {
                movedHai.remove();
            }
        });
    </script>
</body>
</html>