2023互動技術: Jia的互動技術日誌 Week08

💣💣

今天想做會跳的馬力歐和皮卡丘打排球

靜者恆靜動者恆動

💾 程式碼存檔區

//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float x=200,y=200,vx=1,vy=1;
void draw(){
  ellipse(x,y,10,10);
  x +=vx;
  y +=vy;
}

從小球開始

以前教過的 有殘影的小球往下跑


f=m*a 位置、速度、加速度
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float x=50,y=250,vx=2,vy=-20;
void draw(){
  ellipse(x,y,10,10);
  x +=vx;
  y +=vy;
  vy += 0.98; //重力加速度
}
受到重力影響
f=m*a
(其實現實世界中是9.8但是太快了 這裡設0.98)
跑太快了 來不及截圖到一開始


if 判斷 不可以超過350
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float x=50,y=250,vx=2,vy=-20;
void draw(){
  
  x +=vx;
  y +=vy;
  vy += 0.98; //重力加速度
  if(y>350){//判斷有沒有到地板 y=350的地方
    y=350;
  }
  ellipse(x,y,10,10);
}
超過350 會被往右擠走 不會往下掉 像有個隱形邊界


但不想固定在350 想要反彈！

碰到邊界時 y的速度會正負顛倒 再加上能量耗損

💾 程式碼存檔區

//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float x=50,y=250,vx=2,vy=-20;
void draw(){
  
  x +=vx;
  y +=vy;
  vy += 0.98; //重力加速度
  if(y>350){//判斷有沒有到地板 y=350的地方
    y=350;
    vy = -vy*0.5; //能量耗損 速度變慢
  }
  ellipse(x,y,10,10);
}

x方向也會有耗損

💾 程式碼存檔區

//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float x=50,y=250,vx=2,vy=-20;
void draw(){
  
  x +=vx;
  y +=vy;
  vy += 0.98; //重力加速度
  if(y>350){//判斷有沒有到地板 y=350的地方
    y=350;
    vy = -vy*0.5; //能量耗損 速度變慢
    vx = vx*0.8;
  }
  ellipse(x,y,10,10);
}

🍄🍄

創造簡單的馬力歐世界

家上鍵盤左右移動(還沒有碰撞和邊界 會跑出去)

💾 程式碼存檔區

//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=2,vy=-20;
void draw(){
  background(108,137,255);
  marioX += vx;
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
}
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
}

滑鼠可控制移動

但停不下來


加上放開鍵盤 馬力歐停止
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=2,vy=-20;
void draw(){
  background(108,137,255);
  marioX += vx;
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
}
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}

讓馬力歐可以跳
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  marioY += vy;
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
}
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP) vy = -20;
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
但 還沒有重力加速度哦 會飛走哈哈哈
只有在飛的時候才會有重力加速度
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  if(flying){ //如果在飛行中
    marioY += vy; //上下位置會改變
    vy +=0.98; //重力加速度往下
    if(marioY>=250){ //碰到地板
      marioY = 250;
      flying = false; //不再飛行
    }
  }
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
}
boolean flying = false; //一開始沒有在飛!
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP){ //小心大括號!
    vy = -20;
    flying = true;
  }
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
設 boolean 原先 flying=false 沒有在飛
當按上鍵時 開始飛 flying=true
飛行時有重力加速度 有彈跳的感覺
當降落到地板 y=250時 不再飛行 y=250 x一樣能左右走
但目前跳躍沒有限制 一直按會一直往上跳
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  if(flying){ //如果在飛行中
    marioY += vy; //上下位置會改變
    vy +=0.98; //重力加速度往下
    if(marioY>=250){ //碰到地板
      marioY = 250;
      flying = false; //不再飛行
    }
  }
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
}
boolean flying = false; //一開始沒有在飛!
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP&&flying==false){ //如果沒有在飛 才能飛
    vy = -20;
    flying = true;
  }
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
修改成 原先沒有在飛才能飛
這樣才會正確從地板起跳
沒辦法連跳囉
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  if(flying){ //如果在飛行中
    marioY += vy; //上下位置會改變
    vy +=0.98; //重力加速度往下
    if(marioY>=250){ //碰到地板
      marioY = 250;
      flying = false; //不再飛行
    }
  }
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
  fill(229,119,42);rect(200,150,20,20);
  if(hitBox(200,150,20,20)){
    vy = 0;
    marioY=150+20;
  }
}
boolean hitBox(int x,int y,int w,int h){
  if(x<marioX && marioX<x+w && y<marioY && marioY<y+h) return true;
  else return false;
}
boolean flying = false; //一開始沒有在飛!
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP&&flying==false){ //如果沒有在飛 才能飛
    vy = -20;
    flying = true;
  }
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
ㄉㄨㄞ ㄉㄨㄞ
建立一個磚頭 撞到不會繼續飛
判斷上下左右邊界 都符合就確定在範圍內 有碰到vy=0 就會掉回去
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  if(flying){ //如果在飛行中
    marioY += vy; //上下位置會改變
    vy +=0.98; //重力加速度往下
    if(marioY>=250){ //碰到地板
      marioY = 250;
      flying = false; //不再飛行
    }
  }
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
  fill(229,119,42);rect(200,150,20,20);
  if(hitBox(200,150,20,20)){
    if(vy>0){
      marioY = 150-10;
      flying = false;
    }else{
      vy = 0;
      marioY = 150+20+10;
    }
  }
}
boolean hitBox(int x,int y,int w,int h){
  if(x-7<marioX && marioX<x+w+7 && y-10<marioY && marioY<y+h+10) return true;
  else return false;
}
boolean flying = false; //一開始沒有在飛!
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP&&flying==false){ //如果沒有在飛 才能飛
    vy = -20;
    flying = true;
  }
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
boolean 那邊出現了 + - 因為馬力歐靄靄肥肥的 需要有一些變動
現在如果vy>0速度大於零 就會往下掉
如果vy=0速度等於零 站立在磚頭上 (不過有個小bug 會在空中移動哈)

