这是我的 JavaScript:
var x;
var y;
var ymod = 0;
function setup() {
createCanvas(600, 600);
x = 10;
y = 12;
}
function draw() {
background(48, 48, 48);
noStroke();
fill(255, 255, 255);
rect(x, y, 10, 30);
y = y + ymod;
}
function keyPressed() {
if (keyCode === UP_ARROW) {
ymod = -1;
} else if (keyCode === DOWN_ARROW) {
ymod = 1;
}
}
这是我的 HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Game</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
</head>
<body>
<script src="sketch.js" type="text/javascript"></script>
</body>
</html>
我希望矩形在碰到 Canvas 边缘时停止(即:y=0 和 y=570)。我尝试添加
if (y=0) {
ymod = 0;
}
到绘制函数的末尾，但是，它破坏了一切。
最佳答案
这可以使用 constrain 来完成p5.js 中的函数，将 y 限制在 0 到 570 之间，如下所示:
y = constrain(y, 0, 570);
if (y = 0) 之所以会破坏一切，是因为单个等号将 y 设置为 0，而不是进行比较。要测试 y 是否 = 0，您需要使用三个等号 (y === 0)。
关于javascript - 如何使用 p5 库在 Javascript 中阻止矩形移出 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44608985/