0

我正在教孩子们在 p5 编辑器中通过 Javascript 设计和编码 Pong 游戏的基本和最简单的方法。我只是对设计的初始阶段有疑问。

代码如下：

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函数是针对AI控制的电脑桨。第二个 rect 函数用于球。第三个 rect 函数用于玩家桨。

我正在使用 mouseY 进行垂直移动，但桨从尺寸为 400*400 的画布中向画布的下部移动。

在不使用任何函数的情况下，通过简单地加/减此代码中涉及的各种数字坐标，如何防止玩家桨移出画布？

4

1 回答 1

1

您必须将桨的 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>

这可以通过使用minand进一步改进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>

于 2020-04-26T07:09:01.047 回答