《p5.js創意遊戲編程》第一課：跳動的小球

• 2020 年 8 月 22 日
• 筆記
• p5.js筆記, 少兒編程

• 準備：Hbuilder/vscode等可以編寫網頁的編輯器
  如果想立刻上手也可以使用在線編譯器p5.js官方在線編輯器，如果打不開也可以使用中國的一款在線編輯器jsrun編輯器，(第一課先使用jsrun在線編輯器)

• 本案例最終程式碼17行

開始

1. 創建畫布，生成一個400*400大小的畫布。

function setup() { 
	createCanvas(400, 400);
}

2. 創建背景及小球，首先通過background()函數創建一個天藍色（87，250,255）的背景，再創建一個20*20大小的小球，生成地點位於（200,200）的位置，使用ellipse（）函數創建，ellipse（）函數內有四個參數，分別表示生成小球的x,y坐標及寬和高。

var x=200,y=200;
function draw() { 
    background(87,250,255);
    ellipse(x,y,20,20);
}

draw()函數會不斷地運行（頻率為FPS，默認60幀/秒）

3. 讓小球動起來，通過draw（）函數不斷刷新螢幕可以通過改變小球的x,y坐標讓小球運動起來。

var sx=2,sy=3;
function draw() { 
    background(87,250,255);
    ellipse(x,y,25,20);
    x+=sx;
    y+=sy;
}

4. 讓小球來回運動，通過條件判斷讓小球來回運動，如果小球來到了邊緣位置，就讓小球的x/y坐標減1

if(x>width||x<0){
	sx*=-1;
}
if(y>height||y<0){
	sy*=-1;
}

最後附上完整程式碼：

var x=200,y=200;
var sx=2,sy=3;
function setup() { 
    createCanvas(400, 400);
} 
function draw() { 
    background(87,250,255);
    ellipse(x,y,20,20);
    x+=sx;
    y+=sy;
    if(x>width||x<0){
        sx*=-1;
    }
    if(y>height||y<0){
        sy*=-1;
    }
}

如果想進一步探討p5.js，可以關注我的vx公眾號：大李日誌