コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
宇宙空間での加速体験ゲームです。

圧倒的なスピード感。加速がブーストする宇宙体感ゲームです。（スペースキーを押すとさらに３秒間加速します。）
<!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 {
            margin: 0;
            overflow: hidden; /* スクロールバーを非表示 */
            background: black; /* 背景を黒に設定 */
            display: flex;
            flex-direction: column;
            align-items: center; /* 中央揃え */
        }
        #canvas {
            display: block;
        }
        /* スライダーのスタイル設定 */
        #boosterSliderContainer {
            position: absolute;
            bottom: 20px;
            width: 300px;
            text-align: center;
            color: white; /* テキストの色を白に設定 */
        }
        #boosterSlider {
            width: 100%; /* スライダーの幅をコンテナに合わせる */
        }
    </style>
</head>
<body>
    <!-- ゲーム描画用のキャンバス -->
    <canvas id="canvas"></canvas>

    <!-- ブースタースライダーのコンテナ -->
    <div id="boosterSliderContainer">
        <label for="boosterSlider">Booster Speed</label>
        <input id="boosterSlider" type="range" min="-5" max="500" value="0" step="0.1">
    </div>

    <script>
        // キャンバスとコンテキストの取得
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth; // キャンバスの幅をウィンドウ幅に設定
        canvas.height = window.innerHeight; // キャンバスの高さをウィンドウ高さに設定

        const particles = []; // パーティクル（星）を格納する配列
        let speed = 0; // 加速度の初期値
        let boostActive = false; // ブースト状態のフラグ

        // スライダーの値が変化したときの処理
        document.getElementById('boosterSlider').addEventListener('input', function() {
            speed = parseFloat(this.value); // スライダーの値を速度に反映
        });

        // 新しいパーティクル（星）を生成する関数
        function createParticle() {
            return {
                x: (Math.random() - 0.5) * canvas.width, // キャンバス中央を基準にランダムなx座標
                y: (Math.random() - 0.5) * canvas.height, // キャンバス中央を基準にランダムなy座標
                z: Math.random() * canvas.width, // パーティクルのz位置をランダムに設定
                size: Math.random() * 2 + 1, // パーティクルのサイズ
                color: `hsl(${Math.random() * 360}, 100%, 50%)` // ランダムな色を設定
            };
        }

        // 初期パーティクルを1000個生成
        for (let i = 0; i < 1000; i++) {
            particles.push(createParticle());
        }

        // パーティクルの位置を更新する関数
        function updateParticles() {
            particles.forEach(particle => {
                particle.z -= speed + (boostActive ? 10 : 0); // ブースト時は速度を加算
                if (particle.z < 1) { // パーティクルが手前に来た場合
                    particle.z = canvas.width; // パーティクルを奥に戻す
                    particle.x = (Math.random() - 0.5) * canvas.width; // ランダムなx座標に再設定
                    particle.y = (Math.random() - 0.5) * canvas.height; // ランダムなy座標に再設定
                }
            });
        }

        // パーティクルを描画する関数
        function renderParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 前フレームをクリア
            particles.forEach(particle => {
                const perspective = canvas.width / (canvas.width + particle.z); // 遠近効果を計算
                const x = (particle.x * perspective) + canvas.width / 2; // 中央を基準にx座標を設定
                const y = (particle.y * perspective) + canvas.height / 2; // 中央を基準にy座標を設定
                const size = particle.size * perspective; // パーティクルのサイズを遠近に応じて縮小

                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI * 2); // パーティクルを円で描画
                ctx.fillStyle = particle.color; // パーティクルの色を設定
                ctx.fill();
            });
        }

        // メインループ関数
        function gameLoop() {
            updateParticles(); // パーティクルの位置を更新
            renderParticles(); // パーティクルを描画
            requestAnimationFrame(gameLoop); // 次のフレームをリクエスト
        }

        // キーが押されたときの処理
        document.addEventListener('keydown', event => {
            if (event.code === 'Space' && !boostActive) { // スペースキーが押されたら
                boostActive = true; // ブーストを有効化
                setTimeout(() => {
                    boostActive = false; // 3秒後にブーストを解除
                }, 3000);
            }
        });

        gameLoop(); // ゲームループを開始
    </script>
</body>
</html>