Week 17 Hankins

期末作品展示:


將期中作品:猴子打怪物 延續，新增了音效，並且在過Menu上做了一個小設計:猴子會自己有規律的跳動，這個靈感是因為小時候的一些經典遊戲，算是一種致敬吧~ 利用搖桿來操控猴子的移動，按下搖桿按鈕即可發射球球。 遊戲規則: 遊戲時間30秒，猴子可以在發射出球球後，用自己的頭來將球球頂起來，控制球球自由落體的方向，來擊敗怪物。 藍怪100分，紅怪500分，綠怪1000分。 賣點: 當初在設計是為了向上個世紀的遊戲致敬，因此在遊戲風格，照片，背景音樂，背景音效的選擇上都採用復古風，以及開頭時小猴子會自己跳動的設計也是源自於復古小遊戲。

Week 13 Hankins

小葉老師跟我們分享了一個很厲害的人用壓克力板等低成本的工具，做出一個互動遊戲，

Week 12 Hankins

這週我們去台北市的Hackerspace參觀，並且製作了一把星際大戰裡面的光劍。Hackerspace裡面的Friday大哥和兩位助教都很有耐心，一步一步幫助我們大家完成作品。

光劍的實作很繁瑣，需要把100顆的LED燈泡焊在一起。光是這個動作就花了我們大概兩小時，眼睛非常累，但也是訓練耐心的一種考驗吧。

最後經過和隊友的努力，以及助教的耐心幫助，做出來一把超帥的光劍。

Week 11 Hankins

上課時將maker uno板子設定好後，做了一些小範例。

像是播放聲音，並且做了一個很有趣的互動，當按下Button後，會變換歌曲， 但是我的程式碼沒有保存下來，開發板也灌了新的程式... ...

Week 10 Hankins

老師在上課時介紹了一塊很厲害的板子:Aruino Maker Uno。

並且教導如何將板子與電腦作連結。

先到官網下載專屬驅動程式

安裝成功後，即可到裝置管理員看到安裝成功。

接著到Arduino工具裡面設定序列埠，以及開發板。

就能成功上傳程式碼了~

Week 08 Hankins

期中作品展示

遊戲的名字叫"猴子打怪物"，按下"P"開始遊戲。

方向鍵控制前後即跳躍，空白鍵發射一顆球球，猴子可以用頭頂球球，頂到後球球則會反彈。

遊戲時間為30秒，倒數結束即Game Over，或是將所有的怪物擊敗，藍怪100分，紅怪500分，綠怪1000分。

Week 07 Hankins

做期中作品

Week 06 Hankins

範例一:聲音播放

添加新的Libraries-Minim&Sound，

下載完畢

打開minim的範例程式碼，簡單做出一個聲音撥放器。

這裡要注意void draw()要寫

將音檔丟到程式碼中

成功播放聲音

範例二:Fruit Ninja

繼上禮拜的教學，先做一顆球球出來，接著畫出20顆球球，並且用到Random()函數，

自己定義reborn()函數，讓setup&draw去呼叫它。

初始一顆球

設定出20顆球球

設定了reborn()函數，當滑鼠碰到球球就重製球球，若球球的Y座標<700也重生。

最後程式碼參考:

float [] fruitX=new float[15];

float [] fruitY=new float[15];

float [] fruitVX=new float[15];

float [] fruitVY=new float[15];

void reborn(int i){

 fruitX[i]=random(800); fruitVX[i]=random(6)-3;            

 fruitY[i]=700; fruitVY[i]=random(-35)-5;  

}

void setup(){

 size(800,600);

 for(int i =0; i<15; i++){  

   reborn(i);

 }

}

void draw(){

 background(0);

 for(int i=0;i<15;i++){

  if( dist(mouseX,mouseY,fruitX[i],fruitY[i])<=50){

    reborn(i); continue;

  }

   ellipse(fruitX[i],fruitY[i],100,100);

   fruitX[i]+=fruitVX[i];

   fruitY[i]+=fruitVY[i];

   fruitVY[i]+=0.98;

   if(fruitY[i]>700) reborn(i);

 }

}

Week 05 Hankins

課堂一:回顧前四周所有教學的內容。

課堂二:接雞蛋

新學的內容有:

1.random()函數

2.dist()函數

3.分數顯示器

 

4.包裝分數顯示器(利用image來美化)

PImage[] imgN=new PImage[10];
float[] eggX=new float[100];
float[] eggY=new float[100];
boolean[] eggDie=new boolean[100];
void setup(){
 size(800,600);

 for(int i=0;i<=9;i++) imgN[i] = loadImage(i+".png");

 for(int i=0;i<100;i++){
  eggX[i]=random(100,700);
  eggY[i]=-random(2000);
 }
}
int score=0;
void draw(){
   background(255);
 
  fill(255);
 
  rect(mouseX-50,mouseY-25,100,50);
  for(int i=0;i<100;i++){
   if(eggDie[i]) continue;
   ellipse(eggX[i],eggY[i],80,100);
   eggY[i]+=5;
   if(eggY[i]>700) eggY[i]=-2000+600;
   if(dist(mouseX,mouseY,eggX[i],eggY[i])<50){
      eggDie[i]=true;
     
      score+=100;
   }
  }
 fill(255,0,0); textSize(80); text("Score:",260,600);
 int now=score;
 for(int i=0;i<6;i++){
    image(imgN[(now%10)], 750-i*50, 550, 50, 50);
    now/=10;
 }
 fill(0); rect(600,550,50,50);
   rect(750,550,50,50);
}

