Как сделать так чтобы объект не выходил за пределы canvas?

Question

akdl @akdl

Canvas

Как сделать так чтобы объект не выходил за пределы canvas?

Всем привет, нашел гайд по созданию игры, а там дополнительные упражнения на которых нет ответа.
В общем paddle при управлении мышкой с левого края выходит на половину за границы, с правой стороны все в порядке. Подскажите, как пофиксить проблему, пожалуйста.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	let canvas = document.getElementById('myCanvas'),
        ctx = canvas.getContext('2d'),
        x = canvas.width/2,
        y = canvas.height-30,
        dx = 2,
        dy = -2,
        ballRadius = 10,
        color = 'red',
        paddleHeight = 15,
        paddleWidth = 90,
        paddleX = (canvas.width - paddleWidth)/2,
        rightPressed = false,
        leftPressed = false,
        brickRowCount = 3,
        brickColumnCount = 5,
        brickWidth = 75,
        brickHeight = 20,
        brickPadding = 10,
        brickOffetTop = 30,
        brickOffsetLeft = 30,
        score = 0;
    let bricks = [];
    for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
            bricks[c][r] = {x: 0, y: 0, status: 1};
        }
    } 

    document,addEventListener('keydown', keyDownHandler, false);
    document.addEventListener('keyup', keyUpHandler, false);
    document.addEventListener('mousemove', mouseMoveHandler, false);

    function mouseMoveHandler(e) {
        let relativeX = e.clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width - paddleWidth/2) {
            paddleX = relativeX - paddleWidth/2;
        } 
    }


    function keyDownHandler(e) {
        if (e.keyCode == 39) {
            rightPressed = true;
        } else if (e.keyCode == 37) {
            leftPressed = true;
        }
    }


    function keyUpHandler(e) {
        if (e.keyCode == 39) {
            rightPressed = false;
        } else if (e.keyCode == 37) {
            leftPressed = false;
        }
    }

    function collisionDetection() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                let b = bricks[c][r];
                if (b.status == 1) {
                    if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                        dy = -dy;
                        b.status = 0;
                        score += 5;
                        if (score == (brickRowCount*brickColumnCount) * 5) {
                            alert(`YOU WIN, CONGRATULATIONS!\nYour scores:${score}`);
                            document.location.reload();
                        }
                        // color = randColor();
                    }
                }

            }
        }
    }

    function drawScore() {
        ctx.font = '16px Arial';
        ctx.fillStyle = 'red';
        ctx.fillText('Score: ' + score, 8, 20);
    }

    function randColor() {
        let rgb =  `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`; 
        return rgb;
    }   
 

    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
    }

    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.strokeStyle = 'black';
        ctx.stroke();
        ctx.closePath();
    }

    
    function drawBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                if (bricks[c][r].status == 1) {
                    let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                    let brickY = (r * (brickHeight + brickPadding)) + brickOffetTop;
                    bricks[c][r].x = brickX;
                    bricks[c][r].y = brickY;
                    ctx.beginPath();
                    ctx.rect(brickX, brickY, brickWidth, brickHeight);
                    ctx.fillStyle = 'brown';
                    ctx.fill();
                    ctx.strokeStyle = 'black';
                    ctx.stroke();
                    ctx.closePath();
                }

            }
        }
    }
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawScore();
        collisionDetection();
        drawBricks();
        drawBall();
        x += dx;
        y += dy;
        if (y + dy < ballRadius) {
            dy = -dy;
            // color = randColor();
        } else if (y + dy > canvas.height - ballRadius) {
            if (x > paddleX && x < paddleX + paddleWidth) {
                dy = -dy;
            } else {
                alert('GAME OVER');
                document.location.reload();
                clearInterval(interval);
            }
        }



        if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
            dx = -dx;
            // color = randColor();
        }


        if (rightPressed && paddleX < canvas.width - paddleWidth) {
            paddleX += 3;
        } else if (leftPressed && paddleX > 0) {
            paddleX -= 3;
        }
    }
    


    let interval = setInterval(draw, 10);
</script>

</body>
</html>