Игра в понг через Javascript: игрок продолжает оставаться в области холста - PullRequest
Новая
       41

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

0 голосов
/ 26 апреля 2020

Я учу детей основам c и простейшему способу разработки и кодирования игры 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>

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

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

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

1 Ответ

0 голосов
/ 26 апреля 2020

Вы должны ограничить координату y весла диапазоном [0, height-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>
...