課堂三:FRUIT NINJA

Week 04 Hankins

一、文字的加入

文字是往右上方長過去，這裡和rect比較(矩形往右下方長)。

與文字有關的一些函數:

其中有一個很重要的函數:textSize()，用來改變文字的大小。

更改後更能體現文字往右上角長(好大好大)

子彈射出的樣子，利用布林函數來控制子彈的出現，當鍵盤任意按鈕下去就改變布林值。

實作子彈咻咻咻飛過的例子:

解釋:

子彈給100顆

imageMode(CENTER); //imageMode（CENTER）解釋image（）的第二個和第三個參數作為圖像的中心點。如果指定了兩個附加參數，則它們用於設置圖像的寬度和高度。

背景除以2的原因是因為:imageMode設定了CENTER(中心)

當bulletfly值為真，子彈就畫出來，每個子彈的X座標都會加10往右邊跑。

而為真的條件是滑鼠按下去，則為真，並且賦予其XY座標。

範例二:足球落下彈跳

很有趣的小例子，只是將圖片改掉並且把子彈往右射出的程式碼改掉，改成像下落，跟第三周的Mario一樣，所以當滑鼠按下去，足球就會往上跳一下然後落下，並且反彈。

Week 03 Hankins

一、圓形上的點

畫出一個圓形(半徑240)，並且在圓形上想畫出三角形，但要如何在圓形上找到一個無禮數的點呢?

三角形的參數(x1,y1,x2,y2,x3,y3)。

利用COS()、SIN()。

X座標其實是COS()，Y座標其實是SIN()。

圓的半徑不為1，目前是240，每個X，Y的位置要乘上240，又圓心在(250，250)，因此加上250。半個圓為PI，兩個圓為2*PI，將半個圓分為三個再除以3。利用FOR迴圈帥氣做出圓內的三角形。

Bingo

前面說到，半徑是240，乘上240可表示三角形的大小，所以用第二個FOR迴圈來描述R表示三角形的大小，這裡用到noFill()函數，可以讓圖形不上色。

noFill()說明

程式碼:

void setup(){

  size(500,500); 

}

void draw(){

  ellipse(250,250,480,480); 

  for(float angle=0; angle<PI*2;  angle+=PI/3){

    for(int R =0 ; R<=240; R+=10){  

    noFill();

    triangle(250,250,

            250+R*cos(angle),250+R*sin(angle)

           ,250+R*cos(angle+PI/3),250+R*sin(angle+PI/3));

    }

  }       

           

}

二、做出有規律的小小三角形

先用圓做出一個模型再慢慢刻劃，利用簡單的雙FOR迴圈完成。

再來要開始用三角形了，如果自行宣告一個函數來畫三角形會很輕鬆，因此宣告mytriangle()函數來畫三角形。

(cx,cy)為圓心，R是半徑可表示三角形大小，畫三個三角形

把R及a寫死，看看成為甚麼樣子。

最後加入FOR迴圈，a重新給值。

程式碼:

void setup(){
 size(800,400);

}

void mytriangle(int cx, int cy){
  float  a=-PI/2;
  for(int R=15; R>0; R-=5){
    triangle( cx+R*cos(a),cy+R*sin(a),
              cx+R*cos(a+2*PI/3),cy+R*sin(a+2*PI/3),
              cx+R*cos(a-2*PI/3),cy+R*sin(a-2*PI/3));
  }
}

void draw(){
 background(255);
 for(int cx=20; cx<800; cx+=40){
  for(int cy=20; cy<400; cy+=40){
   mytriangle(cx,cy);
  }
 }

  float  a=-PI/2;
}

三、做出一個人物可以跳跳跳(Super Mario)

先把Mario放進程式裏頭，要注意以下是錯誤示範!

這樣會浪費記憶體空間，程式會越來越大(因為讀不只一次)

正確做法

加入函式keyCode()，讓人物可以往上下左右動動動。

ax,ay為加速度，Vx,Vy為給予的速度，關閉重洗背景，觀察會有甚麼結果:

woo，有拋物線的感覺了，那試著讓人誤不要掉出邊界吧!

將萬有引力G加到程式哩，讓整體更真實。

如果Y座標>500，則被萬有引力影響往下墜，但不會超過邊界。X座標界在0到300，超過了則速度為反向移動。

程式碼:
PImage imgMario;
float marioX=0, marioY=0, marioVX=2, marioVY=0, marioAX=0, marioAY=0.1;
void setup(){
 size(400,600);
 imgMario = loadImage("mario.png");//read once
}

void draw(){
  //background(255);
  image (imgMario, marioX, marioY, 125, 150);
  marioX += marioVX; marioVX+= marioAX;
  marioY += marioVY; marioVY+= 0.98;
  if(marioY>500){
    marioVY = -marioVY * 0.8;
    marioY = 500;
  }
  if(marioX>300) marioVX = -marioVX;
  if(marioX<0) marioVX = -marioVX;
}
void keyPressed(){
 if(keyCode==UP)     {marioY-=5;}
 if(keyCode==DOWN)   {marioY+=60;}
 if(keyCode==LEFT)   {marioX-=5;}
 if(keyCode==RIGHT)  {marioX+=5;}
 }


圖片支援