這次帶給大家js如何做出小球動畫，js做出小球動畫的注意事項有哪些，以下就是實戰案例，一起來看一下。
一、運動的小球
本節將用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;
}
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是js如何做出小球動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
