達yo - week11

 今天要做的是位子隨機、轉場

1.1

畫出格子

左手i右手j

程式碼

void setup(){
  size(600,400);
}

void draw(){
  background(255);
  for(int i=0;i<4;i++){
    for(int j=0;j<6;j++){
      rect(j*100,i*100,100,100);
    }
  }
}

執行畫面

填充格子的顏色

在每個格子裡有"Hello"這串文字

程式碼

void setup(){
  size(600,500);
}
void draw(){
  background(255);
  for(int i=0;i<4;i++){
    for(int j=0;j<6;j++){
      fill(#F5B4B4);
      rect(j*100,i*100,100,100);
      fill(0);
      text("Hello",j*100+25,i*100+50);
    }
  }
}

新增程式碼

使格子的文字是亂數隨機產生的數字

新增的部分

執行畫面

解決重複問題，要來進行洗牌(兩次)

程式碼

void setup(){
  size(600,500);
  for(int i=0;i<4;i++){
    for(int j=0;j<6;j++){
      value[i][j] = i*6+j+10;//從10開始,數字不重複
    }
  }
  for(int k=0;k<2;k++){
    int i=int(random(4)),j=int(random(6));
    int i2=int(random(4)),j2=int(random(6));
    int temp = value[i][j];
    value[i][j] = value[i2][j2];
    value[i2][j2] = temp;
  }
}
int [][]value = new int [4][6];
void draw(){
  background(255);
  for(int i=0;i<4;i++){
    for(int j=0;j<6;j++){
      fill(#F5B4B4);
      rect(j*100,i*100,100,100);
      fill(0);
      text(value[i][j],j*100+25,i*100+50);
    }
  }
}

執行畫面

2.1製作轉場

程式碼

int state = 0;
void setup(){
  size(400,400);
}
void draw(){//第0關,白色
  if(state==0){
    background(255);
  }else if(state==1){//第1關,紅色
    background(255,0,0);
  }else if(state==2){//第2關,藍色
    background(0,0,255);
  }
}

*因為沒有給指令(按鍵或滑鼠)，所以執行畫面為白色，還無法換場景

按下滑鼠按鍵，切換場景

程式碼

int state = 0;
void setup(){
  size(400,400);
  textSize(50);
}
void draw(){//第0關,白色
  if(state==0){
    background(255);
    fill(0);text("Click to Start",80,200);文字顏色、位置
  }else if(state==1){//第1關,紅色
    background(255,0,0);
  }else if(state==2){//第2關,藍色
    background(0,0,255);
  }
}
void mousePressed(){
  if(state==0) state=1;
}

執行畫面

進入第一關後

在畫面上的左上跟右上各新增正方塊

讓灰色方塊移動到白色方塊

完美疊在一起

就會進入到第二關

執行畫面

到了第二關

進行倒計時

當時間為零

重新切回State=1(第0關白色背景)

程式碼

int state = 0;
void setup(){
  size(400,400);
  textSize(50);
}
int x = 50,y=50,t= 100;
void draw(){//第0關,白色
  if(state==0){
    background(255);
    fill(0);text("Click to Start",80,200);
    x=50;
  }else if(state==1){//第1關,紅色
    background(255,0,0);
    fill(255);rect(300,50,50,50);
    fill(128);rect(x,y,50,50);
    t = 100;
  }else if(state==2){//第2關,藍色
    background(0,0,255);text("wait" + t,80,200);
    t--;
    if(t==0) state=0;
  }
}
void mousePressed(){
  if(state==0) state=1;
}
void keyPressed(){
  if(state==1 && keyCode==RIGHT){
    x+=10;
    if(x==300) state=2;
  }
}

執行畫面

--分隔線--

3.1老師講解同學遇到的問題

籃球機投球時做出拋物線

程式碼

執行畫面

總程式碼

PImage imgRack;
void setup(){
  size(300,300);
  imgRack = loadImage("rack.jpg");
}
boolean gameOver=false;
void keyPressed(){
  gameOver = true;
}
void draw(){
  background(255);
  image(imgRack,0,0);
  if(flying){
    if(!gameOver){
      x += vx;
      y += vy;
      vy += 0.98;
    }
  }else{
    x = mouseX;
    y = mouseY;
    if(mousePressed){
      fill(255);ellipse(posX,posY,20,20);
      line(posX,posY,x,y);
    }
  }
  fill(#FFA652); ellipse(x,y,20,20);
}
boolean flying = false;
float x,y,vx,vy;
float posX = -100,posY = -100;
void mousePressed(){
  x = posX = mouseX;
  y = posY = mouseY;
  flying = false;
}
void mouseReleased(){
  vx = posX-mouseX;
  vy = posY-mouseY;
  flying = true;
}