本文通过p5.js库演示小球运动及反弹效果的实现。利用draw()函数循环更新位置变量，结合速度控制与边界检测，实现小球在Canvas内的持续运动与反向反弹，提供完整代码示例。
运动的小球
一、运动的小球
本节将使用p5.js创建一个在屏幕上移动的小球动画。
实现思路是利用变量记录小球的坐标位置，并在draw()函数中持续修改该变量。由于draw()函数会以FPS（默认60帧/秒）的频率不断循环执行，从而产生小球运动的视觉效果。
具体实现代码如下：
var x=0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//width和height是关键词，分别是Canvas的宽和高
x+=2;
ellipse(x,height/2,20,20);
}
反弹的小球
二、反弹的小球
随着时间推移，小球会移出屏幕可视区域。为防止小球消失，我们引入一个速度变量来控制移动步长，并在小球触及屏幕边界时使速度方向反转。
相关代码如下：
var x=0;
var speed=2;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(x,height/2,20,20);
//width和height是关键词，分别是Canvas的宽和高
x+=speed;
if(x>width||x<0){
speed*=-1;
}
进一步地，可以通过分别设置x轴和y轴的速度变量，实现小球在画布内多方向弹射的效果。
完整代码如下：
var x=200;
var y=200;
var Vx=2;
var Vy=3;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(x,y,20,20);//width和height是关键词，分别是Canvas的宽和高
x+=Vx;
y+=Vy;
if(x>width||x<0){
Vx*=-1;
}
if(y>height||y<0){
Vy*=-1;
}
}
最终运行效果预览：https://alpha.editor.p5js.org/full/Bya02GDBb
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。