Week09
-----------------------------------------------------------------------------------------------------------------------------
1.匯入圖片
PImage img; void setup(){ size(800,600); img=loadImage("keyboard.png"); } void draw(){ image(img,0,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(){ println(mouseX,mouseY);//定位，印出mouse座標 }
3.於上一個程式跳出的視窗點擊鍵盤圖片，得到對應的座標後輸入進去，執行程式後再對應的鍵盤會印出綠色方塊
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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++){ rect(pos[i][0],pos[i][1],28,30,5); } } void mousePressed(){ println(mouseX,mouseY);//定位，印出mouse座標 }
4.先點擊鍵盤，之後在點擊滑鼠會讓對應的鍵盤出現綠色方塊
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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(pressed[i]) rect(pos[i][0],pos[i][1],28,30,5); } } boolean[]pressed=new boolean[26];//Java的陣列宣告，都是0或false void mousePressed(){ if(key>='a'&&key<='z') pressed[key-'a']=true; } void keyReleased(){ if(key>='a'&&key<='z') pressed[key-'a']=false; }
5.讓字出現在視窗上半部分
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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); } 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或false void mousePressed(){ if(key>='a'&&key<='z') pressed[key-'a']=true; } void keyReleased(){ if(key>='a'&&key<='z') pressed[key-'a']=false; }
6.可以打字了，但打完後會當機(最後一個字會停在紅色而不是打完變黑色)
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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(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或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; }
7.承第6項，新增了打錯字背景會閃紅色來做提醒
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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(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或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; }
8.解決打完時會當機的問題
PS:問題-打完時繼續打的話，字串會超出陣列
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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="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); //定位 印出滑鼠的座標 }
9.最終完成版，新增可以打空格、標點符號
PImage img; int[][] pos={{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{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); //定位 印出滑鼠的座標 }
沒有留言:
張貼留言