Processing課程 #01_Week02 向下墜落的隕石和往上漂浮的氣球

2020/3/13 程式設計 Processing課程內容 08160741

一.向下墜落的隕石

設定(setup)、描繪(draw)、滑鼠按壓(mousePressed)所組成的簡單程式碼，基本上氣球的也是同理，比較值得注意的是，這樣的程式碼是不完全的，尤其是超過十個物件會當機這一點，但算是個淺寫易懂的寫法，也能透過程式碼一眼看出每個詞所賦予的意義。

言歸正傳。

1.宣告

int []x = {0,0,0,0,0,0,0,0,0,0}; //x陣列的宣告，一次10個

int []y = {0,0,0,0,0,0,0,0,0,0}; //y陣列的宣告，一次10個

int n = 0; //作為點擊次數的宣告，初始為0次，最大為10

PImage img; //隕石圖片的宣告

2.設定

void setup() 

{

  size(1280,720); //視窗大小，自己比較習慣大一點的視窗

  img = loadImage("stone.png"); //已宣告的圖片要讀取資料夾中的隕石圖片

}

3.描繪

void draw()

{

  background(25,60,100); //背景設定深藍色，營造一點外太空感

  for (int i = 0;i < n;i++) //簡單的迴圈，會執行最多10次

  {

    image(img,x[i],y[i],110,110); //圖片的初始位置和解析度大小

    y[i] += 3; //往下墜落3

    if (y[i] > 665) y[i] = 665; //根據圖片大小去推斷的墜落停留點

  }

}

4.滑鼠按壓

void mousePressed()

{

  x[n] = mouseX; //n初始值為0，也就是從陣列中的第一個開始，值設為滑鼠X軸的所在點

  y[n] = mouseY; //n初始值為0，也就是從陣列中的第一個開始，值設為滑鼠Y軸的所在點

  n++; //完成點擊，點擊次數加一

}

5.最後成品

二.往上漂浮的氣球

基本上跟隕石一模一樣，只是將增加Y軸變成扣除Y軸而已，嗯，還有圖片。

1.宣告

int []x = {0,0,0,0,0,0,0,0,0,0}; //x陣列的宣告，一次10個

int []y = {0,0,0,0,0,0,0,0,0,0}; //y陣列的宣告，一次10個

int n = 0; //作為點擊次數的宣告，初始為0次，最大為10

PImage img; //氣球圖片的宣告

2.設定

void setup() 

{

  size(1280,720); //視窗大小，自己比較習慣大一點的視窗

  img = loadImage("balloon.png"); //已宣告的圖片要讀取資料夾中的氣球圖片

}

3.描繪

void draw()

{

  background(0,180,255); //背景設定偏天藍色，天空嘛

  for (int i = 0;i < n;i++) //簡單的迴圈，會執行最多10次

  {

    image(img,x[i],y[i],165,165); //圖片的初始位置和解析度大小

    y[i] -= 3; //往上漂浮3

    if (y[i] < -10) y[i] = -10; //根據圖片大小去推斷的漂浮停留點

  }

}

4.滑鼠按壓

void mousePressed()

{

  x[n] = mouseX; //n初始值為0，也就是從陣列中的第一個開始，值設為滑鼠X軸的所在點

  y[n] = mouseY; //n初始值為0，也就是從陣列中的第一個開始，值設為滑鼠Y軸的所在點

  n++; //完成點擊，點擊次數加一

}

5.最後成品

三.心得感想

老實說藉由程式來做遊戲讓程式變有趣是一個好的方法，對我來說則是遊戲好玩到讓我對程

式有興趣，目前都還是簡單的小程式，希望最後能有更複雜一點比較有挑戰性，像是如何讓玩家操縱角色、角色會有不同的動作圖片、音效的觸發、背景圖能有互動等。