上週我們學習了如何將圖片讀入並且顯示出來
先來回顧一下上週的程式與成果
PImage home_img,start_img,rule_img;//封面,開始遊戲,規則介紹
void setup(){
size(1200,750);//視窗長寬
home_img = loadImage("home.png");//載入封面圖home.png
start_img = loadImage("start.png");//載入開始遊戲鍵start.png
rule_img = loadImage("rule.png");//載入規則介紹鍵rule.png
}
void draw(){//畫圖
image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高
image(start_img,1000,600,150,75);//start圖片的x,y座標(650,600)，(110,60)是圖片寬高
image(rule_img,800,600,150,75);//rule圖片的x,y座標(850,600)，(110,60)是圖片寬高
}
這周我們要學習的是如何將我們讀入的圖片製作成按紐
可以看到上周的成果有規則介紹以及開始遊戲，但沒有辦法點擊
因此我們要想辦法讓圖片被點擊後可以有所反應
那勢必會需要使用滑鼠點擊事件void mousePressed(){}//按下滑鼠時
以及利用boolean變數去控制按紐事件
用開始遊戲的圖片按鍵為例好了
1.boolean pressed_start=false;先宣告預設我們開始遊戲鍵是關閉的狀態
2.接下來設定當我們滑鼠按下開始遊戲鍵時會有什麼動作發生
void mousePressed(){
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100) {}
}
上面這行就是用來判斷開始遊戲鍵的範圍大小，如果我們點擊這個區間的座標，就會發生什麼事
pressed_start=true;
這行是按下開始遊戲鍵被打開
3.這兩行結合起來的意思就是，當我們點擊區間座標符合的話，那麼開始遊戲鍵被打開就會成立，如以下程式碼
void mousePressed(){//按下滑鼠時
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(1000,600)，1000+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_start=true;
}
}
以為這樣就可以使用按扭了嗎?NO、NO、NO!
我們還少了關鍵的要素，必須要在draw中顯示執行才可以
因此要加入當點擊按鈕成立後的後續行為
if(pressed_start==true)rect(1000,600,150,75);
//按下開始遊戲的按鈕後，畫一個x,y座標(1000,600)，長寬(150,75)的矩形
我們將這1、3點結合起來，如果執行以下程式碼，圖片就可以被點擊
boolean pressed_start=false;
void mousePressed(){//按下滑鼠時
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(1000,600)，1000+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_start=true;
}
}
我們來看看完整的程式碼與執行結果吧!
PImage home_img,start_img,rule_img;//命名圖片變數封面,開始遊戲,規則介紹
void setup(){
size(1200,750);//視窗長寬
home_img = loadImage("home.png");//載入封面圖home.png
start_img = loadImage("start.png");//載入開始遊戲鍵start.png
rule_img = loadImage("rule.png");//載入規則介紹鍵rule.png
}
void draw(){//畫圖
image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高
image(start_img,1000,600,150,75);//start圖片的x,y座標(650,600)，(110,60)是圖片寬高
image(rule_img,800,600,150,75);//rule圖片的x,y座標(850,600)，(110,60)是圖片寬高
if(pressed_start==true)rect(1000,600,150,75);//按下開始遊戲的按鈕後
}
boolean pressed_start=false;
void mousePressed(){//按下滑鼠時
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(1000,600)，1000+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_start=true;
}
}
另一邊也依樣畫葫蘆，這樣兩邊都可以點擊了
PImage home_img,start_img,rule_img;//讀入封面,開始遊戲,規則介紹
void setup(){
size(1200,750);//視窗長寬
home_img = loadImage("home.png");//載入封面圖home.png
start_img = loadImage("start.png");//載入開始遊戲鍵start.png
rule_img = loadImage("rule.png");//載入規則介紹鍵rule.png
}
void draw(){//畫圖
image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高
image(start_img,1000,600,150,75);//start圖片的x,y座標(650,600)，(110,60)是圖片寬高
image(rule_img,800,600,150,75);//rule圖片的x,y座標(850,600)，(110,60)是圖片寬高
if(pressed_start==true)rect(1000,600,150,75);//按下開始遊戲的按鈕後
if(pressed_rule==true)rect(800,600,150,75);//按下規則介紹的按鈕後
}
boolean pressed_start=false;
boolean pressed_rule=false;
void mousePressed(){//按下滑鼠時
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(1000,600)，1000+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_start=true;
}
if(800<mouseX && mouseX < 800+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(800,600)，800+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_rule=true;
}
}
那如果希望按下按鈕的當下會進入白色框框，而不點擊時就會回復原狀該怎麼辦?
很簡單，只要多寫一個鬆開滑鼠的函式就好了void mouseReleased(){}，並重新關閉按鍵，如:
pressed_start=false，後面就跟按下滑鼠的函式一樣，需要判定範圍
void mouseReleased(){//放開滑鼠
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
pressed_start=false;
}
if(800<mouseX && mouseX < 800+200 && 600<mouseY && mouseY<600+100){
pressed_rule=false;
}
}
完整程式碼
PImage home_img,start_img,rule_img;//讀入封面,開始遊戲,規則介紹
void setup(){
size(1200,750);//視窗長寬
home_img = loadImage("home.png");//載入封面圖home.png
start_img = loadImage("start.png");//載入開始遊戲鍵start.png
rule_img = loadImage("rule.png");//載入規則介紹鍵rule.png
}
void draw(){//畫圖
image(home_img,0,0,1200,750);//home圖片的x,y座標(0,0)，(1200,600)是圖片寬高
image(start_img,1000,600,150,75);//start圖片的x,y座標(650,600)，(110,60)是圖片寬高
image(rule_img,800,600,150,75);//rule圖片的x,y座標(850,600)，(110,60)是圖片寬高
if(pressed_start==true)rect(1000,600,150,75);//按下開始遊戲的按鈕後
if(pressed_rule==true)rect(800,600,150,75);//按下規則介紹的按鈕後
}
boolean pressed_start=false;
boolean pressed_rule=false;
void mousePressed(){//按下滑鼠時
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(1000,600)，1000+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_start=true;
}
if(800<mouseX && mouseX < 800+200 && 600<mouseY && mouseY<600+100){
//判定圖片範圍，xy座標(800,600)，800+200就是判定範圍有多寬，600+100就是判定範圍有多高
pressed_rule=true;
}
}
void mouseReleased(){//放開滑鼠
if(1000<mouseX && mouseX < 1000+200 && 600<mouseY && mouseY<600+100){
pressed_start=false;
}
if(800<mouseX && mouseX < 800+200 && 600<mouseY && mouseY<600+100){
pressed_rule=false;
}
}
沒有留言:
張貼留言