麻雀開始ボタンを押すと13個の牌をランダムに並べて出すツモボタンを押すとランダムに牌を1個出す捨てるに牌をいれる牌が消えます牌は四角で中に数字、文字がある牌はスワイプで動かせる 1から9の牌と東南西北白発中の16種類's game

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

No:34598

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>麻雀ゲーム</title>
    <style>
        .tile {
            width: 50px;
            height: 70px;
            border: 1px solid black;
            text-align: center;
            font-size: 20px;
            margin: 5px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <button onclick="startGame()">開始</button>
    <button onclick="drawTile()">ツモ</button>
    <div id="hand"></div>
    <div id="discard"></div>

// 手牌を格納する配列
        let handTiles = [];

// 牌をランダムに並べる関数
        function startGame() {
            handTiles = [];
            const handDiv = document.getElementById("hand");
            handDiv.innerHTML = "";

// 手牌をランダムに並べる
            for (let i = 0; i < 13; i++) {
                const randomIndex = Math.floor(Math.random() * tiles.length);
                const tile = tiles[randomIndex];
                handTiles.push(tile);
                const tileDiv = document.createElement("div");
                tileDiv.className = "tile";
                tileDiv.textContent = tile;
                handDiv.appendChild(tileDiv);
            }
        }

// ツモボタンを押すとランダムに牌を1つ引く関数
        function drawTile() {
            const handDiv = document.getElementById("hand");
            const discardDiv = document.getElementById("discard");

if (handTiles.length > 0) {
                // 手牌からランダムに1つの牌を取り出す
                const randomIndex = Math.floor(Math.random() * handTiles.length);
                const tile = handTiles.splice(randomIndex, 1)[0];

// 引いた牌を表示する
                const tileDiv = document.createElement("div");
                tileDiv.className = "tile";
                tileDiv.textContent = tile;
                discardDiv.appendChild(tileDiv);

// 手牌を表示し直す
                handDiv.innerHTML = "";
                for (let i = 0; i < handTiles.length; i++) {
                    const tileDiv = document.createElement("div");
                    tileDiv.className = "tile";
                    tileDiv.textContent = handTiles[i];
                    handDiv.appendChild(tileDiv);
                }
            }
        }

// 牌の移動を実装（スワイプで動かせる）
        let startX = 0;
        let startY = 0;
        let selectedTileDiv = null;

document.addEventListener("touchstart", function(event) {
            startX = event.touches[0].clientX;
            startY = event.touches[0].clientY;

const touchedTileDiv = event.target.closest(".tile");
            if (touchedTileDiv) {
                selectedTileDiv = touchedTileDiv;
            }
        });

document.addEventListener("touchmove", function(event) {
            if (selectedTileDiv) {
                const diffX = event.touches[0].clientX - startX;
                const diffY = event.touches[0].clientY - startY;
                startX = event.touches[0].clientX;
                startY = event.touches[0].clientY;

const currentX = parseInt(getComputedStyle(selectedTileDiv).getPropertyValue("left")) || 0;
                const currentY = parseInt(getComputedStyle(selectedTileDiv).getPropertyValue("top")) || 0;
                selectedTileDiv.style.left = (currentX + diffX) + "px";
                selectedTileDiv.style.top = (currentY + diffY) + "px";
            }
        });

document.addEventListener("touchend", function(event) {
            selectedTileDiv = null;
        });
    </script>
</body>
</html>