Игра в понг через Javascript: ракетка игрока, чтобы оставаться в области холста

Question

Я учу детей базовому и простейшему способу разработки и кодирования игры Pong с помощью Javascript в редакторе p5. У меня просто вопрос по начальному этапу проектирования.

Код выглядит следующим образом:

function setup()

{
    createCanvas(400,400);
}

function draw()

{
    background('black');
    rect(20,160,10,80);
    rect(195,195,10,10);
    rect(380,mouseY,10,80);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Первая функция rect предназначена для компьютерного манипулятора, управляемого ИИ. Вторая функция rect предназначена для мяча. Третья функция rect предназначена для ракетки игрока.

Я использую mouseY для вертикального движения, но весло выходит за пределы холста размером 400*400 к нижней части холста.

Как я могу предотвратить перемещение весла игрока за пределы холста без использования какой-либо функции и путем простого добавления / вычитания различных числовых координат, задействованных в этом коде?

Answer 1

Вы должны ограничить координату y ракетки диапазоном [0, высота-80]. height - встроенная переменная, содержащая высоту холста, а высота ракетки - 80.

function setup() {
    createCanvas(400,400);
}

function draw() {
    background('black');
    rect(20,160,10,80);
    rect(195,195,10,10);

    let y = mouseY;
    if (y < 0)
        y = 0;
    if (y+80 > height)
        y = height-80;
    rect(380,y,10,80);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Это можно улучшить, используя min а также max:

function setup() {
    createCanvas(400,400);
}

function draw() {
    background('black');
    rect(20,160,10,80);
    rect(195,195,10,10);

    let y = max(0, min(height-80, mouseY));
    rect(380,y,10,80);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>