今日進度:
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);
⚠️注意事項:
記得將圖片放入程式中
檢查各個名稱有無錯字或專有名詞有無拼錯
