2023年11月9日 星期四

XX - Week09




=========================================================================

NINTH

今天要做打字遊戲


1.先下載一張鍵盤的圖片，接著放進一個鍵盤的圖片到視窗裡(記得圖片的檔案要先拉進到Processing)
PImage img;
void setup(){
  size(800,600);
  img = loadImage("keyboard.png");
}
void draw(){
  image(img, 0, 600-266);
}
註:因為高度266、視窗600，所以圖片要貼底的話要600-266


2.做出一個類似按鍵的方框，並且滑鼠如果點選的話就會印出座標
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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}
註:rect=>方塊的位置會跟著滑鼠XY做移動


3.將A~Z的字母用透明綠色方框標示起來(利用剛剛點完的座標做出來)
PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}

4.按下A~Z按鍵之後會用透明綠色方框顯示出來我們點了哪些鍵

PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
}
boolean [] pressed = new boolean[26];//Java的陣列宣告,都是0 or 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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}
註:pressed[key-'a']的true、false跟if(pressed[i])相關，true即用半透明綠色方框顯示出位子

5.將要打的字跟按鍵都秀出來(以printf為例，P鍵會先亮起來)

PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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);
  }
  fill(0);//黑色的字
  textSize(50);
  text(typing, 50, 50);
  text(typing.charAt(0), 50, 100);//現在要打的字,是typing.charAt(0);
}
String typing = "printf";
boolean [] pressed = new boolean[26];//Java的陣列宣告,都是0 or 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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}
註:String typing是目標的字，可用charAt()抓字母



6.能夠打出要打的字，並且用紅色顯示目前要打的字母

PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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(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);//紅色
  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 or 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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}


7.字打才可以繼續，打錯就閃紅色畫面

PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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 or 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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}


8.解決了字打完程式就會當掉的問題(能夠打完全部的字母)

PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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(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);//紅色
  if(ID<typing.length()) 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 or 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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}
註:ID<打的長度，要限制這樣才不會讓程式當機


9.能夠使用空白鍵了

PImage img;
int [][] pos = {{93,491},{247,524},{178,524},{162,490},{152,456},{195,490},
               {228,491},{264,491},{322,456},{298,489},{332,490},{365,490},
               {314,524},{281,524},{356,456},{390,457},{84,457},{187,457},
               {128,491},{221,457},{286,456},{213,524},{119,456},{145,524},
               {254,457},{109,524}};
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(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);//紅色
  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 or 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(){
  print(mouseX, mouseY);//定位、印出mouse座標
}
註:改變判斷的順序，先判斷範圍，再來大小寫、空白或是打錯就閃紅色畫面
於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)