一旦離開磚塊就要進入飛行模式了
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  if(flying){ //如果在飛行中
    marioY += vy; //上下位置會改變
    vy +=0.98; //重力加速度往下
    if(marioY>=250){ //碰到地板
      marioY = 250;
      flying = false; //不再飛行
    }
  }
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
  fill(229,119,42);rect(200,150,20,20);
  if(hitBox(200,150,20,20)){
    if(vy>0){
      marioY = 150-10;
      flying = false;
      stand_box=true;
    }else{
      vy = 0;
      marioY = 150+20+10;
    }
  }
  if(stand_box==true && flying==false && leaveBox(200,150,20,20)){
    stand_box = false;
    flying = true;
    vy = 0;
  }
}
boolean leaveBox(int x,int y,int w,int h){
  if(x-7>marioX || marioX>x+w+7) return true;
  else return false;
}
boolean hitBox(int x,int y,int w,int h){
  if(x-7<marioX && marioX<x+w+7 && y-10<marioY && marioY<y+h+10) return true;
  else return false;
}
boolean flying = false, stand_box=false; //一開始沒有在飛!
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP&&flying==false){ //如果沒有在飛 才能飛
    vy = -20;
    flying = true;
  }
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
模仿 hitBox 寫一個 leaveBox 離開磚頭
判斷範圍相反過來
有兩個布林判斷哦

不只一個磚頭
💾 程式碼存檔區
//Mario vs. Pikachu
//牛頓力學
void setup(){
  size(400,400);
}
float marioX=50,marioY=250,vx=0,vy=0;
void draw(){
  background(108,137,255);
  marioX += vx;
  if(flying){ //如果在飛行中
    marioY += vy; //上下位置會改變
    vy +=0.98; //重力加速度往下
    if(marioY>=250){ //碰到地板
      marioY = 250;
      flying = false; //不再飛行
    }
  }
  fill(255,0,0);ellipse(marioX,marioY,15,20);
  fill(229,119,42);rect(0,260,400,150);
  drawAndTestBox(200,150,20,20);
}
void drawAndTestBox(int x,int y,int w,int h){
  fill(229,119,42);rect(x,y,w,h);
    if(hitBox(x,y,w,h)){
      if(vy>0){
        marioY = y-10;
        flying = false;
        stand_box=true;
      }else{
        vy = 0;
        marioY = y+h+10;
      }
    }
    if(stand_box==true && flying==false && leaveBox(x,y,w,h)){
      stand_box = false;
      flying = true;
      vy = 0;
    }
}
boolean leaveBox(int x,int y,int w,int h){
  if(x-7>marioX || marioX>x+w+7) return true;
  else return false;
}
boolean hitBox(int x,int y,int w,int h){
  if(x-7<marioX && marioX<x+w+7 && y-10<marioY && marioY<y+h+10) return true;
  else return false;
}
boolean flying = false, stand_box=false; //一開始沒有在飛!
void keyPressed(){
  if(keyCode==RIGHT)vx = 2;
  if(keyCode==LEFT) vx =-2;
  if(keyCode==UP&&flying==false){ //如果沒有在飛 才能飛
    vy = -20;
    flying = true;
    stand_box = false; //現在有2個變數都要處理
  }
}
void keyReleased(){
  if(keyCode==LEFT||keyCode==RIGHT)vx=0;
}
設置一個函式 drawAndTestBox
把剛才的 畫磚塊 撞磚塊 掉下磚塊 拉進來
drawAndTestBox(int X,int y,int w,int h)
這樣就可以很快設很多的磚頭了

2023互動技術

2023年11月2日星期四

Jia的互動技術日誌 Week08

沒有留言:

張貼留言

2023年11月2日 星期四

Jia的互動技術日誌 Week08

沒有留言:

張貼留言

2023年11月2日星期四