一、運動的小球
本節將用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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
