新增圖片到程式碼
- 將老師傳的圖片移至程式資料夾
- 加入程式碼，讓鍵盤圖片顯示到下方
- 程式碼
PImage img;void setup(){size(800, 600);img = loadImage("keyboard.png");}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);}
將鍵盤塗上綠色
- 另存程式碼，用第二步的滑鼠點擊記錄26字母的鍵位座標
- 將字母鍵位以綠色半透明方框標記
- 程式碼
PImage img;int [][]pos = {{83,456},{116,457},{151,457},{185,457},{221,457},{256,456},{287,456},{321,457},{357,457},{391,456},{94,490},{128,491},{161,490},{196,491},{229,491},{263,491},{297,491},{332,491},{366,491},{109,524},{144,525},{178,525},{213,524},{246,524},{281,524},{315,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(){println(mouseX, mouseY);}
鍵盤輸入顯示顏色
- 另存程式碼，新增程式碼，使執行後打字會讓字出現綠色
- 程式碼
PImage img;int [][]pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,525}};void setup(){size(800,600);img=loadImage("keyboard.png");rectMode(CENTER);}void draw(){background(#FFFFF2);image(img,0,600-266);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];void keyPressed(){if(key>='a'&&key<='z') pressed[key-'a']=true;}void keyReleased(){if(key>='a'&&key<='z') pressed[key-'a']=false;}
秀出字母
- 另存程式碼，新增程式碼，使執行後鍵盤上秀出上面文字區的字母
- 程式碼
PImage img;int [][]pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,525}};void setup(){size(800,600);img=loadImage("keyboard.png");rectMode(CENTER);}void draw(){background(#FFFFF2);image(img,0,600-266);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);}String typing="printf";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;}
鍵盤互動
- 另存程式碼，新增程式碼，使打字可出現字母，且會提示要打字的字母為綠色
- 程式碼
PImage img;int [][]pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,525}};void setup(){size(800,600);img=loadImage("keyboard.png");rectMode(CENTER);}void draw(){background(#FFFFF2);image(img,0,600-266);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);fill(0);text(typed,50,100);}String typing="printfprintfprintf";String typed="";boolean[]pressed=new boolean[26];int ID=0;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;}
鍵盤互動：新增打錯時會畫面閃爍
- 另存程式碼，新增程式碼，執行後如果打錯的話畫面會閃紅色
- 打對會照常
- 程式碼
PImage img;int [][]pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,525}};void setup(){size(800,600);img=loadImage("keyboard.png");rectMode(CENTER);}void draw(){background(#FFFFF2);image(img,0,600-266);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);fill(0);text(typed,50,100);}String typing="printfprintfprintf";String typed="";boolean[]pressed=new boolean[26];int ID=0;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;}
鍵盤互動：不限制長度
- 另存程式碼，新增程式碼 ID<typing.length() 讓程式碼不會因為長度過長而掛掉
- 程式碼
PImage img;int [][] pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,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,30,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);fill(0);text(typed,50,100);}String typing="printfprintfprintf";String typed ="";int ID = 0;boolean[] pressed =new boolean[26];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) ;}
鍵盤互動：打完字停止互動
- 另存程式碼，新增程式碼，使執行後打完字會停止互動，不會出現紅色
- 程式碼
PImage img;int [][] pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,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,30,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);fill(0);text(typed,50,100);}String typing="printfprintfprintf";String typed ="";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;}void mousePressed(){print(mouseX,mouseY) ;}
上傳程式碼
- 上傳程式碼至Github
沒有留言:
張貼留言