Anleitung: Spieler 1 wird gesteuert mit w & s Spieler 2 wird gesteuert mit pfeil oben & Pfeil unten.
<a href="https://thees.zorbau.com">zurueck zur Hauptseite</a>
<canvas 
id="ca"
width="720" 
height="480"
style="background-color: black;"
></canvas>
<script>
    let ctx = ca.getContext('2d')
    let p1 = 80;
    let p2 = 80;
    let key = {}
    let ball = {
        x: 360,
        y: 240,
        speedX: 3,
        speedY: 0 
    };
    document.addEventListener('keydown', e => key[e.keyCode] = true);
    document.addEventListener('keyup', e => key[e.keyCode] = false);
    draw();
    setInterval(loop, 1000 / 60);

    function draw() {
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0, 720, 480);
        ctx.fillStyle = 'white';
        ctx.fillRect(10, p1, 10, 80);
        ctx.fillRect(700, p2, 10, 80);
        ctx.fillRect(ball.x, ball.y, 10, 10);
        requestAnimationFrame(draw);
    }

    function loop() {
        if(key[38]) {
            p2 = p2 - 5;
        }

        if(key[40]) {
            p2 = p2 + 5;
        }

        if(key[87]) {
            p1 = p1 - 5;
        }

        if(key[83]) {
            p1 = p1 + 5;
        }
        ball.x = ball.x + ball.speedX;
        ball.y = ball.y + ball.speedY;

        if (ball.x < 20 || ball.x > 690) {
            if (ball.y > p1 && ball.y < p1 + 80 && ball.speedX < 0) {
                ball.speedX = -ball.speedX;
                ball.speedY = (ball.y - p1 - 40) * 0.1;
            }

            if (ball.y > p2 && ball.y < p2 + 80 && ball.speedX > 0) {
                ball.speedX = -ball.speedX;
                ball.speedY = (ball.y - p2 - 40) * 0.1;
            }
        }

        if(ball.y < 0 || ball.y > 480) {
            ball.speedY = -ball.speedY;
        }


        if(ball.x < 0 || ball.x > 720) { 
        ball = {
        x: 360,
        y: 240,
        speedX: 3,
        speedY: 0 
        };
    }
    }
</script>