意見：

1、CSDN太難用了，稽核太難受，發表了看不了，不方便文章預覽修改格式。

QQ空間待稽核的話自己還是可以看的，求改進！

2、文字編輯也很難用！

一、運動的小球

本節將用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