Grokが作ってくれたやつ

はてな匿名ダイアリー

2025-07-06

■Grokが作ってくれたやつ


&lt;html lang="ja"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;GrokのPONGゲーム&lt;/title&gt;
    &lt;style&gt;
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #1a1a1a; }
        canvas { border: 2px solid #00ff00; background: #000; }
        #score { color: #00ff00; font-family: 'Courier New', monospace; font-size: 24px; position: absolute; top: 20px; width: 100%; text-align: center; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    0 : 0
    &lt;canvas id="gameCanvas" width="800" height="400"&gt;&lt;/canvas&gt;
    &lt;script&gt;
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreDisplay = document.getElementById('score');

        // ゲームオブジェクト
        const ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speedX: 5, speedY: 5 };
        const paddleLeft = { x: 10, y: canvas.height / 2 - 50, width: 10, height: 100, speed: 8 };
        const paddleRight = { x: canvas.width - 20, y: canvas.height / 2 - 50, width: 10, height: 100, speed: 8 };
        let scoreLeft = 0, scoreRight = 0;

        // キー入力
        const keys = { w: false, s: false, ArrowUp: false, ArrowDown: false };
        document.addEventListener('keydown', e =&gt; { if (keys.hasOwnProperty(e.key)) keys[e.key] = true; });
        document.addEventListener('keyup', e =&gt; { if (keys.hasOwnProperty(e.key)) keys[e.key] = false; });

        // ゲームループ
        function gameLoop() {
            // 移動
            if (keys.w &amp;&amp; paddleLeft.y &gt; 0) paddleLeft.y -= paddleLeft.speed;
            if (keys.s &amp;&amp; paddleLeft.y &lt; canvas.height - paddleLeft.height) paddleLeft.y += paddleLeft.speed;
            if (keys.ArrowUp &amp;&amp; paddleRight.y &gt; 0) paddleRight.y -= paddleRight.speed;
            if (keys.ArrowDown &amp;&amp; paddleRight.y &lt; canvas.height - paddleRight.height) paddleRight.y += paddleRight.speed;

            // ボール移動
            ball.x += ball.speedX;
            ball.y += ball.speedY;

            // 壁衝突
            if (ball.y + ball.radius &gt; canvas.height || ball.y - ball.radius &lt; 0) ball.speedY = -ball.speedY;

            // パドル衝突
            if (
                (ball.x - ball.radius &lt; paddleLeft.x + paddleLeft.width &amp;&amp; ball.y &gt; paddleLeft.y &amp;&amp; ball.y &lt; paddleLeft.y + paddleLeft.height) ||
                (ball.x + ball.radius &gt; paddleRight.x &amp;&amp; ball.y &gt; paddleRight.y &amp;&amp; ball.y &lt; paddleRight.y + paddleRight.height)
            ) {
                ball.speedX = -ball.speedX * 1.05; // 少し加速
            }

            // 得点
            if (ball.x &lt; 0) { scoreRight++; ballReset(); }
            if (ball.x &gt; canvas.width) { scoreLeft++; ballReset(); }

            // 描画
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#00ff00';
            ctx.fillRect(paddleLeft.x, paddleLeft.y, paddleLeft.width, paddleLeft.height);
            ctx.fillRect(paddleRight.x, paddleRight.y, paddleRight.width, paddleRight.height);
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();
            scoreDisplay.textContent = `${scoreLeft} : ${scoreRight}`;

            requestAnimationFrame(gameLoop);
        }

        function ballReset() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.speedX = (Math.random() &gt; 0.5 ? 5 : -5) * (Math.random() * 0.5 + 0.75);
            ball.speedY = (Math.random() * 4 - 2);
        }

        gameLoop();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;