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

No:6031

410

Lets cut the thread! Spider thread! Lets cut the s..ALL
Developer User3589｜Date and time 23/7/1 14:38:32
Build time 22.947 sec｜Game capacity 2.674KB｜

糸を切ろう！蜘蛛の糸！

地獄に垂らされた蜘蛛の糸を上から切ろう！

→ 　

2　

0　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>糸切りゲーム</title>
<style>
    body {
        text-align: center;
    }
    
    #game-container {
        position: relative;
        height: 400px;
        background: #f2f2f2;
        margin: 0 auto;
        overflow: hidden;
    }
    
    #spider-thread {
        position: absolute;
        width: 100%;
        height: 2px;
        background: black;
        top: 0;
    }
    
    #scissors {
        position: absolute;
        top: 380px;
        left: 0;
        width: 50px;
        height: 20px;
        background: red;
        cursor: pointer;
    }
</style>
</head>
<body>
    <h1>糸を切ろう！蜘蛛の糸！</h1>
    <h2>地獄に垂らされた蜘蛛の糸を上から切ろう！</h2>
    <div id="game-container">
        <div id="spider-thread"></div>
        <div id="scissors"></div>
    </div>

<script>
        // ページ読み込み時の処理
        window.onload = function() {
            var thread = document.getElementById("spider-thread");
            var scissors = document.getElementById("scissors");
        
            // 糸の長さと位置をランダムに設定
            var threadWidth = Math.floor(Math.random() * 300) + 100;
            var threadLeft = Math.floor(Math.random() * (400 - threadWidth));
        
            // 糸の初期表示
            thread.style.width = threadWidth + "px";
            thread.style.left = threadLeft + "px";
        
            // シャッターの初期位置
            var scissorsLeft = 0;
        
            // シャッターの移動処理
            function moveScissors(event) {
                scissorsLeft = event.touches[0].clientX - 25;
                if (scissorsLeft < 0) {
                    scissorsLeft = 0;
                } else if (scissorsLeft > 350) {
                    scissorsLeft = 350;
                }
                scissors.style.left = scissorsLeft + "px";
            }
        
            // シャッターと糸の判定処理
            function cutThread() {
                if (scissorsLeft >= threadLeft && scissorsLeft <= (threadLeft + threadWidth)) {
                    thread.style.height = "0";
                    alert("ゲームクリア！");
                }
            }
        
            // ゲームクリア判定用のタイマー処理
            function startTimer() {
                setInterval(cutThread, 100);
            }
        
            // イベントの追加
            document.addEventListener("touchmove", moveScissors);
            document.addEventListener("touchstart", startTimer);
        }
    </script>
</body>
</html>