ピタゴラスイッチ's game

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

No:38313

←

Prev Next

→

ピタゴラスイッチ
Developer User17354｜Date and time 24/1/24 7:27:44
Build time 9.449 sec｜Game capacity 2.425KB｜

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ピタゴラスイッチ</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <script>
        // ピタゴラスイッチのゲームを実装

// 要素の作成
        const container = document.createElement('div');
        container.classList.add('container');

const ball = document.createElement('div');
        ball.classList.add('ball');

// ゲームの進行状況を示す変数
        let isBallMoving = false;

// ゲームの進行状況に応じてボタンの表示を切り替える関数
        function toggleButton(isMoving) {
            const button = document.getElementById('startButton');
            button.textContent = isMoving ? '停止' : '開始';
        }

// ボールを移動させる関数
        function moveBall() {
            if (isBallMoving) {
                const containerWidth = container.offsetWidth;
                const containerHeight = container.offsetHeight;

const ballSize = 50;
                const ballHalfSize = ballSize / 2;

let x = Math.floor(Math.random() * (containerWidth - ballSize));
                let y = Math.floor(Math.random() * (containerHeight - ballSize));

if (x === y) {
                    x += ballSize;
                }

ball.style.transform = `translate(${x}px, ${y}px)`;

setTimeout(moveBall, 1000);
            }
        }

// ボタンがクリックされたときの処理
        function toggleGame() {
            isBallMoving = !isBallMoving;
            toggleButton(isBallMoving);

if (isBallMoving) {
                moveBall();
            }
        }

// HTMLに要素を追加
        container.appendChild(ball);
        document.body.appendChild(container);

// 開始・停止ボタンの作成
        const startButton = document.createElement('button');
        startButton.id = 'startButton';
        startButton.textContent = '開始';
        startButton.onclick = toggleGame;
        document.body.appendChild(startButton);
    </script>
</body>
</html>