SangMo 互動技術Week06

 打字遊戲

Step1 字體大小顏色設定

程式碼:

size(500,500);
textSize(64);///字體大小
text("Hello World",100,100);
fill(255,0,0);///填充顏色
text("Red",100,200);
執行圖:
Step2 按鍵後打出字

程式碼:

void setup(){
  size(500,500);
  textSize(64);
}
String line = "Input:";
void draw(){
  text(line,100,100);
}
void keyPressed(){
  line+= key;
}

執行圖:
Step3 利用if可以打出字母大小寫

程式碼:

void setup(){
  size(500,500);
  textSize(64);
}
String line = "Input:";
void draw(){
  text(line,100,100);
}
void keyPressed(){
  if(key>='A' && key<='Z')line+= key;
  if(key>='a' && key<='z')line+= key;
}
執行圖:
Step4 增加BACKSPACE修改功能

程式碼:

void setup(){
  size(700,700);
  textSize(64);
}
String line = "";
void draw(){
  background(#17EEFF);
  text("Input:" +line,50,100);
}
void keyPressed(){
  if(key>='A' && key<='Z')line+= key;
  if(key>='a' && key<='z')line+= key;
  if(key==BACKSPACE && line.length()>0){
    line = line.substring(0,line.length()-1);
  }
}

執行圖:
Step 5 增加音樂

程式碼:

import processing.sound.*;

SoundFile file;
void setup(){
  size(300,300);
  file = new SoundFile(this,"ab.mp3");
  file.play();
}
void draw(){
  
  
}
Step6 增加音效
程式碼:
import processing.sound.*;
SoundFile dadada,good,over;
void setup(){
  size(300,300);
  dadada=new SoundFile(this,"dadadadada.mp3");
  good=new SoundFile(this,"good.mp3");
  over=new SoundFile(this,"over.mp3");
}
void draw(){
  text("press 1,2,3",100,100);
}
void keyPressed(){
  if(key=='1')dadada.play();
  if(key=='2')good.play();
  if(key=='3')over.play();
}
按下鍵就能發聲，但同時按會同步 所以接下來要弄間隔。
Step7 46程式合併
程式碼:
import processing.sound.*;
SoundFile da,dingdong,ouch
void setup(){
  size(800,400);
  textSize(64);
  da = new SoundFlie(this,"da.mp3");
  dingdong = new SoundFlie(this,"dingdong.mp3");
  ouch = new SoundFlie(this,"ouch.mp3");
}
String line = "";
void draw(){
  background(#17EEFF);
  text("Input:" +line,50,100);
}
void keyPressed(){
  if(key>='A' && key<='Z'){line+= key;da.play();}
  if(key>='a' && key<='z'){line+= key;da.play();}
  if(key==BACKSPACE && line.length()>0){
    line = line.substring(0,line.length()-1);
    ouch.play();
  }
  if(key == ENTER){
    dingdong.play();
  }
}

Step8 打字遊戲1
程式碼:
void setup(){
  size(400,600);
  textSize(14);
}
String Q= "hello",A="";
float x=100,y=100;
void draw(){
  background(0);
  text(Q,x,y);
  ellipse(200,550,20,20);
  float dx = (200-x),dy=(550-y),d = sqrt(dx*dx+dy*dy)*2;
  x+=dx/d;
  y+=dy/d;
}
執行圖:
Step8-2 打字遊戲2
加上射線
程式碼:
void setup(){
  size(400,600);
  textSize(14);
}
String Q= "hello",A="";
float x=100,y=100;
void draw(){
  background(0);
  text(Q,x,y);
  ellipse(200,550,20,20);
  float dx = (200-x),dy=(550-y),d = sqrt(dx*dx+dy*dy)*2;
  x+=dx/d;
  y+=dy/d;
  if(keyPressed){
    stroke(255,0,0);
    line(200,550,x,y);
  }
}
執行圖:
Step9 打字遊戲3
打對字就會變紅
程式碼:
void setup(){
  size(400,600);
  textSize(14);
}
String Q= "hello",A="";
float x=100,y=100;
void draw(){
  background(0);
  fill(#FFFFFF);text(Q,x,y);
  fill(#FF0000);text(A,x,y);
  ellipse(200,550,20,20);
  float dx = (200-x),dy=(550-y),d = sqrt(dx*dx+dy*dy)*2;
  x+=dx/d;
  y+=dy/d;
  if(keyPressed){
    stroke(255,0,0);
    line(200,550,x,y);
  }
}

void keyPressed(){
  int i = A.length();
  if(key == Q.charAt(i)){
    A += key;
  }
}
執行圖:

Step A 創造更多字 字打對後消失
程式碼:
void setup(){
  size(400,600);
  textSize(14);
}
void randomQ(){
  int i = int (random(QQ.length));
  Q=QQ[i];
  x=random(0,300);
  y=random(0,100);
}
String []QQ = {"void","setup","float","string","background","fill"};
String Q= "hello",A="";
float x=100,y=100;
void draw(){
  background(0);
  fill(#FFFFFF);text(Q,x,y);
  fill(#FF0000);text(A,x,y);
  ellipse(200,550,20,20);
  float dx = (200-x),dy=(550-y),d = sqrt(dx*dx+dy*dy)*2;
  x+=dx/d;
  y+=dy/d;
  if(keyPressed){
    stroke(255,0,0);
    line(200,550,x,y);
  }
}

void keyPressed(){
  int i = A.length();
  if(key == Q.charAt(i)){
    A += key;
    if(Q.equals(A)){
      randomQ();
      A="";
    }
  }
}
執行圖:

製作一個2D射擊遊戲，有一個100x100格的場景，人物能在介面上選擇上下左右後移動，子彈有炸十字的，9宮格的
在現有的子彈內擊敗所有敵人