Week 19 ： 普通的ㄒㄆ的普通的筆記_ 期末展示

主題：小精靈

組員：04160152 謝佩軒 04160551 劉宛俞

說明：利用方向鍵控是小精靈移動，吃掉白點點，吃掉全部的白點點遊戲就獲勝。同時還要躲避鬼怪，如果被鬼怪碰到的話遊戲就結束了。

Youtube 影片

遊戲畫面

Processing 

import processing.serial.*;
Serial myPort;
int [][]map={ {9,9,9,9,9,9,9,9,9 ,9,9,9,9,9,9,9,9,9,9 ,9,9,9,9,9,9,9,9,9,9},//9,10,10
              {9,5,5,5,5,5,5,5,5 ,9,5,5,5,5,5,5,5,5,5 ,9,5,5,5,5,5,5,5,5,9},
              {9,5,0,1,1,1,1,1,1 ,9,5,1,1,1,1,1,1,1,1 ,9,5,1,1,1,1,1,1,1,9},
              {9,5,1,9,9,9,9,5,1 ,9,9,5,1,0,0,0,0,1,9 ,9,5,1,9,9,9,9,5,1,9},
              {9,5,1,9,5,5,5,5,1 ,5,5,5,1,0,0,0,0,1,5 ,5,5,1,5,5,5,9,5,1,9}, //5
              {9,5,1,9,5,1,1,1,1 ,1,1,1,1,1,1,1,1,1,1 ,1,1,1,1,1,1,9,5,1,9},
              {9,5,1,9,5,1,1,1,9 ,5,1,9,9,9,9,9,9,9,5 ,1,9,5,1,1,1,9,5,1,9},
              {9,5,1,9,9,9,5,1,9 ,5,1,9,9,9,9,9,9,9,5 ,1,9,5,1,9,9,9,5,1,9},
              {9,5,1,5,5,5,5,1,5 ,5,1,5,5,5,5,5,5,5,0 ,1,5,5,1,5,5,5,5,1,9},
              {9,5,1,1,1,1,1,1,1 ,1,1,1,1,1,1,1,1,1,1 ,1,1,1,1,1,1,1,1,1,9}, //10
              {9,9,9,9,9,9,9,9,9 ,9,9,9,9,9,9,9,9,9,9 ,9,9,9,9,9,9,9,9,9,9} };
              /// 9=wall , 5= no pass , 0=pacman , 1=food
import ddf.minim.*;
Minim minim;
AudioPlayer music;
AudioPlayer game;
AudioPlayer end;
AudioPlayer over;

PImage imgUP, imgDOWN, imgLEFT , imgRIGHT;
PImage imgMG, imgMP, imgMR , imgMY;
int dir=0,dx=0,dy=0;

