𝔍𝔒𝔗𝔇-week 4

今日進度:

1.放入圖片並顯示

2.放入2張圖片並讓其中一張圖片跟著鼠標移動

3.放入2張圖片並讓其中一張圖片跟著鼠標中央移動

4.放入背景圖和角色圖讓讓背景會移動

5.遇邊界會自動反彈的球

6.類似憤怒鳥的彈射功能

7.具有地心引力的球

今日成果:

1.放入圖片並顯示

程式:

PImage img;

size(800,500);

img = loadImage("image.png"); //插入圖片

image( img, 0, 0);//圖片位置

執行結果:

⚠️注意事項:

記得將圖片放入程式中並在下方看到檔案已放入程式中才算完成

2.放入2張圖片並讓其中一張圖片跟著鼠標移動

程式:

PImage img;

PImage img2;

void setup()

{

size(270,400);

img = loadImage("image.png"); //插入圖片1

img2 = loadImage("image2.png"); //插入圖片2

}

void draw()

{

image( img, 0, 0);

image( img2, mouseX, mouseY,35,59); //圖片2跟著鼠標移動,且尺寸為35*59

}

執行結果:

3.放入2張圖片並讓其中一張圖片跟著鼠標中央移動

程式:

PImage img;

PImage img2;

void setup()

{

size(270,400);

img = loadImage("image.png"); //插入圖片1

img2 = loadImage("image2.png"); //插入圖片2

}

void draw()

{

image( img, 0, 0);

image( img2, mouseX-35/2, mouseY-59/2,35,59); //圖片2中央跟著鼠標移動,且尺寸為35*59

}

執行結果:

4.放入背景圖和角色圖讓讓背景會移動

程式:

PImage img;

PImage img2;

void setup()  //只做一次

{

  size(400,400);

  img = loadImage("long_background.jpg"); //插入背景圖

  img2 = loadImage("rick.jpg");  //插入角色圖

}

int x; //設定移動變數

void draw() //每次都做

{

  if(mouseX>300) x--;  //當鼠標超過300後,圖片往右移

  image( img, x, 0);

  image( img2, mouseX-35/2, mouseY-59/2,35,59);//圖片2中央跟著鼠標移動,且尺寸為35*59

}

執行結果:

                                              ↑角色用PPT移除背景後放入遊戲中

5.遇邊界會自動反彈的球

程式:

float x=250,y=200;

float vx=2.0,vy=1.5; //初速度

void setup()

{

  size(500,400);

}

void draw()

{

  ellipse(x,y, 10, 10);

  x+=vx;

  y+=vy;

  if(x>500 || x<0) vx = -vx; //遇牆反彈

  if(y>400 || y<0) vy = -vy;//遇牆反彈

} 

執行結果:

6.類似憤怒鳥的彈射功能

程式:

float x=250,y=200;

float vx=0,vy=0; //初速度

void setup()

{

  

  size(500,400);

}

void draw()

{

  background(255);

  if(mousePressed) line(mouseX, mouseY, x, y);

  ellipse(x,y, 10, 10);

  ellipse(mouseX,mouseY, 10, 10);

  x+=vx;y+=vy;

  if(x>500 || x<0) vx = -vx; //遇牆反彈

  if(y>400 || y<0) vy = -vy; //遇牆反彈

} 

void mouseReleased() // 當鼠標放開後彈射

{

  vx= x-mouseX; vy= y-mouseY;

}

執行結果:

                                       

7.具有地心引力的球

程式:

float x=250,y=200;

float vx=1.3,vy=-14;

void setup()

{

  

  size(500,400);

}

void draw()

{

  //background(255); //加入即可得到白色的背景

  ellipse(x,y, 10, 10);

  x+=vx;y+=vy; //牛頓第一定律 作用力=反作用力

  vy += 0.98; //牛頓第二定律 重力加速度

  if(x>500 || x<0) vx = -vx*0.85;

  if(y>400 || y<0) vy = -vy*0.85;

} 

執行結果:

                                            ↑未清除背景的地心引力球,若需清除加background(255);

⚠️注意事項:

記得將圖片放入程式中

檢查各個名稱有無錯字或專有名詞有無拼錯