js 吸附屏幕边缘_《p5.js创意游戏编程》第一课：跳动的小球

《p5.js创意游戏编程》第一课：跳动的小球

• 准备：Hbuilder/vscode等可以编写网页的编辑器
  如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器，如果打不开也可以使用国内的一款在线编辑器jsrun编辑器，(第一课先使用jsrun在线编辑器)
• 本案例最终代码17行

开始

1. 创建画布，生成一个400*400大小的画布。
   1. function setup() {
   2. createCanvas(400, 400);
   3. }

1. 创建背景及小球，首先通过background()函数创建一个天蓝色（87，250,255）的背景，再创建一个20*20大小的小球，生成地点位于（200,200）的位置，使用ellipse（）函数创建，ellipse（）函数内有四个参数，分别表示生成小球的x,y坐标及宽和高。
   1. var x=200,y=200;
   2. function draw() {
   3. background(87,250,255);
   4. ellipse(x,y,20,20);
   5. }

draw()函数会不断地运行（频率为FPS，默认60帧/秒）

1. 让小球动起来，通过draw（）函数不断刷新屏幕可以通过改变小球的x,y坐标让小球运动起来。
   1. var sx=2,sy=3;
   2. function draw() {
   3. background(87,250,255);
   4. ellipse(x,y,25,20);
   5. x+=sx;
   6. y+=sy;
   7. }

1. 让小球来回运动，通过条件判断让小球来回运动，如果小球来到了边缘位置，就让小球的x/y坐标减1
   1. if(x>width||x<0){
   2. sx*=-1;
   3. }
   4. if(y>height||y<0){
   5. sy*=-1;
   6. }

最后附上完整代码：

1. 1. var x=200,y=200;
   2. var sx=2,sy=3;
   3. function setup() {
   4. createCanvas(400, 400);
   5. }
   6. function draw() {
   7. background(87,250,255);
   8. ellipse(x,y,20,20);
   9. x+=sx;
   10. y+=sy;
   11. if(x>width||x<0){
   12. sx*=-1;
   13. }
   14. if(y>height||y<0){
   15. sy*=-1;
   16. }
   17. }

如果想进一步探讨p5.js，可以关注我的vx公众号：大李日志