void setup(){
  size(870,330);
  background(0);
  imgUP=loadImage("up.JPG");
  imgDOWN=loadImage("down.JPG");
  imgRIGHT=loadImage("right.JPG");
  imgLEFT=loadImage("left.JPG");
  imgMG=loadImage("mos_green.png");
  imgMR=loadImage("mos_red.png");
  myPort = new Serial(this, "COM3", 115200);
 
  minim = new Minim(this);
  music = minim.loadFile("Intro.mp3",1024);//new SoundFile(this, "Intro.mp3");
  game = minim.loadFile("PacMan.mp3",1024);
  end = minim.loadFile("End.mp3",1024);
  over = minim.loadFile("gameover.mp3",1024);
  music.play();
  game.pause();
  end.pause();
  over.pause();
}
float open=1, angle=0;
int now=0;
int pacX=2, pacY=2, pacVX=50 , pacVY=120;
int mX=14,mY=3,MX=16,MY=3;
int food=0, eatfood=0;
int time=0 , time0=0;
int state=0;
void draw(){
  if(state==0){ ///homepage
  ///========pacman=========
    background(0);
    fill(255,255,0);
    noStroke(); arc(pacVX,pacVY,70,70,0+angle+open,PI*2+angle-open);
    pacVX+=1;
    if(pacVX>=940) {pacVX=-70;}
    now++;
    open=abs ((now%60)/60.0-0.5);
  ///=======how to play button=========
    fill(255);
    textSize(28);
    text("How To Play",350,220);
    if(mousePressed && mouseX>350 && mouseX<520 && mouseY>200 && mouseY<225){
       state=3;
    }
  ///=======play game button=========
    fill(255);
    textSize(28);
    text("Play Game",360,275);
    if(mousePressed && mouseX>360 && mouseX<500 && mouseY>255 && mouseY<280){
       state=1;
    } 
  }///State_0, homepage
 
  ///========game Start=========
  if(state==1){
    music.pause();
    game.play();
    //------------around_wall---------
    background(0);
    for(int i=0;i<11;i++){
      for(int j=0;j<29;j++){
         if(map[i][j]==9) {fill(0,0,255); noStroke(); rect(j*30,i*30,30,30);}
      }
    } 
    //------------pacman---------
    fill(255,255,0);
    noStroke(); arc(pacX*30,pacY*30,30,30,0+angle+open,PI*2+angle-open);
    now++;
    open=abs ((now%60)/60.0-0.5);
    //-----------monster----------
    image(imgMG,mX*30-15,mY*30-15,40,40);
    float a, b,c,d;
    a=mX-pacX; b=mY-pacY;
    c=abs(mX-pacX); d=abs(mY-pacY);
    if(a>0 && c>d && map[mY][mX-1]<=1) mX--; //mos to left
    else if(a<=0 && c>d && map[mY][mX+1]<=1) mX++; //mos to right
    else if(b>0 && c<d && map[mY-1][mX]<=1) mY--; //mos to up
    else if(b<=0 && c<d && map[mY+1][mX]<=1) mY++; //mos to down
   
    //-----------Game over----------
      if(mX==pacX && mY==pacY)
      {state=4;}
     
    ///========pacman move=========
    if(dx>0) dx-=3;
    if(dx<0) dx+=3;
    if(dy>0) dy-=3;
    if(dy<0) dy+=3;
    if(dx==0 && dy==0 && dir==1 && pacY-1<11 && map[pacY-1][pacX]<=1) {pacY--; angle=radians(270);dy=-30;} //up
    if(dx==0 && dy==0 && dir==2 && pacY+1>1 && map[pacY+1][pacX]<=1) {pacY++;angle=radians(90);dy=30;}//down
    if(dx==0 && dy==0 && dir==3 && pacX-1>1 && map[pacY][pacX-1]<=1) {pacX--;angle=radians(180);dx=-30;}//left
    if(dx==0 && dy==0 && dir==4 && pacX+1<29 && map[pacY][pacX+1]<=1) {pacX++;angle=0;dx=30;}//right
    if(map[pacY][pacX]==1) {map[pacY][pacX]=0; eatfood++;}
    //-----------food----------
    for(int i=0;i<11;i++){
      for(int j=0;j<29;j++){
        if(map[i][j]==1) {fill(255); noStroke(); ellipse(j*30,i*30, 10, 10);}
      }
    }  ///eatfood=103 
   
    if(eatfood>=103) {state=2;}
  }///state_1 game;
 
   ///========game End(state 2)=========
   if(state==2){
     game.pause();
     end.play();
     fill(255,0,0);
     textSize(100);
     ///text("TIME:"+time, 250, 180);
     text("WIN!!",330,180);   
    }
   
    ///========Game   Over(state 4)=========
      if(state==4){
       game.pause();
       over.play();
       fill(255,0,0);
       textSize(100);
       ///text("TIME:"+time, 250, 180);
       text("GameOver!!",150,180);   
    }
   
   
    ///========how to Play(state 3)=========
    if(state==3){
      background(0);
      fill(255); textSize(24);
      text("Use the keybroad to control pacman move", 80, 80);
      image(imgUP,400,120,60,60);
      image(imgDOWN,400,190,60,60);
      image(imgLEFT,330,190,60,60);
      image(imgRIGHT,470,190,60,60);

      fill(255,255,0); textSize(20);
      text("Back", 800, 300);
      if(mousePressed && mouseX>800 && mouseX<850 && mouseY>280 && mouseY<305){
       state=0;
      } 
    }/// state 3 how to play
   
  }

void keyPressed(){
  if(keyCode==UP) {dir=1;}
  if(keyCode==DOWN) {dir=2;}
  if(keyCode==LEFT) {dir=3;}
  if(keyCode==RIGHT) {dir=4;} 

}

Week 13 ： 普通的ㄒㄆ的普通的筆記

今日目標 :

1. Arduino的物件轉動
2. 馬達


一、旋轉軸加UNO板 & 程式碼
1.



