Gra - odbijanie

<html>
<canvas id="gameCanvas" width="800" height="600"> </canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50; // polozenie kuli w osi X
var ballY = 50; // polozenie kuli w osi Y
var ballSpeedX = 10; // szybkosc przemieszczania sie kuli w osi X
var ballSpeedY = 4; // szybkosc przemieszczania sie kuli w osi X

// punkty startowe graczy
var player1Score = 0;
var player2Score = 0;

var paddle1Y = 250; //polozenie paletki gracza na osi Y
var paddle2Y = 250; //polozenie paletki komputera na osi Y
const PADDLE_THICKNESS = 10; //grubosc paletek
const PADDLE_HEIGHT = 100; //wysokosc paletek


//sprawdzanie polozenia myszki
function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
        x:mouseX,
        y:mouseY
    };
}

window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');

    var framesPerSecond = 60; //ilosc klatek na sekunde
    setInterval(function() {
            moveEverything();
            drawEverything();
        }, 1000/framesPerSecond);

    canvas.addEventListener('mousemove',
        function(evt) {
            var mousePos = calculateMousePos(evt);
            paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
        });
}

// reset pozycji kuli
function ballReset() {
    ballSpeedX = -ballSpeedX;
    ballX = canvas.width/2;
    ballY = canvas.height/2;
}

// automatyczne sterowanie
function computerMovement() {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 6;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 6;
    }
}

function moveEverything() {
    computerMovement();

    ballX = ballX + ballSpeedX;
    ballY = ballY + ballSpeedY;

    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();
            player2Score++;
        }
    }
    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();
            player1Score++;
        }
    }
    if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
}

function drawEverything() {
    // czarne tlo
    colorRect(0,0,canvas.width,canvas.height,'black');

    // lewa paletka
    colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');

    // prawa paletka (sterowana przez komputer)
    colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');

    // pilka
    colorCircle(ballX, ballY, 10, '#0066CC');

//tablica punktow
    canvasContext.fillText(player1Score, 100, 100);
    canvasContext.fillText(player2Score, canvas.width-100, 100);
}

function colorCircle(centerX, centerY, radius, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.beginPath();
    canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
    canvasContext.fill();
}

function colorRect(leftX,topY, width,height, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.fillRect(leftX,topY, width,height);
}
</script>
</html>