達yo - week09

 今天要做 當按下鍵盤的按鍵，會在執行畫面的鍵盤發光

1.1

將鍵盤圖片匯入

把鍵盤移到視窗最下面

圖片高度為266

視窗高度為600

相減

就會放到最下面

void draw(){
  image(img,0,600-266);
}

執行畫面

畫出四邊形(四個角為圓弧)

PImage img;
void setup(){
  size(800,600);
  img = loadImage("keyboard.png");
  rectMode(CENTER);//用中心點，來畫四邊形
}
void draw(){
  background(#FFFFF2);//淡黃色，清背景
  image(img,0,600-266);
  fill(255,0,0,128);//半透明紅色
  rect(mouseX,mouseY,28,30,5);
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}

四邊形的寬、高、弧度設定

印出滑鼠按下某個按鍵的座標位置

執行畫面

1.2

讓字母按鍵上有綠色四邊形

打開notepad++ ，把26個字母的座標位置貼上去

用取代的功能，轉成陣列

程式碼:

PImage img;
int [][] pos={{96,488},{245,526},{171,521},{158,489},{149,450},{199,487},{229,489},{229,489},{264,489},{325,455},{299,485},{332,487},{362,486},
{310,520},{279,525},{352,456},{387,456},{78,453},{186,455},{123,488},{217,457},{287,455},{211,519},{118,454},{142,524},{254,453},{109,528}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.png");
  rectMode(CENTER);//用中心點，來畫四邊形
}
void draw(){
  background(#FFFFF2);//淡黃色，清背景
  image(img,0,600-266);
  fill(255,0,0,128);//半透明紅色
  rect(mouseX,mouseY,28,30,5);
  fill(0,255,0,128);
  for(int i=0;i<26;i++){
    rect(pos[i][0],pos[i][1],28,30,5);
  }
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}

執行畫面

(可看出位置沒有對整齊)

2.1

按下鍵盤按鍵

視窗上的按鍵有綠色四邊形出現

修改15~17行

改成按下那個按鍵，按鍵才發光

新增鍵盤按下去和放開的程式碼

boolean [] pressed = new boolean[26];
void keyPressed(){
  if(key>='a' && key<='z') pressed[key-'a'] = true;
}
void keyReleased(){
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}

執行畫面

2.2

視窗印出我們要照打的字串

第二行的第一個字會出現字串的第一個字

鍵盤會對應字母發光

執行畫面

照字串打

打甚麼字母，鍵盤就會發光(打A就亮A...)

*打好的字會從紅色變成黑色*

執行畫面

程式碼:

PImage img;
int [][] pos={{92,491},{246,524},{176,525},{159,491},{151,455},{195,490},{229,489},{264,489},{322,456},{297,492},{330,489},{367,490},{313,523},{280,524},{356,456},{391,457},{84,456},{186,458},{127,491},{220,457},{286,457},{213,523},{117,457},{143,524},{254,454},{110,525}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.png");
  rectMode(CENTER);//用中心點，來畫四邊形
}
void draw(){
  background(#FFFFF2);//淡黃色，清背景
  image(img,0,600-266);
  fill(255,0,0,128);//半透明紅色
  rect(mouseX,mouseY,28,30,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],28,30,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],28,30,5);
  }
  textSize(50);
  fill(0);//黑色的字
  text(typing,50,50);//要打的字
  fill(255,0,0);//紅色
  text(typed + typing.charAt(ID),50,100);//現在要打的字，是typing.charAt(0)
  fill(0);//再用黑色，秀出已經打好的字
  text(typed,50,100);//已經打好的字
}
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座標
}

3.1

解決打錯字的問題

使打錯字的時候不會呈現在畫面上

並且會閃一下紅色

3.2

解決超過長度會當機的問題

執行畫面

3.3

增加按下空白鍵，打出空格

程式碼:

PImage img;
int [][] pos={{92,491},{246,524},{176,525},{159,491},{151,455},{195,490},{229,489},{264,489},{322,456},{297,492},{330,489},{367,490},{313,523},{280,524},{356,456},{391,457},{84,456},{186,458},{127,491},{220,457},{286,457},{213,523},{117,457},{143,524},{254,454},{110,525}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.png");
  rectMode(CENTER);//用中心點，來畫四邊形
}
void draw(){
  background(#FFFFF2);//淡黃色，清背景
  image(img,0,600-266);
  fill(255,0,0,128);//半透明紅色
  rect(mouseX,mouseY,28,30,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],28,30,5);
    if(pressed[i])rect(pos[i][0],pos[i][1],28,30,5);
  }
  textSize(50);
  fill(0);//黑色的字
  text(typing,50,50);//要打的字
  fill(255,0,0);//紅色
  if(ID<typing.length()) text(typed + typing.charAt(ID),50,100);//現在要打的字，是typing.charAt(0)
  fill(0);//再用黑色，秀出已經打好的字
  text(typed,50,100);//已經打好的字
}
String typing = "printf is a function";
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座標
}

執行畫面