2023年10月19日 星期四

Jia的互動技術日誌 Week06

  💻😄

今天想教拼字遊戲

老師先給我們看之前的範例

內容是 有一個中文字 要輸入對應的英文
當拼錯時 會記錄錯誤單字

會記錄陣列 資料來源是教育部

ex : 530,293,110,1290 錯誤的會被記錄 可以加強練習

  ☝1

打字遊戲第一步 要有文字

💾 程式碼存檔區
size (500,500);
textSize(64);
text("Hello World",100,100);
textSize 以下字型大小 64
位置在100,100

填充顏色

💾 程式碼存檔區
size (500,500);
textSize(64);
text("Hello World",100,100);

fill(255,0,0);
text("Red",100,200);
fill 底下出現的字填充紅色
位置在100,200

要有按鍵 想要互動
💾 程式碼存檔區
void setup(){
  size (500,500);
  textSize(64);
}
String line = "Input: ";
void draw(){
  text(line,100,100);
}
void keyPressed(){
  line+=key;
}
String line = "Input: ";
一開始只 text ("Input: ")
只顯示 Input:
當鍵盤按下 會記錄按下的字
可以一直讀入字(特殊符號印不出來)

解決亂碼問題
💾 程式碼存檔區
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;
}
如果在A-Z範圍內 讀入
如果在a-z範圍內 讀入

很好 可以打全部的字母


如果我打錯字 應該要能後悔吧

參考文件 keyCode 發現有 BACKSPACE 倒退鍵寫法
且 String 的參考文件中可以看到一些用法 例如 substring() length()

substring() 

    String str1 = "CCCP"; 
    String str2 = "Rabbit"; 
    String ss1 = str1.substring(2);     // Returns "CP"
    String ss2 = str2.substring(3);     // Returns "bit"
    String ss3 = str2.substring(0, 2);  // Returns "Ra"
    println(ss1 + ":" + ss2 + ":" + ss3);  // Prints "CP:bit:Ra"

取到部分的文字
💾 程式碼存檔區
void setup(){
  size (1500,500);
  textSize(64);
}
String line = "Input: ";
void draw(){
  background(0);
  text(line,100,100);
}
void keyPressed(){
  if(key>='A'&& key<='Z')line += key;
  if(key>='a'&& key<='z')line += key;
  if(key == BACKSPACE)line = line.substring(0,line.length()-1);
}
當按下倒退鍵 選到長度-1的字串 這樣最後一個字就會被刪掉
因為會有殘影！所以要加背景
看起來好像很開心 但是出大事😈Input:也被我刪掉了 最後程式當機

不可以被刪掉啊
💾 程式碼存檔區
void setup(){
  size (1500,500);
  textSize(64);
}
String line = "";
void draw(){
  background(0);
  text("Input: "+line,100,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);
  }
}
所以改變寫法 把預設改成 Input: 
當按下倒退鍵 且 我們的字數大於0時 才可以有倒退功能
不管怎麼輸入和刪除都正常啦

🎶🎵🎶
下載 聲音功能
Sketch 程式素描本 > 使用函式庫 > Manager libraries > sound
協助 > 參考文件 > libraries > SoundFile()

💾 程式碼存檔區
import processing.sound.*;
SoundFile file;
void setup(){
  size(300,300);
  file = new SoundFile(this,"a.mp3");
  file.play();
}
void draw(){

}
SoundFile的格式
this 代表 這個程式加進去
幾個重點
副檔名很重要！ 然後mp3要拉到程式裡
下面 void draw()函式 雖然是空的 但是很重要一定要打！
💾 程式碼存檔區
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();
}
按下 1 2 3 有不同音效
(但是有個bug 同時按123會同時出現)

想讓程式變厲害
動作對應音效
💾 程式碼存檔區
import processing.sound.*;
SoundFile da,dingdong,ouch;
void setup(){
  size (1500,500);
  textSize(64);
  da = new SoundFile(this,"da.mp3");
  dingdong = new SoundFile(this,"dingdong.mp3");
  ouch = new SoundFile(this,"ouch.mp3");
}
String line = "";
void draw(){
  background(0);
  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();
  }
}
if(key>='A'&&key<='Z'){
    line+=key;
    da.play();
} 這樣就好理解了
正確輸入有 da 倒退鍵 歐歐 Enter 燈燈

😏➰ 小思考 

一個函式裡大概5-10行就差不多了 不用太複雜
🎶🚫🎶
解決剛才音效擠在一起的問題
SoundFile 還有很多功能
👻 ⇩ 💥💥💥
💾 程式碼存檔區
void setup(){
  size (400,600);
  textSize(12);
}
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)*3;
  x += dx / d;
  y += dy / d;
}
有個字 hello 起始位置 100,100
計算距離
會一直往圓圈下降
💾 程式碼存檔區
void setup(){
  size (400,600);
  textSize(12);
}
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)*3;
  x += dx / d;
  y += dy / d;
  if(keyPressed){
    stroke(255,0,0);
    line(200,550,x,y);
  }
}
如果有按按鍵 畫線(射它)

要正確辨識文字囉
String 文件
charAt()
如果 key ==現在按的按鍵 相同 比對成功

💾 程式碼存檔區
void setup(){
  size (400,600);
  textSize(12);
}
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)*3;
  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;
  }
}
按鍵按對就會吃掉一個字母
A 讀到 輸入的按鍵 用紅字表示正確字母
建立一個好用的 randomQQ
💾 程式碼存檔區
void setup(){
  size (400,600);
  textSize(12);
  randomQ();
}
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)*3;
  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;
  }
}
每次隨機出現 隨機位置和挑選QQ中的字串

💾 程式碼存檔區
void setup(){
  size (400,600);
  textSize(12);
  randomQ();
}
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)*3;
  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 = "";
    }
  }
}
如果完全相同！就randomQ選新的字 然後清空A
最後調整一下線！
💾 程式碼存檔區
void setup(){
  size (400,600);
  textSize(12);
  randomQ();
}
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)*3;
  x += dx / d;
  y += dy / d;
  if(keyPressed){
    stroke(255,0,0);
    line(200,550,x+textWidth(A),y);
  }
}
void keyPressed(){
  int i = A.length();
  if( key == Q.charAt(i)){ //相同 非常好
    A += key;
    if(Q.equals(A)){
      randomQ();
      A = "";
    }
  }
}
對齊成功！


😮期中作業😮
組員：10160491 曾惟筠 & 10160384 黃子珈
主題：莉露姆做蛋糕 🎂🎂🎂





於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)