京浜東北線を脱線させるゲーム's game

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

No:23741

←

Prev Next

→

京浜東北線を脱線させるゲーム
Developer User11134｜Date and time 23/11/3 11:30:48
Build time 47.389 sec｜Game capacity 2.483KB｜

Script

🚆

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #train {
            font-size: 5rem;
        }
    </style>
</head>
<body>
    <div id="train">🚆</div>

// 開始ボタンを作成
        const startButton = document.createElement('button');
        startButton.innerText = 'START';
        startButton.style.fontSize = '2rem';
        document.body.appendChild(startButton);

// STARTボタンをクリックしたらゲーム開始
        startButton.addEventListener('click', startGame);

function startGame() {
            // STARTボタンを非表示にする
            startButton.style.display = 'none';
          
            // ゲームループ開始
            let interval = setInterval(() => {
                rotationAngle += 5;  // 脱線させるために15度ずつ回転させる

if (rotationAngle >= 360) {
                    // 脱線完了後、ゲームを終了する
                    clearInterval(interval);
                    endGame();
                    return;
                }

// 列車の回転アニメーション
                train.style.transform = `rotate(${rotationAngle}deg)`;
            }, 100);  // 0.1秒ごとに回転

// スマホ操作に応じて速度を変更
            window.addEventListener('devicemotion', handleMotion);
        }

function handleMotion(event) {
            const acceleration = event.accelerationIncludingGravity;

// スマホの傾きによって速度を調整
            const baseSpeed = 15;
            const xSpeed = Math.abs(acceleration.x) > 5 ? baseSpeed * acceleration.x / 10 : 0;
            const ySpeed = Math.abs(acceleration.y) > 5 ? baseSpeed * acceleration.y / 10 : 0;

train.style.left = train.offsetLeft + xSpeed + 'px';
            train.style.top = train.offsetTop + ySpeed + 'px';
        }

function endGame() {
            // ゲーム終了時の処理を記述
            const gameOverText = document.createElement('h1');
            gameOverText.innerText = 'GAME OVER';
            gameOverText.style.fontSize = '4rem';
            document.body.appendChild(gameOverText);
        }
    </script>
</body>
</html>