你說...什麼

要做一個鍵盤相關打字遊戲

STEP 01

1.開啟processing，視圖片大小調整要開多大的視窗

2.用PImage貼鍵盤圖

STEP 02

1.透過滑鼠座標得到鍵盤座標

2.在滑鼠位置用中心點畫四邊形，並設置半透明的紅色

3.加上背景色用來清背景

4.藉按下滑鼠印出取得滑鼠座標

STEP 03

1.用第二步取得的鍵盤座標，新增陣列並用for迴圈上色

2.可善用notepad++的取代功能加速鍵盤座標變成開陣列須符合的格式

STEP 04

1.要讓使用者知道自己按了什麼，全部發光是不行的

2.宣告26個布林變數，預設為否

3.現在不需要印出滑鼠座標，修改按下鍵盤時，布林變數變成true

4.畫綠框加條件布林變數為true才畫

5.鍵盤放開，布林變數要變回false

STEP 05

1.作為打字遊戲要有題目，宣告string typing，先隨便設個單字

2.顯示出typing的字，可以放大並填充為黑色作為題目

3.利用typing.chatAt(0)顯示出現在要打的字，意思是typing的第一個字

STEP 06

1.宣告string typed，做為已經打過的字

2.宣告id = 0

3.鍵盤按下，typed+=key得到使用者的輸入，id++

4.把text(typing.charAt(0), 50,100);變成text(typed + typing.charAt(id), 50,100);加上使用者打的字，並利用id++，讓顯示出的字跳下一個

5.把for迴圈中做綠框的typing.chatAt裡也改成id，使得綠框位置也會跟著變動

6.現在有兩個問題，使用者可以不照題目亂打以及如果id超過範圍，程式執行就會炸掉

STEP 07

1.在鍵盤按下加上if判斷，設定打正確的字母，程式才往下跑

2.加一個else閃爍紅色背景作為打錯字的提示

3.解決亂打字仍顯示的問題

STEP 08

1.在與id相關的if判斷中或程式前面，加上條件id要小於typing(題目)的長度，避免id爆炸

STEP 09

1.打字不一定都是單字，也會有句子之類的，句子會用到空格跟標點符號

2.加上else if判斷式，如果是空格，typed+=空格，id要++

3.把上面的兩個if判斷順序交換，使空格變成合法的，因此變動，錯字判斷也要下移一個大括號

最終結果程式碼:

PImage img;

int [][] pos ={{92,491},{245,525},{173,526},{159,491},{153,457},{194,491},{228,491},{263,489},{322,456},{298,491},{331,491},{366,490},{313,524},{279,524},{358,456},{390,457},{82,455},{186,456},{127,490},{219,457},{289,457},{211,523},{116,457},{143,522},{253,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(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);

  }

  fill(0);

  textSize(30);

  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];

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;

}