2023互動技術: Jia的互動技術日誌 Week09

🖮 🖮 🖮

今天想做打字遊戲

先下載一張鍵盤的圖片

💾 程式碼存檔區

PImage img;
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
}
void draw(){
  image(img,0,600-296);
}

讀入圖片(一樣記得拉進來哦)

位置設定 600-296? 因為這張圖高度296 視窗開600 所以600-296讓鍵盤圖片貼底



想讓按鍵盤的同時 顯示我們按了什麼鍵

一步一步來
💾 程式碼存檔區
PImage img;
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明
  rect(mouseX,mouseY,43,43,5);//5圓滑
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
首先讓滑鼠對齊方塊中心
然後鍵出一個方塊
fill(r,g,b,a)a是透明度
rect(mouseX,mouseY,43,43,5)
方塊的位置跟著滑鼠x y移動 大小是取決於圖片的鍵盤 最後一個5 是讓四方形周圍圓滑

當按下滑鼠時 小黑會秀出位置
既然可以秀出位置 那現在依序點完
從小黑中複製所有點
打開notepad++ 貼上 選中間空格 crtl h 取代 空格便逗號 
把尾巴的跳行 取代成 },{
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    rect(pos[i][0],pos[i][1],43,43,5);
  }
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
int[][] a={}; 是 java 中二維陣列寫法
淺綠色加在格子上 用for迴圈放到每個字母上

手動點可能點歪 不開心
然後我們想知道 現在鍵盤按了誰
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5);
  }
}
boolean [] pressed = new boolean[26];//java的陣列宣告 都是0或false
void keyPressed(){
  if(key>='a'&&key<='z')pressed[key-'a']=true;
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
宣告 boolean [] pressed 一開始都是0或false
如果壓下 a   pressed[key-'a']=true 
所以去上面 if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5) 綠色印出位置

現在要配合打字啦

規則：上方會出現 要打的單字
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    if(typing.charAt(0)-'a'==i)rect(pos[i][0],pos[i][1],43,43,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5);
  }
  fill(0);//黑色的字
  textSize(50);
  text(typing,50,80);
  text(typing.charAt(0),50,120);//現在要打的字是 typing.charAt(0)
}
String typing = "printf";
boolean [] pressed = new boolean[26];//java的陣列宣告 都是0或false
void keyPressed(){
  if(key>='a'&&key<='z')pressed[key-'a']=true;
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
現在要秀出目標文字
String typing = "printf"
抓到第一個字元 讓他的鍵盤秀顏色
charAt() 參考文件 去抓字
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    if(typing.charAt(ID)-'a'==i)rect(pos[i][0],pos[i][1],43,43,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5);
  }
  fill(0);//黑色的字
  textSize(50);
  text(typing,50,80); //要打的字
  fill(255,0,0);//紅色
  text(typed+typing.charAt(ID),50,120);//現在要打的字是
  fill(0);
  text(typed,50,120); //已經打好的字
}
String typing = "printfprintfprintf";
String typed = "";//一開始打了0個字
int ID = 0; //第幾個字母要被打
boolean [] pressed = new boolean[26];//java的陣列宣告 都是0或false
void keyPressed(){
  if(key>='a'&&key<='z'){
    pressed[key-'a']=true;
    typed += key;
    ID++;
  }
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
加入 typed 已經打好的 一開始是空的 打0個字
ID 記錄第幾個字母要打
現在要打的字母改寫成 typed+typing.charAt(ID) 黑黑的已打好的+紅紅的現在要打的字
上面鍵盤的選色也變成秀出現在要打的鍵盤
這樣就能對照打字啦
但是程式還有bug 打超過陣列大小會當機

打錯字呢？現在打錯字會糊弄過去

應該要告訴他 你錯了！
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    if(typing.charAt(ID)-'a'==i)rect(pos[i][0],pos[i][1],43,43,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5);
  }
  fill(0);//黑色的字
  textSize(50);
  text(typing,50,80); //要打的字
  fill(255,0,0);//紅色
  text(typed+typing.charAt(ID),50,120);//現在要打的字是
  fill(0);
  text(typed,50,120); //已經打好的字
}
String typing = "printfprintfprintf";
String typed = "";//一開始打了0個字
int ID = 0; //第幾個字母要被打
boolean [] pressed = new boolean[26];//java的陣列宣告 都是0或false
void keyPressed(){
  if(key>='a'&&key<='z'){
    if(key==typing.charAt(ID)){ //字母正確就往下
      pressed[key-'a']=true;
      typed += key;
      ID++;
    }else{
      background(255,0,0); //背景閃爍紅色
    }
  }
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
如果字母正確就繼續做印字
如果不正確是吧 背景用紅色閃瞎你

要解決 超過陣列大小後當機問題

且printf~打完後 可以換下個字
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    if(ID<typing.length() && typing.charAt(ID)-'a'==i)rect(pos[i][0],pos[i][1],43,43,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5);
  }
  fill(0);//黑色的字
  textSize(50);
  text(typing,50,80); //要打的字
  fill(255,0,0);//紅色
  if(ID<typing.length())text(typed+typing.charAt(ID),50,120);//現在要打的字是
  fill(0);
  text(typed,50,120); //已經打好的字
}
String typing = "printfprintfprintf";
String typed = "";//一開始打了0個字
int ID = 0; //第幾個字母要被打
boolean [] pressed = new boolean[26];//java的陣列宣告 都是0或false
void keyPressed(){
  if(key>='a'&&key<='z'){
    if(ID<typing.length() && key==typing.charAt(ID)){ //字母正確就往下
      pressed[key-'a']=true;
      typed += key;
      ID++;
    }else{
      background(255,0,0); //背景閃爍紅色
    }
  }
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
ID要小於已經打好的字的長度
意思就是ID不會大於要打的字的長度

程式準備高級起來了
💾 程式碼存檔區
PImage img;
int [][] pos ={{114,472},{336,523},{236,523},{214,472},{191,421},{264,472},{314,472},{364,472},{441,421},{414,473},{464,473},{514,472},{437,523},{386,524},{490,421},{541,421},{91,420},{240,421},{164,472},{291,420},{390,420},{286,523},{140,421},{185,523},{340,421},{136,524}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  rectMode(CENTER);
}
void draw(){
  background(#FFFFF2);//淡黃色背景
  image(img,0,600-296);
  fill(255,0,0,128);//128半透明紅色
  rect(mouseX,mouseY,43,43,5);//5圓滑
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<26;i++){
    if(ID<typing.length() && typing.charAt(ID)-'a'==i)rect(pos[i][0],pos[i][1],43,43,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],43,43,5);
  }
  fill(0);//黑色的字
  textSize(50);
  text(typing,50,80); //要打的字
  fill(255,0,0);//紅色
  if(ID<typing.length())text(typed+typing.charAt(ID),50,120);//現在要打的字是
  fill(0);
  text(typed,50,120); //已經打好的字
}
String typing = "printf is a fuction";
String typed = "";//一開始打了0個字
int ID = 0; //第幾個字母要被打
boolean [] pressed = new boolean[26];//java的陣列宣告 都是0或false
void keyPressed(){
  if(ID<typing.length() && key==typing.charAt(ID)){
    if(key>='a'&&key<='z'){
      pressed[key-'a']=true;
      typed += key;
      ID++;
    }else if(key == ' '){
      typed += key;
      ID++;
    }else{
      background(255,0,0); //背景閃爍紅色
    }
  }
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
大改一下，一樣是把字限定在範圍內 如果字母正確就往下
是英文字母大小寫就大小寫
如果是空格(或是其他)就繼續往下走
如果都不是 閃爍！