<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>走り幅跳びゲーム Catfishなおうち1500人登録記念</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f8ff;
            touch-action: manipulation;
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        .rule-link {
            margin-bottom: 15px;
            font-size: 16px;
        }
        .rule-link a {
            color: #1DA1F2;
            text-decoration: none;
        }
        .rule-link a:hover {
            text-decoration: underline;
        }
        canvas {
            background-color: #87ceeb;
            border: 2px solid #333;
            max-width: 100%;
        }
        #controls {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            align-items: center; /* ボタンの縦位置を中央揃えに */
        }
        button {
            width: 120px;
            height: 60px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 10px;
            border: 2px solid #555;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            transition: transform 0.1s;
        }
        button:active {
            transform: scale(0.95);
        }
        #runButton {
            background-color: #4caf50;
            color: white;
        }
        #jumpButton {
            background-color: #f44336;
            color: white;
        }
        #info {
            margin-top: 15px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            height: 60px;
            text-align: center;
        }
        #tweetButton {
            /* ★★★ HTMLの場所を #controls に移動したので、一部スタイル調整 ★★★ */
            display: none;
            margin-top: 0; /* 上マージンをリセット */
            padding: 10px 20px;
            background-color: #1DA1F2;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            height: 40px; /* 高さを調整 */
        }
    </style>