2. 設定Arduino



3. 轉動旋轉軸就可以輸出數字



一、馬達

1. 將馬達連結到UNO板



2.使用範例程式碼



3. 旋轉軸就可以讓馬達震動

Week 12 ： 普通的ㄒㄆ的普通的筆記

今日目標 :

1. Arduino的驅動程式安裝
2.將控制面板連接到Processing

一、安裝方法

1.電腦→ 右鍵→  內容



2.裝置管理員



3.無法辨識的裝置 → 右鍵 → 更新驅動程式軟體



4. 瀏覽電腦上的驅動程式→ Arduino → driver



5.打開Arduino → 工具






二、連結到Processing



程式碼: 

import processing.serial.*;

Serial myPort;
讓 Processing 接到 USB (Serial 等於 USB的S )
void setup()
{
  size(400,400);
  myPort = new Serial(this, COM7, 115200);
}

void draw(){
  if(myPort.available()>0){
    String now = myPort.readString();
    println(now);
  }
}


三、Arduino 與 Processing 結合


                          ↑     Arduino    ↑                                                      ↑  Processing ↑

Week 11 ： 普通的ㄒㄆ的普通的筆記

校外參訪 _ Taipei Hackerspace

找筆記?期中作品

期中作品-小精靈

Week 10 期中作品展示

組員:         

04160152 謝佩軒        

04160551 劉宛俞

作品名稱: 小精靈

Week 06 ： 普通的ㄒㄆ的普通的筆記

今日目標 :

1.做爆爆王的畫面：角色移動操控、放水球
2.講解期中作業小精靈：使小精靈嘴巴能夠自動開合、移動時嘴巴位置不改變

重要概念 : 

1.  keyCode → 鍵盤方向鍵操控角色移動
2.  arc → 有開口的圓形


一、爆爆王

1. 畫出爆爆王的野戰地圖背景



2.增加角色，並使用 keyCode 使他能移動



3.使用陣列的概念 放出水球





程式碼: 

