<!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>YUSURIKA</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #f0f8ff;
            font-family: 'Helvetica', 'Arial', sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        canvas {
            display: block;
        }
        #ui-container {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #333;
            font-size: 24px;
            display: none;
        }
        #pause-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            font-size: 48px;
            color: rgba(0, 0, 0, 0.5);
        }
        #game-over-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
        }
        #game-over-container h1 {
            color: #e74c3c;
            margin-top: 0;
        }
        /* ボタン共通のスタイル */
        #tweet-button, #restart-button {
            display: inline-block;
            margin: 8px 5px;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            font-weight: bold;
            text-decoration: none; /* リンクの下線を消す */
            border: none;
            border-radius: 20px; /* 角を丸くする */
            cursor: pointer;
            transition: opacity 0.3s;
        }

        #tweet-button:hover, #restart-button:hover {
            opacity: 0.8;
        }

        /* 個別の色設定 */
        #restart-button {
            background-color: #3498db; /* 青色 */
        }

        #tweet-button {
            background-color: #1DA1F2; /* X (Twitter) のブランドカラー */
        }
    </style>
</head>
<body>

    <canvas id="gameCanvas"></canvas>
    <div id="ui-container">
        YUSURIKA by Catfishなおうち　スコア: <span id="score">0</span>
        <span id="spray-ui" style="margin-left: 20px;"></span>
    </div>
    <div id="pause-indicator">PAUSE</div>
    <div id="game-over-container">
        <h1>ゲームオーバー</h1>
        <p>最終スコア: <span id="final-score">0</span></p>
        <a href="#" id="tweet-button" target="_blank" rel="noopener noreferrer">Xに投稿する</a>
        <button id="restart-button">もう一度プレイ</button>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const uiContainer = document.getElementById('ui-container');
        const scoreElement = document.getElementById('score');
        const sprayUiElement = document.getElementById('spray-ui');
        const pauseIndicator = document.getElementById('pause-indicator');
        const gameOverContainer = document.getElementById('game-over-container');
        const finalScoreElement = document.getElementById('final-score');
        const restartButton = document.getElementById('restart-button');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let gameState = 'title';
        let score = 0;
        let animationFrameId;
        let midgeSpawnInterval;
        let midgeBaseSpeed = 1.0;
        let midgeSpawnRate = 1000;
        const player = { x: canvas.width / 2, y: canvas.height / 2, radius: 15, color: '#e74c3c', face: '(^^)' };
        let midges = [];
        let sprayCount = 3;
        let lastSprayAwardedScore = 0;
        let sprayEffect = { active: false, x: 0, y: 0, radius: 0, alpha: 0 };
        let tapCount = 0;
        let tapTimer = null;
        const TAP_TIMEOUT = 300;
        let gameJustStarted = false;
        const PLAYER_Y_OFFSET_MOBILE = 80;

        class Midge {
            constructor(size) {
                const spawnEdge = Math.floor(Math.random() * 4);
                if (spawnEdge === 0) { this.x = Math.random() * canvas.width; this.y = -20; }
                else if (spawnEdge === 1) { this.x = canvas.width + 20; this.y = Math.random() * canvas.height; }
                else if (spawnEdge === 2) { this.x = Math.random() * canvas.width; this.y = canvas.height + 20; }
                else { this.x = -20; this.y = Math.random() * canvas.height; }

                if (size === 'large') { this.fontSize = 24; this.radius = 16; }
                else if (size === 'medium') { this.fontSize = 18; this.radius = 12; }
                else { this.fontSize = 12; this.radius = 8; }

                this.speed = midgeBaseSpeed + Math.random() * 0.5;
                this.color = '#333';
                this.isFleeing = false;
                this.fleeTimer = 0;
            }
            draw() {
                ctx.font = `${this.fontSize}px sans-serif`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = this.color;
                ctx.fillText("蚊", this.x, this.y);
            }
            update() {
                let angle;
                if (this.isFleeing && this.fleeTimer > 0) {
                    angle = Math.atan2(this.y - player.y, this.x - player.x);
                    this.fleeTimer--;
                } else {
                    this.isFleeing = false;
                    angle = Math.atan2(player.y - this.y, player.x - this.x);
                }
                this.x += Math.cos(angle) * this.speed;
                this.y += Math.sin(angle) * this.speed;
                this.draw();
            }
        }

        function updateSprayUI() { sprayUiElement.innerText = `殺虫剤（アー〇製薬）:  ${sprayCount}`; }

        function useSpray() {
            if (sprayCount <= 0) return;
            sprayCount--;
            updateSprayUI();
            sprayEffect.active = true;
            sprayEffect.x = player.x;
            sprayEffect.y = player.y;
            sprayEffect.radius = 0;
            sprayEffect.alpha = 1.0;
            const effectRadius = 200;
            midges.forEach(midge => {
                const distance = Math.hypot(player.x - midge.x, player.y - midge.y);
                if (distance < effectRadius) {
                    midge.isFleeing = true;
                    midge.fleeTimer = 180;
                }
            });
        }

        function spawnMidge() {
            if (gameState !== 'playing') return;
            let size;
            const rand = Math.random();
            if (score > 1500) {
                if (rand < 0.2) size = 'large'; else if (rand < 0.6) size = 'medium'; else size = 'small';
            } else if (score > 500) {
                if (rand < 0.3) size = 'medium'; else size = 'small';
            } else { size = 'small'; }
            midges.push(new Midge(size));
            midgeSpawnInterval = setTimeout(spawnMidge, midgeSpawnRate);
        }

        function updateDifficulty() {
            midgeBaseSpeed += 0.0005;
            if (midgeSpawnRate > 200) midgeSpawnRate -= 0.5;
        }

        function animate() {
            animationFrameId = requestAnimationFrame(animate);
            updateDifficulty();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (sprayEffect.active) {
                ctx.beginPath();
                ctx.arc(sprayEffect.x, sprayEffect.y, sprayEffect.radius, 0, Math.PI * 2);
                ctx.strokeStyle = `rgba(128, 255, 128, ${sprayEffect.alpha})`;
                ctx.lineWidth = 3;
                ctx.stroke();
                sprayEffect.radius += 4;
                sprayEffect.alpha -= 0.02;
                if (sprayEffect.alpha <= 0) sprayEffect.active = false;
            }
            ctx.font = '24px sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = player.color;
            ctx.fillText(player.face, player.x, player.y);
            midges.forEach((midge) => {
                midge.update();
                const distance = Math.hypot(player.x - midge.x, player.y - midge.y);
                if (distance < player.radius + midge.radius) endGame();
            });
            score++;
            scoreElement.innerText = score;
            if (score - lastSprayAwardedScore >= 500) {
                if (sprayCount < 10) {
                    sprayCount++;
                    updateSprayUI();
                }
                lastSprayAwardedScore += 500;
            }
        }

        function startGame() {
            gameState = 'playing';
            canvas.style.cursor = 'none';
            uiContainer.style.display = 'block';
            updateSprayUI();
            gameJustStarted = true;
            setTimeout(() => { gameJustStarted = false; }, 500);
            for (let i = 0; i < 3; i++) spawnMidge();
            midgeSpawnInterval = setTimeout(spawnMidge, midgeSpawnRate);
            animate();
        }

        function endGame() {
            gameState = 'gameover';
            player.face = '(T_T)';
            canvas.style.cursor = 'default';

            cancelAnimationFrame(animationFrameId);
            clearTimeout(midgeSpawnInterval);

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '24px sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = player.color;
            ctx.fillText(player.face, player.x, player.y);
            midges.forEach(midge => midge.draw());

            uiContainer.style.display = 'none';
            gameOverContainer.style.display = 'block';
            finalScoreElement.innerText = score;

            const tweetButton = document.getElementById('tweet-button');
            const gameTitle = "YUSURIKA";
            // ★★★ ここが修正箇所です ★★★
            const gameUrl = "https://namazu-honpo.com/apri/game/yusurika.html";
            // ★★★ ここまで ★★★
            const hashtags = "YUSURIKA,ブラウザゲーム";
            const tweetText = `「${gameTitle}」で ${score} 点獲得しました！🦟🦟🦟`;
            const tweetUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&hashtags=${hashtags}&url=${encodeURIComponent(gameUrl)}`;
            tweetButton.href = tweetUrl;
        }

        function drawTitleScreen() {
            ctx.fillStyle = '#f0f8ff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.font = 'bold 80px monospace';
            ctx.textAlign = 'center';
            ctx.fillStyle = '#333';
            ctx.fillText("YUSURIKA", canvas.width / 2, canvas.height / 3);
            ctx.font = '24px monospace';
            ctx.fillText("タップするかキーを押してスタート", canvas.width / 2, canvas.height / 2);
            ctx.font = '18px monospace';
            ctx.fillText("操作:マウス・指で移動 / 左クリック・ダブルタップで殺虫剤", canvas.width / 2, canvas.height / 2 + 40);
            ctx.fillText("トリプルタップ・ESCキーで一時停止", canvas.width / 2, canvas.height / 2 + 80);
            ctx.fillText("制作：Catfishなおうち", canvas.width / 2, canvas.height / 2 + 120);
        }

        function togglePause() {
            if (gameState === 'playing') {
                gameState = 'paused';
                cancelAnimationFrame(animationFrameId);
                clearTimeout(midgeSpawnInterval);
                pauseIndicator.style.display = 'block';
                canvas.style.cursor = 'default';
            } else if (gameState === 'paused') {
                gameState = 'playing';
                pauseIndicator.style.display = 'none';
                canvas.style.cursor = 'none';
                animate();
                midgeSpawnInterval = setTimeout(spawnMidge, midgeSpawnRate);
            }
        }

        window.addEventListener('mousemove', (event) => {
            if (gameState === 'playing') {
                player.x = event.clientX;
                player.y = event.clientY;
            }
        });

        window.addEventListener('touchmove', (event) => {
            if (gameState === 'playing') {
                event.preventDefault();
                player.x = event.touches[0].clientX;
                player.y = event.touches[0].clientY - PLAYER_Y_OFFSET_MOBILE;
            }
        }, { passive: false });

        window.addEventListener('keydown', (event) => {
            if (gameState === 'title' && event.key !== 'Escape') {
                startGame();
            } else if (event.key === 'Escape') {
                togglePause();
            }
        });

        window.addEventListener('click', (event) => {
            if (event.button !== 0) return;
            if (gameState === 'title') {
                startGame();
            } else if (gameState === 'playing') {
                useSpray();
            }
        });

window.addEventListener('touchstart', (event) => {
    // ゲームプレイ中の意図しないズームなどを防ぐ
    if (gameState === 'playing' || gameState === 'paused') {
        event.preventDefault();
    }
    // スタート直後の誤タップ（タイトル画面のタップがゲームプレイ中のタップとして認識されるの）を防ぐ
    if (gameJustStarted) return;

    // タイトル画面ならゲームを開始
    if (gameState === 'title') {
        startGame();
        return;
    }

    // --- ここからが新しいタップ判定ロジック ---

    // 以前のタップ判定タイマーをクリア
    clearTimeout(tapTimer);
    tapCount++;

    // 一定時間後にタップカウントをリセットするタイマーをセット
    tapTimer = setTimeout(() => {
        tapCount = 0;
    }, TAP_TIMEOUT);

    // ダブルタップが検出された場合
    if (tapCount === 2) {
        // ダブルタップで殺虫剤を使用
        useSpray();
    }
    // トリプルタップが検出された場合
    else if (tapCount === 3) {
        // トリプルタップで一時停止/再開
        togglePause();
        // トリプルタップ後は即座にカウントをリセット
        tapCount = 0;
        clearTimeout(tapTimer);
    }
}, { passive: false });

        restartButton.addEventListener('click', () => { location.reload(); });
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            if (gameState === 'title') drawTitleScreen();
        });

        drawTitleScreen();
    </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>