forward puller (of a rickshaw)'s game

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

No:5932

336

←

Prev Next

→

forward puller (of a rickshaw)
Developer User3848｜Date and time 23/7/1 2:38:23
Build time 25.118 sec｜Game capacity 3.016KB｜

Script

了解しました。以下に、スマートフォンでプレイできる綱引きゲームの実装例を示します。

このプログラムは、2人のプレイヤーが綱引き対決をするゲームです。スマートフォンのブラウザで開くと、画面中央に綱が表示されます。プレイヤー1とプレイヤー2のボタンを交互にタップすることで、綱を引っ張ります。ロープの長さが一番端まで引かれた時点でゲームが終了し、勝利したプレイヤーが表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、スマートフォンでプレイできる綱引きゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>綱引きゲーム</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-size: 48px;
        }
        
        #rope {
            width: 100%;
            height: 30px;
            background-color: brown;
            position: relative;
        }
        
        #rope div {
            width: 50%;
            height: 100%;
            background-color: gold;
            position: absolute;
        }
        
        #result {
            margin-top: 2rem;
        }
        
        button {
            margin-top: 2rem;
            font-size: 32px;
            padding: 1rem 2rem;
        }
    </style>
</head>
<body>
    <div id="rope">
        <div id="player1"></div>
        <div id="player2"></div>
    </div>
    <button id="player1Button">P1 ➜</button>
    <button id="player2Button">P2 ➜</button>
    <div id="result"></div>
    
    <script>
        const rope = document.getElementById('rope');
        const player1 = document.getElementById('player1');
        const player2 = document.getElementById('player2');
        const player1Button = document.getElementById('player1Button');
        const player2Button = document.getElementById('player2Button');
        const result = document.getElementById('result');
        
        player1Button.addEventListener('click', () => pullRope('player1'));
        player2Button.addEventListener('click', () => pullRope('player2'));
        
        function pullRope(player) {
            const playerElement = document.getElementById(player);
            const currentPosition = parseInt(playerElement.style.left) || 0;
            const newPosition = currentPosition + 10;
            playerElement.style.left = newPosition + '%';
            
            // ロープが一番端まで引かれた場合
            if (newPosition >= 50) {
                player1Button.disabled = true;
                player2Button.disabled = true;
                
                if (player === 'player1') {
                    result.textContent = 'Player1 の勝ち！';
                } else {
                    result.textContent = 'Player2 の勝ち！';
                }
            }
        }
    </script>
</body>
</html>
```