void setup(){
  size (850,500);
}
int userJ=9, userI=5;
float userX,userY;
int waterN=0; ///waterball
int []waterJ=new int[100];
int []waterI=new int[100];
void draw(){
  background(#92AD28);
  noStroke();
  for(int i=0;i<10;i++){
      for(int j=0;j<17;j++){
        if((j-i)%2 ==0) fill(#7E9819);
        else fill(#92AD28);
        rect(j*50,i*50,50,50);
     }
  }
  fill (255,0,0); ellipse(userJ*50+25,userI*50+25,50,50);
  ///USER
  for(int i=0;i<waterN;i++){
    fill(#93E1F7); ellipse(waterJ[i]*50+25,waterI[i]*50+25,30,30);
  }
}
void keyPressed(){
  if(keyCode==LEFT) userJ--;
  if(keyCode==RIGHT) userJ++;
  if(keyCode==UP) userI--;
  if(keyCode==DOWN) userI++;
  ///USER MOVE
  if(key==' '){ waterI[waterN]=userI; waterJ[waterN]=userJ; waterN++;}
/// WATERBALL
}

二、期中作業小精靈

1.畫出小精靈： 使用 arc 概念

2.讓小精靈的嘴巴能夠自動開合

3.使小精靈能夠轉四方向並且嘴巴角度不變 ( keyCode )

4.讓小精靈移動！！

程式碼:

void setup(){

  size (600,400);

}

float open=1, angle=0;

int now=0;

float pacX=300, pacY=200;

int dirX=0, dirY=0;

void draw(){

  background(0);

  fill(255,255,0);

  arc(pacX,pacY,30,30,0+angle+open,PI*2+angle-open);

   pacX+=dirX; pacY+=dirY;

  now++;

  open=abs ((now%60)/60.0-0.5);

  ///0.5 -> 0 -> 0.5 -> 0.5 -> 0 ...

}

int dir=0; 

void keyPressed(){

  if(keyCode==UP) {dirX=0;dirY=-1; angle=radians(270);}

  if(keyCode==DOWN) {dirX=0;dirY=1; angle=radians(90);}

  if(keyCode==LEFT) {dirX=-1;dirY=0; angle=radians(180);}

  if(keyCode==RIGHT) {dirX=1;dirY=0; angle=0;}

}

Week 05 ： 普通的ㄒㄆ的普通的筆記

今日目標 :

1.做出一雙眼睛，眼球能夠跟著滑鼠走
2.泡泡龍射擊
.想出期中作業

重要概念 : 

1. stan → 


一、先畫出兩個眼眶



二、畫出眼球



三、讓眼珠能夠跟著滑鼠走



程式碼:

void setup(){
  size (800,800);
}
void draw(){
  background(128); ///gray
  strokeWeight(20);
  ellipse(100,200 ,180,360);
  ellipse(300,200 ,180,360);
  //ellipse(100,200 ,10,10);
  //ellipse(300,200 ,10,10);
  float angle1 = atan2((mouseY-200)/2 , mouseX-300);
  float newX1= 300 + 100*cos(angle1)/2;
  float newY1= 200 + 200*sin(angle1)/2;
  ellipse(newX1 , newY1 ,10 ,10);
  float angle2 = atan2((mouseY-200)/2 , mouseX-100);
  float newX2= 100 + 100*cos(angle2)/2;
  float newY2= 200 + 200*sin(angle2)/2;
  ellipse (newX2 ,newY2 ,10 ,10);
}

一、做出泡泡龍的射擊



程式碼:
void setup(){
  size (400,800);
}
float ballX=200 ,ballY=600;
float ballVX=0 ,ballVY=0;
float angle=0;
void draw(){
  background(0,128,0);
  fill(#FCC557); ellipse(200,600,100,100);
  line(mouseX, mouseY,200,600);
  fill(#D2FF21); ellipse(ballX,ballY,30,30);
  angle = atan2(mouseY-600, mouseX-200);
 
  ballX+=ballVX;
  ballY+=ballVY;
}
void mouseMoved(){
  ballX=200+50*cos(angle);
  ballY=600+50*sin(angle);
}
void mousePressed(){
    ballVX=cos(angle);
    ballVY=sin(angle);
}

二、讓射擊出去的球，可以回收

Week 04 ： 普通的ㄒㄆ的普通的筆記

今日目標 :

1. 讓上周的angrybird 的豬，可以多一點
2. 加入聲音

重要概念 : 

1.Boolean 函式
2. Sound 文件


一、做出很多隻豬





二、 更改讓豬被碰到就消失的程式碼，因為float的部分被改成boolean函數



程式碼: 

PImage imgBird, imgPig;
float birdX=100,birdY=500;
float birdVX=0 , birdVY=0;
float birdAX=0 , birdAY=0;
float [][]pigx=new float[5][4];
float [][]pigy=new float[5][4];
boolean [][]pigAlive=new boolean[5][4];
void setup(){
  size (800,700);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      pigx[i][j]=700-i*100; pigy[i][j]=100+j*100;
      pigAlive[i][j]=true;
    }
  }
}
void draw(){
  background(255);
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      if(dist(pigx[i][j],pigy[i][j],birdX,birdY)<100){
        pigAlive[i][j]=false;
      }
      if(pigAlive[i][j]) image(imgPig,pigx[i][j],pigy[i][j],100,100);
    }
  }
 
 // image(imgPig,400,300,100,100);
  image(imgBird, birdX,birdY,100,100);
 /* if(dist(pigx,pigy,birdX,birdY)<100)
  {
    pigAlive=false;
  }*/
  //line(birdX,birdY,400,300);
  birdX += birdVX;
  birdY +=birdVY;
  if(birdX<50) {birdX=50; birdVX =-birdVX;}
  if(birdX>width-50) {birdX=width-50; birdVX=-birdVX;}
  if(birdY<50) {birdY=50; birdVY =-birdVY;}
  if(birdY>width-50) {birdY=width-50; birdVY=-birdVY;}

  birdVX += birdAX;
  birdVY += birdAY;
  birdVX *=0.997;
  birdVY *=0.997;
}
void mouseDragged(){
  birdX=mouseX; birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX = (100-mouseX)/ 10.0;
  birdVY = (400-mouseY)/ 10.0;
  birdAY = 0.98;

}


 (1) 直線運動, (2) 拋物線




三、讓加上音效

1.速寫本 → 引用庫文件 → 添加庫文件



2.下載 "Minim" + " Sound "


3.抓入剛才下載的 " Sound "



4. 拖拉音檔進入程式中，資料夾就會自動出現 " data"  這個資料夾，並且裡頭有剛才拖曳的音檔



程式碼:

import processing.sound.*;
SoundFile sound;
void setup()
{
  size (800,600);
  sound = new SoundFile(this,"Intro.mp3");
  sound.play();
  sound.loop();
}

Week 03 ： 普通的ㄒㄆ的普通的筆記

今日目標 :

1.做出angrybird遊戲
2.小朋友下樓梯


重要概念 : 

1. mouseReleased() :滑鼠放開


一、先找兩張圖，並將他們輸入至程式中


若圖片太大，可以在 image 函式後，加上(100,100)


二、加上 mouseReleased 和 mouseDragged  結合牛頓第二定律作出彈出的狀態



三、加上AX與AY 讓鳥能夠受到重力掉下來




四、讓鳥撞到豬，ˊ豬會消失 (pigAlive)



程式碼: 

PImage imgBird, imgPig;
void setup()
{
  size (800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdX=400,birdY=300;
float birdVX=0 , birdVY=0;
float birdAX=0 , birdAY=0;
float pigX=700,pigY=100;
boolean pigAlive=true;
void draw()
{
  background(255);
  if(pigAlive) image(imgPig,pigX,pigY,100,100);
 // image(imgPig,400,300,100,100);
  image(imgBird, birdX,birdY,100,100);
  if(dist(pigX,pigY,birdX,birdY)<100)
  {
    pigAlive=false;
  }
  line(birdX,birdY,400,300);
  birdX += birdVX;
  birdY +=birdVY;
  birdVX += birdAX;
  birdVY += birdAY;
}
void mouseDragged(){
  birdX=mouseX; birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX = (400-mouseX)/ 10.0;
  birdVY = (300-mouseY)/ 10.0;
  birdAY = 0.98;

}

五、增加摩擦力與 撞到牆壁能夠反彈



程式碼: 

PImage imgBird, imgPig;
void setup()
{
  size (800,700);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdX=400,birdY=300;
float birdVX=0 , birdVY=0;
float birdAX=0 , birdAY=0;
float pigX=700,pigY=100;
boolean pigAlive=true;
void draw()
{
  background(255);
  if(pigAlive) image(imgPig,pigX,pigY,100,100);
 // image(imgPig,400,300,100,100);
  image(imgBird, birdX,birdY,100,100);
  if(dist(pigX,pigY,birdX,birdY)<100)
  {
    pigAlive=false;
  }
  //line(birdX,birdY,400,300);
  birdX += birdVX;
  birdY +=birdVY;
  if(birdX<50) {birdX=50; birdVX =-birdVX;}
  if(birdX>width-50) {birdX=width-50; birdVX=-birdVX;}
  if(birdY<50) {birdY=50; birdVY =-birdVY;}
  if(birdY>width-50) {birdY=width-50; birdVY=-birdVY;}
 
  birdVX += birdAX;
  birdVY += birdAY;
  birdVX *=0.997;
  birdVY *=0.997;
}
void mouseDragged(){
  birdX=mouseX; birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX = (400-mouseX)/ 10.0;
  birdVY = (300-mouseY)/ 10.0;
  birdAY = 0.98;

}

Week 02 ： 普通的ㄒㄆ的普通的筆記

今日目標：

1.點擊滑鼠能夠變換顏色與粗細

重要觀念：

滑鼠點擊 → mousePressed()
滑鼠滑動 → mouseDragged ()
色彩觀念 → colorMode() & HSB
加入圖片 → loadImage
加背景 → background(0,0,0)
讓圖片跟滑鼠一起動 → image(img1,mouseX,mouseY,100,100);


一、mousePressed滑鼠點擊時發生

1.當滑鼠X座標小於100時，點擊滑鼠能夠改變粗細
2.當滑鼠X座標大於700時，點擊華數能改變顏色



二、mouseDragged : 滑鼠滑動時發生



三、colorMode & HSB 觀念

1. HSB：
     H: 彩虹、S: 飽和度、B:亮度



  HSB

→ (100,100,100) : Red                                                     



→ (i,100,100) : 彩色



→ (100,i,100) : 紅色漸層(white > Red)   

→ (100,100,i) : 亮度變化 (Black > Red)

四、圖片加入與背景

1.選擇圖片，拖曳放入程式碼!!!! (若未拖曳加入，則會當掉)

2.加入背景 background(49,255,205);

3.讓圖片能夠跟滑鼠一起動