</head>
<body>

    <h1>走り幅跳びゲーム Catfishなおうち1500人登録記念</h1>

    <div class="rule-link">
        <a href="./rule.htm" target="_blank">遊び方はこちら</a>
    </div>

    <canvas id="gameCanvas"></canvas>
    <div id="controls">
        <button id="runButton">スタート</button>
        <button id="jumpButton">ジャンプ！</button>
        <a id="tweetButton" href="#" target="_blank" rel="noopener noreferrer">記録をXに投稿</a>
    </div>
    <div id="info">
        <p id="message">「スタート」ボタンか右キーで開始！</p>
        <p id="score"></p>
        </div>

    <script>
        // --- 初期設定 ---
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const runButton = document.getElementById('runButton');
        const jumpButton = document.getElementById('jumpButton');
        const messageEl = document.getElementById('message');
        const scoreEl = document.getElementById('score');
        const tweetButton = document.getElementById('tweetButton');

        const logicalWidth = 800;
        const logicalHeight = 400;
        const aspectRatio = logicalWidth / logicalHeight;

        function resizeCanvas() {
            const screenWidth = window.innerWidth * 0.9;
            const screenHeight = window.innerHeight * 0.5;
            canvas.width = (screenWidth / screenHeight > aspectRatio) ? screenHeight * aspectRatio : screenWidth;
            canvas.height = (screenWidth / screenHeight > aspectRatio) ? screenHeight : screenWidth / aspectRatio;
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // --- ゲームバランス調整 ---
        const groundY = canvas.height - 50;
        const gravity = 0.7;
        const maxSpeed = 30;
        const foulLineX = 600;
        const perfectJumpZoneStart = foulLineX - 20;
        const perfectJumpZoneEnd = foulLineX;
        const distanceScale = 70;
        const worldRecord = 8.95;
        const poseChangeDelay = 500;
        const slowMotionFactor = 0.5;
        const playerScreenX = 100;

        let player, gameState, distance, isFoul, isPerfectJump, poseChangeTimer, takeoffSpeed;
        let finalMessage = '', finalScore = '';
        let isArrowRightDown = false;


        const playerProto = {
            x: playerScreenX, y: groundY, width: 30, height: 50,
            speedX: 0, speedY: 0, isJumping: false, pose: 'standing',

            draw() {
                ctx.fillStyle = 'blue'; ctx.textAlign = 'center';
                if (this.pose === 'orz') {
                    ctx.font = '30px sans-serif'; ctx.fillText('orz', this.x, this.y - 5);
                } else if (this.pose === 'banzai') {
                    ctx.font = '25px sans-serif'; ctx.fillText('＼(^o^)／', this.x, this.y - 15);
                } else {
                    ctx.fillRect(this.x - this.width / 2, this.y - this.height, this.width, this.height);
                }
                ctx.textAlign = 'left';
            },

            update() {
                const timeScale = this.isJumping ? slowMotionFactor : 1;
                if (this.isJumping) {
                    this.speedY += gravity * timeScale;
                    this.y += this.speedY * timeScale;
                    this.x += this.speedX * timeScale;
                    if (this.y >= groundY) {
                        this.y = groundY; this.isJumping = false; this.speedY = 0; this.speedX = 0;
                        gameState = 'landed'; clearTimeout(poseChangeTimer);
                        poseChangeTimer = setTimeout(() => showResult(this.x), poseChangeDelay);
                    }
                } else {
                    this.x += this.speedX;
                    if (this.speedX > 0) this.speedX *= 0.99;
                    if (this.speedX < 0.1) this.speedX = 0;
                }
            }
        };

        function init() {
            player = Object.assign({}, playerProto);
            gameState = 'ready'; distance = 0; isFoul = false; isPerfectJump = false;
            takeoffSpeed = 0;
            finalMessage = ''; finalScore = ''; // ★★★ 結果テキストを初期化 ★★★
            isArrowRightDown = false;
            clearTimeout(poseChangeTimer);
            messageEl.textContent = 'スタートボタンか右キーで開始！ジャンプボタンか上（もしくは下）キーでジャンプ！';
            scoreEl.textContent = '';
            runButton.textContent = 'スタート';
            tweetButton.style.display = 'none';
        }

        function gameLoop() {
            // 1. ロジック更新
            player.update();

            // 2. ワールド（背景やキャラクター）の描画
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(-player.x + playerScreenX, 0);
            drawGround();
            player.draw();

            // 3. UI（速度や結果など固定表示）の描画
            ctx.setTransform(1, 0, 0, 1, 0, 0); // UI描画のために座標系をリセット
            drawSpeed();
            drawResult(); // ★★★ 結果をキャンバスに描画する関数を呼び出し ★★★
            
            requestAnimationFrame(gameLoop);
        }

        function drawGround() {
            ctx.fillStyle = '#228B22';
            ctx.fillRect(player.x - playerScreenX - 100, groundY, canvas.width * 100, canvas.height - groundY);
            ctx.fillStyle = 'white';
            ctx.fillRect(foulLineX, groundY, 10, -50);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; ctx.font = '14px sans-serif'; ctx.textAlign = 'center';
            for (let i = 1; i <= 20; i++) {
                const markerX = foulLineX + (i * distanceScale);
                ctx.fillRect(markerX - 1, groundY, 2, -10);
                ctx.fillText(`${i}m`, markerX, groundY - 15);
            }
            const worldRecordPx = foulLineX + (worldRecord * distanceScale);
            ctx.fillStyle = 'gold'; ctx.fillRect(worldRecordPx, groundY, 5, -40);
            ctx.fillStyle = 'black'; ctx.font = '14px sans-serif'; ctx.textAlign = 'center';
            ctx.fillText(`WR ${worldRecord}m`, worldRecordPx, groundY - 45);
            ctx.textAlign = 'left';
        }

        function drawSpeed() {
            // gameLoopで座標系がリセットされるようになったので、ここでのリセットは不要
            ctx.fillStyle = 'black';
            ctx.font = '20px sans-serif';
            let speedToDisplay = player.speedX;
            if (gameState === 'landed' && takeoffSpeed > 0) {
                speedToDisplay = takeoffSpeed;
            }
            const speedKmh = (speedToDisplay * 3.6).toFixed(1);
            ctx.fillText(`速度: ${speedKmh} km/h`, 10, 30);
        }
        
        // ★★★ 結果をキャンバスに描画する新しい関数 ★★★
 function drawResult() {
    if (gameState !== 'landed' || finalMessage === '') return;

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    
    // 結果テキストの背景
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 2;
    ctx.beginPath();
    // ★★★ 背景の横幅を少し広げる (340 -> 350) ★★★
    ctx.roundRect(centerX - 175, centerY - 60, 350, 120, 10);
    ctx.fill();
    ctx.stroke();

    // メッセージ (着地！など)
    ctx.fillStyle = 'white';
    ctx.font = 'bold 36px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(finalMessage, centerX, centerY);

    // 記録 または ファールの詳細
    if (isFoul) {
        ctx.fillStyle = 'orange';
        ctx.font = 'bold 22px sans-serif';
    } else {
        ctx.fillStyle = 'yellow';
        // ★★★ フォントサイズを少し小さくしてはみ出ないように調整 (30px -> 26px) ★★★
        ctx.font = 'bold 26px sans-serif';
    }
    ctx.fillText(finalScore, centerX, centerY + 40);

    ctx.textAlign = 'left'; // 念のためリセット
}

function showResult(landingX) {
    runButton.textContent = 'スタート';
    
    // ★★★ メッセージ表示エリアを最初にクリア ★★★
    messageEl.textContent = '';
    scoreEl.textContent = '';

    if (isFoul) {
        // ★★★ ファール時もキャンバス描画用の変数を設定 ★★★
        finalMessage = 'ファール！';
        finalScore = 'ラインを越えてしまいました...';
        tweetButton.style.display = 'none';
        player.pose = 'orz';
    } else {
        distance = (landingX - foulLineX) / distanceScale;
        if (distance < 0) distance = 0;
        if (distance <= 3) player.pose = 'orz';
        else if (distance >= 6) player.pose = 'banzai';
        else player.pose = 'standing';
        
        finalMessage = isPerfectJump ? 'PERFECT JUMP!!' : '着地！';
        let scoreText = `記録: ${distance.toFixed(2)} m`;
        if (distance > worldRecord) scoreText += ' 🚀 好記録！';
        finalScore = scoreText;

        const takeoffSpeedKmh = (takeoffSpeed * 3.6).toFixed(1);
        const tweetText = `走り幅跳びゲームで ${distance.toFixed(2)}m 飛びました！ (速度 ${takeoffSpeedKmh} km/h)` + (distance > worldRecord ? ' 好記録達成！' : '') + ' #走り幅跳びゲーム';
        tweetButton.href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(window.location.href)}`;
        tweetButton.style.display = 'block';
    }
}

        function handleRun() {
            if (gameState === 'landed') {
                init();
                return;
            }
            if (gameState === 'jumping') return;
            if (gameState === 'ready') {
                runButton.textContent = '走る！';
            }
            gameState = 'running';
            messageEl.textContent = 'もっと速く！';
            player.speedX += 1.8;
            if (player.speedX > maxSpeed) player.speedX = maxSpeed;
        }

        function handleJump() {
            if (gameState !== 'running' || player.isJumping) return;
            isFoul = false; isPerfectJump = false;
            if (player.x > foulLineX) isFoul = true;
            else if (player.x >= perfectJumpZoneStart && player.x <= perfectJumpZoneEnd) isPerfectJump = true;
            let jumpPower = 5 + player.speedX * 1.3;
            if (isPerfectJump) jumpPower *= 1.2;
            messageEl.textContent = isPerfectJump ? 'PERFECT!' : '跳んだ！';
            takeoffSpeed = player.speedX;
            player.isJumping = true; player.speedY = -jumpPower; gameState = 'jumping';
        }

        // --- イベントリスナー ---
        runButton.addEventListener('mousedown', handleRun);
        runButton.addEventListener('touchstart', (e) => { e.preventDefault(); handleRun(); });
        jumpButton.addEventListener('mousedown', handleJump);
        jumpButton.addEventListener('touchstart', (e) => { e.preventDefault(); handleJump(); });

        window.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowRight') {
                isArrowRightDown = false; // キーが離されたことを記録
            }
        });



  window.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') {
                // キーが既に押されている場合は、何もしない（押しっぱなし無効）
                if (isArrowRightDown) return; 
                isArrowRightDown = true; // キーが押されたことを記録
                handleRun();
            }
            // ★★★ スペースキーでのジャンプを追加 ★★★
            if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === ' ' || e.code === 'Space') {
                e.preventDefault(); // 画面スクロールを防止
                handleJump();
            }
        });
        // --- ゲーム開始 ---
        init();
        gameLoop();
    </script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-gw-3+1f-3d+2z"
     data-ad-client="ca-pub-7855061578893179"
     data-ad-slot="8574377639"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LLZX3KXMVF');
</script>
</body>
</html>