Let us Play PONG - Rabenschatten

wenn die langeweile aufkommt dann fragt man sich was kann man tun ? Nun ja mir fiel nichts besseres ein als ein PONG spiel in WordPress zu implementieren .

Falls es für jemand nützlich sein sollte dann hier ist der Code denn ich dafür verwendet habe

hier ist auch der Link zu dem spiel 😉

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            background: black;
            display: block;
            margin: 0 auto;
        }
        #score {
            text-align: center;
            font-size: 24px;
            color: white;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="score">Player: 0 | Bot: 0</div>
    <canvas id="pongCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('pongCanvas');
        const context = canvas.getContext('2d');

        const paddleWidth = 10;
        const paddleHeight = 100;
        const ballRadius = 10;

        let paddle1Y = (canvas.height - paddleHeight) / 2;
        let paddle2Y = (canvas.height - paddleHeight) / 2;

        let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballSpeedX = 4;
        let ballSpeedY = 4;

        let playerScore = 0;
        let botScore = 0;

        function drawPaddle(x, y, width, height) {
            context.fillStyle = 'white';
            context.fillRect(x, y, width, height);
        }

        function drawBall(x, y, radius) {
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2);
            context.fillStyle = 'white';
            context.fill();
            context.closePath();
        }

        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawPaddle(0, paddle1Y, paddleWidth, paddleHeight);
            drawPaddle(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);
            drawBall(ballX, ballY, ballRadius);

            ballX += ballSpeedX;
            ballY += ballSpeedY;

            if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
                ballSpeedY = -ballSpeedY;
            }

            if (ballX + ballRadius > canvas.width) {
                if (ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
                    ballSpeedX = -ballSpeedX;
                } else {
                    playerScore++;
                    updateScore();
                    resetBall();
                }
            } else if (ballX - ballRadius < 0) {
                if (ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
                    ballSpeedX = -ballSpeedX;
                } else {
                    botScore++;
                    updateScore();
                    resetBall();
                }
            }

            moveBot();
        }

        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = -ballSpeedX;
        }

        function updateScore() {
            document.getElementById('score').textContent = `Player: ${playerScore} | Bot: ${botScore}`;
        }

        function movePaddle(evt) {
            const rect = canvas.getBoundingClientRect();
            const root = document.documentElement;
            const mouseY = evt.clientY - rect.top - root.scrollTop;

            if (mouseY - paddleHeight / 2 > 0 && mouseY + paddleHeight / 2 < canvas.height) {
                paddle1Y = mouseY - paddleHeight / 2;
            }
        }

        function moveBot() {
            if (paddle2Y + paddleHeight / 2 < ballY) {
                paddle2Y += 2;
            } else {
                paddle2Y -= 2;
            }
            // Ensure the paddle doesn't go out of bounds
            if (paddle2Y < 0) {
                paddle2Y = 0;
            } else if (paddle2Y + paddleHeight > canvas.height) {
                paddle2Y = canvas.height - paddleHeight;
            }
        }

        canvas.addEventListener('mousemove', movePaddle);

        setInterval(draw, 1000 / 60);
    </script>
</body>
</html>

Das ist ein Simpler PONG mit einem Counter und Bot als gegner . Der Bot ist nicht sonderlich schlau gestellt, also sollte es nicht zu viel Herausforderung geben um gegen bot zu spielen .Es gibt allerdings kein endstand oder Win/Lose. Das kann man selbstverständlich auch implementieren ( wenn man es denn möchte 🙂 )