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

No:39667

123

←

Prev Next

→

長い豆腐を切ろう
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/29 19:27:53
Build time 9.348 sec｜Game capacity 1.747KB｜

Script

長い豆腐を切ろう

タップ/クリックして切る位置を決めましょう！

🍆

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>豆腐切りゲーム</title>
    <style>
        #tofu {
            position: relative;
            font-size: 50px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>長い豆腐を切ろう</h1>
    <p>タップ/クリックして切る位置を決めましょう！</p>
    <div id="tofu">🍆</div>
    <script>
        document.getElementById("tofu").onclick = function(event) {
            const tofu = document.getElementById("tofu");
            const tofuRect = tofu.getBoundingClientRect();
            const x = event.clientX - tofuRect.left;
            const y = event.clientY - tofuRect.top;

const topHalf = tofu.cloneNode(false);
            topHalf.style.width = tofuRect.width + "px";
            topHalf.style.height = y + "px";
            topHalf.style.overflow = "hidden";
            topHalf.style.position = "absolute";
            topHalf.style.backgroundColor = "lightgreen";
            topHalf.style.left = tofuRect.left + "px";
            topHalf.style.top = tofuRect.top + "px";

const bottomHalf = tofu.cloneNode(false);
            bottomHalf.style.width = tofuRect.width + "px";
            bottomHalf.style.height = tofuRect.height - y + "px";
            bottomHalf.style.overflow = "hidden";
            bottomHalf.style.position = "absolute";
            bottomHalf.style.backgroundColor = "lightgrey";
            bottomHalf.style.left = tofuRect.left + "px";
            bottomHalf.style.top = (tofuRect.top + y) + "px";

tofu.parentNode.replaceChild(topHalf, tofu);
            document.body.appendChild(bottomHalf);
        }
    </script>
</body>
</html>